targeted-class-host-context.html | Explore in Territory

<!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.attachShadow({mode: 'open'}).innerHTML = "<style>:host-context(.t1) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";
host2.attachShadow({mode: 'open'}).innerHTML = "<style>:host-context(.t2) #inner { background-color: green }</style><div></div><div></div><div></div><div><span id='inner'></span></div>";
host3.attachShadow({mode: 'open'}).innerHTML = "<style>:host-context(#t3:not(.t3)) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";
host4.attachShadow({mode: 'open'}).innerHTML = "<style>:host-context(:is(.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>
chromium/third_party/blink/web_tests/fast/css/invalidation/targeted-class-host-context.html
