| 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>
|
|
|