Index: LayoutTests/fast/css/invalidation/targeted-class-host-context.html |
diff --git a/LayoutTests/fast/css/invalidation/targeted-class-host-context.html b/LayoutTests/fast/css/invalidation/targeted-class-host-context.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cce6b2bfc4ca6cac654c88d97e2fd57ba9aec5ed |
--- /dev/null |
+++ b/LayoutTests/fast/css/invalidation/targeted-class-host-context.html |
@@ -0,0 +1,60 @@ |
+<!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(), 8, "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> |