<html>
<head id="head">
<script src="../../resources/js-test-pre.js"></script>
<style type="text/css">
li:only-child { color: red; }
</style>
</head>
<body>
<ul id="list"><li id="orig">Original.</li></ul>
<script>
description("This tests elements affected by CSS pseudo class selectors are updated after a dynamic DOM change.");

function makeDynamicChanges() {
    var x = document.createElement('li');
    x.appendChild(document.createTextNode('Generated content.'));
    var ul = document.getElementById('list');
    ul.insertBefore(x, ul.firstChild);
}

shouldBe('getComputedStyle(document.getElementById("orig"))["color"]', '"rgb(255, 0, 0)"');
makeDynamicChanges();
shouldBe('getComputedStyle(document.getElementById("orig"))["color"]', '"rgb(0, 0, 0)"');
</script>
</body>
</html>