| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| div p:first-child { |
| color: blue; |
| } |
| div p:last-child { |
| color: purple; |
| } |
| </style> |
| <p id="description"></p> |
| <div id="threeChildren"> |
| <p>a</p><p>b</p><p>c</p> |
| </div> |
| <div id="oneChild"> |
| </div> |
| <div id="console"></div> |
| <script> |
| description("Check if replacing innerHTML handles :last-child properly."); |
| function replace(x) { |
| x.innerHTML = "<p>1</p><p>2</p><p>3</p>"; |
| } |
| |
| var element = null; |
| |
| debug("Replacing three children."); |
| replace(document.getElementById("threeChildren")); |
| element = document.getElementById("threeChildren").firstChild; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 255)'"); |
| element = element.nextSibling; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 0)'"); |
| element = element.nextSibling; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(128, 0, 128)'"); |
| |
| debug("Replacing one child."); |
| replace(document.getElementById("oneChild")); |
| element = document.getElementById("oneChild").firstChild; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 255)'"); |
| element = element.nextSibling; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(0, 0, 0)'"); |
| element = element.nextSibling; |
| shouldBe("getComputedStyle(element).getPropertyValue('color')", "'rgb(128, 0, 128)'"); |
| |
| document.getElementById("threeChildren").innerHTML = ""; |
| document.getElementById("oneChild").innerHTML = ""; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
