webkit-any.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    .t1 :-webkit-any(span, div) { color: green; }
    .t2 :-webkit-any(#x1, #x2) { color: green; }
</style>
<p>Both elements below should be green.</p>
<div id="t1">
    <div>Green</div>
    <span>Green</span>
</div>
<div id="t2">
    <div id="x1">Green</div>
    <div id="x2">Green</div>
</div>
<script>
    document.body.offsetTop;

    test(() => {
        assert_equals(getComputedStyle(t1.querySelector("div")).color, "rgb(0, 0, 0)");
        assert_equals(getComputedStyle(t1.querySelector("span")).color, "rgb(0, 0, 0)");
        assert_equals(getComputedStyle(x1).color, "rgb(0, 0, 0)");
        assert_equals(getComputedStyle(x2).color, "rgb(0, 0, 0)");
    }, "Preconditions.");

    test(() => {
        t1.className = "t1";
        assert_equals(getComputedStyle(t1.querySelector("div")).color, "rgb(0, 128, 0)");
        assert_equals(getComputedStyle(t1.querySelector("span")).color, "rgb(0, 128, 0)");
    }, "Invalidate two type selectors.");

    test(() => {
        t2.className = "t2";
        assert_equals(getComputedStyle(x1).color, "rgb(0, 128, 0)");
        assert_equals(getComputedStyle(x2).color, "rgb(0, 128, 0)");
    }, "Invalidate two id selectors.");
</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/webkit-any.html
