<!DOCTYPE html>
<html>
<head>
    <style>
        body
        {
            counter-reset: i 0;
        }

        div:before
        {
            content: "-" counter(i);
            counter-increment: i;
        }
        div {
            display:inline;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function insertAuto(i) {
            // We need to use the selection or we cannot reproduce this bug!
            var selection = window.getSelection();
            var container = document.getElementById("container");
            selection.setPosition(container, 0);
            if (selection.rangeCount > 0) {
                var newElement = document.createElement('div');
                newElement.id = 'div' + i;
                //newElement.innerHTML = '<span"> - i:' + (6 - i) + '</span>';
                var node = selection.getRangeAt(0).startContainer.parentNode.parentNode;
                node.parentNode.insertBefore(newElement, node.nextSibling);
            }
        }

        function dumpCounters()
        {
            var spanList = document.getElementsByTagName("div");
            var counters = '';
            for (var i = 0; i < spanList.length; ++i ) {
                var divItem = spanList.item(i);
                counters += '-';
                counters += window.internals.counterValue(document.getElementById(divItem.getAttribute("id")));
                counters += divItem.textContent;
            }
            document.getElementById("container").innerHTML = counters;
            testRunner.notifyDone();
        }

        function test()
        {
            for (var i = 0; i < 5; ++i)
                insertAuto(i);
            if (testRunner) {
                setTimeout("dumpCounters()", 0);
            }
        }
        window.addEventListener("load", test, false);
  </script>
</head>
<body>
    <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=38291">38291</a> - CSS counters in :before pseudo-elements do not always update</p>
    <p>The following two lines should be the same:</p>
    <p>-1--2-3-4-5-6</p>
    <div id="container"><span>-</span></div>
</body>
</html>