LayoutTests/fast/css/last-child-innerhtml.html

   1 <html>
   2 <head>
   3 <script src="../js/resources/js-test-pre.js"></script>
   4 <style>
   5 div p:first-child {
   6   color: blue;
   7 }
   8 div p:last-child {
   9   color: purple;
  10 }
  11 </style>
  12 <p id="description"></p>
  13 <div id="threeChildren">
  14 <p>a</p><p>b</p><p>c</p>
  15 </div>
  16 <div id="oneChild">
  17 </div>
  18 <div id="console"></div>
  19 <script>
  20 description("Check if replacing innerHTML handles :last-child properly.");
  21 function replace(x) {
  22   x.innerHTML = "<p>1</p><p>2</p><p>3</p>";
  23 }
  24
  25 var element = null;
  26
  27 debug("Replacing three children.");
  28 replace(document.getElementById("threeChildren"));
  29 element = document.getElementById("threeChildren").firstChild;
  30 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 255)'");
  31 element = element.nextSibling;
  32 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 0)'");
  33 element = element.nextSibling;
  34 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(128, 0, 128)'");
  35
  36 debug("Replacing one child.");
  37 replace(document.getElementById("oneChild"));
  38 element = document.getElementById("oneChild").firstChild;
  39 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 255)'");
  40 element = element.nextSibling;
  41 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 0)'");
  42 element = element.nextSibling;
  43 shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(128, 0, 128)'");
  44
  45 document.getElementById("threeChildren").innerHTML = "";
  46 document.getElementById("oneChild").innerHTML = "";
  47 </script>
  48 <script src="../js/resources/js-test-post.js"></script>
  49 </body>