<!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.collapse(container.firstChild, 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 += 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 (window.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>