| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| :-webkit-any(.a1) { background-color: green } |
| .a2 :-webkit-any(.b2) { background-color: green } |
| .a3 :-webkit-any(.b3, .c3) { background-color: green } |
| .a4 :-webkit-any(:not(.b4), .c4) { background-color: green } |
| :-webkit-any(.a5, .b5) ~ .c5 .d5 { background-color: green } |
| |
| </style> |
| <div id="t1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| <div id="t2"> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span class="b2"></span> |
| </div> |
| <div id="t3"> |
| <span></span> |
| <span></span> |
| <span class="b3"></span> |
| <span class="c3"></span> |
| </div> |
| <div id="t4"> |
| <span></span> |
| <span class="b4"></span> |
| <span class="b4"></span> |
| <span class="c4"></span> |
| </div> |
| <div> |
| <span id="t5"></span> |
| <span class="c5"> |
| <span class="d5"></span> |
| </span> |
| </div> |
| <script> |
| description("Check that targeted class invalidation works with :-webkit-any selectors."); |
| |
| var transparent = "rgba(0, 0, 0, 0)"; |
| var green = "rgb(0, 128, 0)"; |
| |
| var t1 = document.getElementById("t1"); |
| var b2 = document.querySelector("#t2 .b2"); |
| var b3 = document.querySelector("#t3 .b3"); |
| var c3 = document.querySelector("#t3 .c3"); |
| var spans4 = document.querySelectorAll("#t4 span"); |
| var d5 = document.querySelector("#t5 ~ .c5 .d5"); |
| |
| shouldBe("getComputedStyle(t1, null).backgroundColor", "transparent"); |
| shouldBe("getComputedStyle(b2, null).backgroundColor", "transparent"); |
| shouldBe("getComputedStyle(b3, null).backgroundColor", "transparent"); |
| shouldBe("getComputedStyle(c3, null).backgroundColor", "transparent"); |
| |
| for (var i=0; i<4; i++) |
| shouldBe("getComputedStyle(spans4[i], null).backgroundColor", "transparent"); |
| |
| shouldBe("getComputedStyle(d5, null).backgroundColor", "transparent"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| t1.className = "a1"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| shouldBe("getComputedStyle(t1, null).backgroundColor", "green"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| document.getElementById("t2").className = "a2"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| shouldBe("getComputedStyle(b2, null).backgroundColor", "green"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| document.getElementById("t3").className = "a3"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2"); |
| shouldBe("getComputedStyle(b3, null).backgroundColor", "green"); |
| shouldBe("getComputedStyle(c3, null).backgroundColor", "green"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| document.getElementById("t4").className = "a4"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5"); |
| shouldBe("getComputedStyle(spans4[0], null).backgroundColor", "green"); |
| shouldBe("getComputedStyle(spans4[1], null).backgroundColor", "transparent"); |
| shouldBe("getComputedStyle(spans4[2], null).backgroundColor", "transparent"); |
| shouldBe("getComputedStyle(spans4[3], null).backgroundColor", "green"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| document.getElementById("t5").className = "a5"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| shouldBe("getComputedStyle(d5, null).backgroundColor", "green"); |
| </script> |
