CSS counters don't work

[GoogleCodeExporter]

What steps will reproduce the problem?

ul {
counter-reset: xyz;
}

ul li:before {
    counter-increment: xyz;
    content: counter(xyz);
}

What is the expected output? What do you see instead?

:before pseudo-element should contain a number but there is string 
"counter(xyz)" instead.

What version of the product are you using? On what operating system?

Browser IE8+ implements this feature, so the issue is with IE7 and older.

Original issue reported on code.google.com by jachym.t...@gmail.com on 15 May 2011 at 11:21

[GoogleCodeExporter]

I've implemented it this way, it allows basic support of counter-increment (was 
enough for me):

// IE7 pseudo elements
.............

    create: function(target) {
      var generated = target.runtimeStyle[this.position];
      if (generated) {
        // copy the array of values
        var content = [].concat(generated.content || "");
        for (var j = 0; j < content.length; j++) {
          if (typeof content[j] == "object") {
            content[j] = target.getAttribute(content[j].attr);
          }
            // v3 modified: counter content?
            var m;
            if (m = content[j].match(/^counter\s*\((.*?)\)$/)) {
                if (!PseudoElement.counters) PseudoElement.counters = {};
                if (!PseudoElement.counters[m[1]]) {
                    PseudoElement.counters[m[1]] = 0;
                }
                PseudoElement.counters[m[1]]++;
                content[j] = PseudoElement.counters[m[1]];
            }
        }
        content = content.join("");
        var url = content.match(URL);
        var cssText = "overflow:hidden;" + generated.cssText.replace(/'/g, '"');
        var position = POSITION_MAP[this.position + Number(target.canHaveChildren)];
        var id = 'ie7_pseudo' + PseudoElement.count++;
        target.insertAdjacentHTML(position, format(PseudoElement.ANON, this.className, id, cssText, url ? "" : content));
        if (url) {
          var src = getString(url[1]);
          var pseudoElement = document.getElementById(id);
          pseudoElement.src = src;
          addFilter(pseudoElement, "crop");
          var targetIsFloated = target.currentStyle.styleFloat !== "none";
          if (pseudoElement.currentStyle.display === "inline" || targetIsFloated) {
            if (appVersion < 7 && targetIsFloated && target.canHaveChildren) {
              target.runtimeStyle.display = "inline";
              target.runtimeStyle.position = "relative";
              pseudoElement.runtimeStyle.position = "absolute";
            }
            pseudoElement.style.display = "inline-block";
            if (target.currentStyle.styleFloat !== "none") {
              pseudoElement.style.pixelWidth = target.offsetWidth;
            }
            var image = new Image;
            image.onload = function() {
              pseudoElement.style.pixelWidth = this.width;
              pseudoElement.style.pixelHeight = Math.max(this.height, pseudoElement.offsetHeight);
            };
            image.src = src;
          }
        }
        target.runtimeStyle[this.position] = null;
      }
    },

Original comment by var...@gmail.com on 20 Dec 2011 at 12:48