third_party/WebKit/LayoutTests/fast/css/dynamic-pseudo-class.html

   1 <html>
   2 <head id="head">
   3 <script src="../../resources/js-test.js"></script>
   4 <style type="text/css">
   5 li:only-child { color: red; }
   6 </style>
   7 </head>
   8 <body>
   9 <ul id="list"><li id="orig">Original.</li></ul>
  10 <script>
  11 description("This tests elements affected by CSS pseudo class selectors are updated after a dynamic DOM change.");
  12
  13 function makeDynamicChanges() {
  14     var x = document.createElement('li');
  15     x.appendChild(document.createTextNode('Generated content.'));
  16     var ul = document.getElementById('list');
  17     ul.insertBefore(x, ul.firstChild);
  18 }
  19
  20 shouldBe('getComputedStyle(document.getElementById("orig"))["color"]', '"rgb(255, 0, 0)"');
  21 makeDynamicChanges();
  22 shouldBe('getComputedStyle(document.getElementById("orig"))["color"]', '"rgb(0, 0, 0)"');
  23 </script>
  24 </body>
  25 </html>