| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="t1"> |
| <div id="host1"></div> |
| </div> |
| <div id="t2"> |
| <div id="host2"></div> |
| </div> |
| <div id="t3" class="t3"> |
| <div id="host3"></div> |
| </div> |
| <div id="t4"> |
| <div id="host4"></div> |
| </div> |
| <script> |
| |
| // Create shadow trees |
| |
| host1.createShadowRoot().innerHTML = "<style>:host-context(.t1) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>"; |
| host2.createShadowRoot().innerHTML = "<style>:host-context(.t2) #inner { background-color: green }</style><div></div><div></div><div></div><div><span id='inner'></span></div>"; |
| host3.createShadowRoot().innerHTML = "<style>:host-context(#t3:not(.t3)) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>"; |
| host4.createShadowRoot().innerHTML = "<style>:host-context(.nomatch, .t4) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>"; |
| |
| var transparent = "rgba(0, 0, 0, 0)"; |
| var green = "rgb(0, 128, 0)"; |
| |
| test(function(){ |
| assert_equals(getComputedStyle(host1, "").backgroundColor, transparent, "Background color before class change."); |
| t1.className = "t1"; |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change."); |
| assert_equals(getComputedStyle(host1, "").backgroundColor, green, "Background color after class change."); |
| }, "Matching :host-context with class."); |
| |
| test(function(){ |
| var inner = host2.shadowRoot.getElementById("inner"); |
| assert_equals(getComputedStyle(inner, "").backgroundColor, transparent, "Background color before class change."); |
| t2.className = "t2"; |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Element recalc count on class change."); |
| assert_equals(getComputedStyle(inner, "").backgroundColor, green, "Background color after class change."); |
| }, "Matching id descendant of :host-context with class."); |
| |
| test(function(){ |
| assert_equals(getComputedStyle(host3, "").backgroundColor, transparent, "Background color before class change."); |
| t3.className = ""; |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change."); |
| assert_equals(getComputedStyle(host3, "").backgroundColor, green, "Background color after class change."); |
| }, "Matching :host-context with id and negated class."); |
| |
| test(function(){ |
| assert_equals(getComputedStyle(host4, "").backgroundColor, transparent, "Background color before class change."); |
| t4.className = "t4"; |
| if (window.internals) |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Element recalc count on class change."); |
| assert_equals(getComputedStyle(host4, "").backgroundColor, green, "Background color after class change."); |
| }, "Matching :host-context with selector list of classes."); |
| </script> |
