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

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<div id="host1"></div>
<div id="host2"></div>
<div id="host3" class="c3"></div>
<div id="host4"></div>
<script>
description("Check that targeted class invalidation works with the :host pseudo class.");

// Create shadow trees

var host1 = document.getElementById("host1");
host1.attachShadow({mode: 'open'}).innerHTML = "<style>:host(.c1) { background-color: green }</style><div></div><div></div><div></div><div></div><div></div>";

var host2 = document.getElementById("host2");
host2.attachShadow({mode: 'open'}).innerHTML = '<style>:host(.c2) .inner { background-color: green }</style><div></div><div></div><div></div><div><span id="inner" class="inner"></span></div>';

var host3 = document.getElementById("host3");
host3.attachShadow({mode: 'open'}).innerHTML = "<style>:host(#host3:not(.c3)) { background-color: green }</style><div></div><div></div><div></div><div></div>";

var host4 = document.getElementById("host4");
host4.attachShadow({mode: 'open'}).innerHTML = "<style>:host(:is(.nomatch, .c4)) { background-color: green }</style><div></div><div></div><div></div><div></div>";

var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";

var inner = host2.shadowRoot.getElementById("inner");

shouldBe("getComputedStyle(host1, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(inner, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(host3, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(host4, null).backgroundColor", "transparent");

document.body.offsetLeft; // force style recalc.

host1.className = "c1";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(host1, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

host2.className = "c2";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inner, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

host3.className = "";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(host3, null).backgroundColor", "green");

document.body.offsetLeft; // force style recalc.

host4.className = "c4";
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(host4, null).backgroundColor", "green");

</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/targeted-class-host-pseudo.html
