| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| |
| <div id="test"> |
| <div id="first"></div> |
| </div> |
| |
| <script> |
| description("Test that :host-context(:first-child) is re-evaluated when :first-child changes."); |
| |
| var test = document.getElementById("test"); |
| var first = document.getElementById("first"); |
| |
| first.appendChild( |
| createDOM("div", {"id": "host"}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(":host-context(#first:first-child) { background-color: red; }")), |
| createDOM('div', {}, |
| document.createTextNode("You should see no red."))))); |
| |
| document.body.offsetTop; // Force style recalc. |
| |
| var red = "rgb(255, 0, 0)"; |
| |
| shouldBe("getComputedStyle(first.firstChild, null).backgroundColor", "red"); |
| |
| test.insertBefore(document.createElement("div"), first); |
| |
| shouldNotBe("getComputedStyle(first.firstChild, null).backgroundColor", "red"); |
| </script> |
