| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| .t1 span.c#r1, |
| .t2 *.c#r2, |
| .t3 span.c, |
| .t4 *.ca.cb, |
| .t5 :-webkit-any(div.ca.cb, *.cc.cd#r5b), |
| .t6 ~ div > span.c#r6, |
| .t7 ~ div > span.c, |
| .t8 + * ~ div.c#p8 span, |
| .t9 + * ~ div.c span, |
| .t10 + div > :-webkit-any(div.ca.cb, *.cc.cd#r10b) { background-color: rgb(0, 128, 0); } |
| </style> |
| <div> |
| <div id="t1"> |
| <div></div> |
| <div class="c"></div> |
| <span></span> |
| <span class="c"></span> |
| <span class="c" id="r1"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t2"> |
| <span></span> |
| <span class="c"></span> |
| <span class="c" id="r2"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t3"> |
| <div></div> |
| <div class="c"></div> |
| <span></span> |
| <span class="c" id="r3"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t4"> |
| <span></span> |
| <span class="ca"></span> |
| <span class="cb"></span> |
| <span class="ca cb" id="r4"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t5"> |
| <div></div> |
| <span></span> |
| <fieldset></fieldset> |
| <fieldset class="ca"></fieldset> |
| <fieldset class="cc cd"></fieldset> |
| <div class="ca cb" id="r5a"></div> |
| <span class="cc cd" id="r5b"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t6"></div> |
| <div> |
| <div class="c"></div> |
| <span></span> |
| <span class="c"></span> |
| <span class="c" id="r6"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t7"></div> |
| <div> |
| <div class="c"></div> |
| <span></span> |
| <span class="c" id="r7"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t8"></div> |
| <span> |
| <span></span> |
| </span> |
| <span class="c"> |
| <span></span> |
| </span> |
| <div> |
| <span></span> |
| </div> |
| <div class="c"> |
| <span></span> |
| </div> |
| <div class="c" id="p8"> |
| <span id="r8"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t9"></div> |
| <span> |
| <span></span> |
| </span> |
| <span class="c"> |
| <span></span> |
| </span> |
| <div> |
| <span></span> |
| </div> |
| <div class="c"> |
| <span id="r9"></span> |
| </div> |
| </div> |
| <div> |
| <div id="t10"></div> |
| <div> |
| <div></div> |
| <span></span> |
| <fieldset></fieldset> |
| <fieldset class="ca"></fieldset> |
| <fieldset class="cc cd"></fieldset> |
| <div class="ca cb" id="r10a"></div> |
| <span class="cc cd" id="r10b"></span> |
| </div> |
| </div> |
| |
| <script> |
| document.body.offsetTop; |
| |
| test(function() { |
| assert_true(!!window.internals, "This test only works with internals exposed present"); |
| }, "internals are exposed"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t1.className = "t1"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Descendant with compound selector containing id"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t2.className = "t2"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Descendant with compound selector containing universal and id"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t3.className = "t3"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Descendant with compound selector"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t4.className = "t4"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Descendant with compound selector containing universal"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r5a).backgroundColor, "rgba(0, 0, 0, 0)", "Background color a should initially be transparent"); |
| assert_equals(getComputedStyle(r5b).backgroundColor, "rgba(0, 0, 0, 0)", "Background color b should initially be transparent"); |
| |
| t5.className = "t5"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 5, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r5a).backgroundColor, "rgb(0, 128, 0)", "Background color a is green after class change"); |
| assert_equals(getComputedStyle(r5b).backgroundColor, "rgb(0, 128, 0)", "Background color b is green after class change"); |
| }, "Descendant with :-webkit-any containing compound selector"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t6.className = "t6"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Sibling with compound descendant containing id"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t7.className = "t7"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc"); |
| // TODO(ericwilligers): Update Blink's implementation of sibling selector invalidation, so the following passes: |
| assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Sibling with compound descendant"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r8).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t8.className = "t8"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Compound sibling selector containing id"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r9).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); |
| |
| t9.className = "t9"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r9).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); |
| }, "Compound sibling selector"); |
| |
| test(function() { |
| assert_equals(getComputedStyle(r10a).backgroundColor, "rgba(0, 0, 0, 0)", "Background color a should initially be transparent"); |
| assert_equals(getComputedStyle(r10b).backgroundColor, "rgba(0, 0, 0, 0)", "Background color b should initially be transparent"); |
| |
| t10.className = "t10"; |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 5, "Subtree style recalc"); |
| assert_equals(getComputedStyle(r10a).backgroundColor, "rgb(0, 128, 0)", "Background color a is green after class change"); |
| assert_equals(getComputedStyle(r10b).backgroundColor, "rgb(0, 128, 0)", "Background color b is green after class change"); |
| }, "Sibling with descendant :-webkit-any containing compound selector"); |
| |
| </script> |
