| <!DOCTYPE html> |
| |
| <script src="../../../resources/js-test.js"></script> |
| |
| <div id="sandbox"></div> |
| |
| <script> |
| var sandbox = document.getElementById("sandbox"); |
| |
| function cleanUp() |
| { |
| sandbox.innerHTML = ""; |
| } |
| |
| description("Test dynamically changing sibling rule matches in ShadowRoots"); |
| |
| debug("Dynamically change the :first-child"); |
| var host = sandbox.appendChild(document.createElement("div")); |
| var root = host.attachShadow({mode: 'open'}); |
| root.innerHTML = "<span>Black</span><style>:first-child { color: red; }</style>"; |
| document.body.offsetTop; |
| var second = root.firstElementChild; |
| var first = root.insertBefore(document.createElement("span"), second); |
| first.textContent = "Red"; |
| shouldBeEqualToString("getComputedStyle(first).color", "rgb(255, 0, 0)"); |
| shouldBeEqualToString("getComputedStyle(second).color", "rgb(0, 0, 0)"); |
| |
| cleanUp(); |
| |
| debug("Dynamically change the :last-child"); |
| var host = sandbox.appendChild(document.createElement("div")); |
| var root = host.attachShadow({mode: 'open'}); |
| root.innerHTML = "<style>:last-child { color: red; }</style><span>Black</span>"; |
| document.body.offsetTop; |
| var secondToLast = root.lastElementChild; |
| var last = root.appendChild(document.createElement("span")); |
| last.textContent = "Red"; |
| shouldBeEqualToString("getComputedStyle(last).color", "rgb(255, 0, 0)"); |
| shouldBeEqualToString("getComputedStyle(secondToLast).color", "rgb(0, 0, 0)"); |
| |
| cleanUp(); |
| |
| debug("Dynamically change what a + combinator matches"); |
| var host = sandbox.appendChild(document.createElement("div")); |
| var root = host.attachShadow({mode: 'open'}); |
| root.innerHTML = "<div></div><span>Black</span><style>div + span { color: red; }</style>"; |
| document.body.offsetTop; |
| var div = root.firstElementChild; |
| var span = div.nextElementSibling; |
| div.remove(); |
| shouldBeEqualToString("getComputedStyle(span).color", "rgb(0, 0, 0)"); |
| |
| cleanUp(); |
| |
| debug("Dynamically change what a ~ combinator matches"); |
| var host = sandbox.appendChild(document.createElement("div")); |
| var root = host.attachShadow({mode: 'open'}); |
| root.innerHTML = "<div></div><span>Black</span><style>div ~ span { color: red; }</style>"; |
| document.body.offsetTop; |
| var div = root.firstElementChild; |
| var span = div.nextElementSibling; |
| div.remove(); |
| shouldBeEqualToString("getComputedStyle(span).color", "rgb(0, 0, 0)"); |
| |
| cleanUp(); |
| |
| </script> |
