invalidation-set-not.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#p1 :not(.t1),
#p2 :not(.t2) #r2,
#p3 :not(.t3) :not(.nomatch),
#p4 .t4 :not(.nomatch),
#p5 :-webkit-any(:not(.t5), #dummy) #r5,
#p6 .t6 #r6:not(.dummy),
#p7 + :not(.t7) + :not(.nomatch) #r7,
#p8 + .t8 ~ div :not(.nomatch) { background-color: rgb(0, 128, 0); }
</style>
<div id="p1">
    <div id="t1" class="t1">
        <div></div>
        <div></div>
    </div>
</div>
<div id="p2">
    <div id="t2" class="t2">
        <div></div>
        <div id="r2"></div>
    </div>
</div>
<div id="p3">
    <div id="t3" class="t3">
        <div></div>
        <div id="r3"></div>
    </div>
</div>
<div id="p4">
    <div id="t4">
        <div></div>
        <div id="r4"></div>
    </div>
</div>
<div id="p5">
    <div id="t5" class="t5">
        <div></div>
        <div id="r5"></div>
    </div>
</div>
<div id="p6">
    <div id="t6">
        <div></div>
        <div id="r6"></div>
    </div>
</div>
<div>
    <div id="p7"></div>
    <div id="t7" class="t7"></div>
    <div>
        <div></div>
        <div id="r7"></div>
    </div>
</div>
<div>
    <div id="p8"></div>
    <div id="t8"></div>
    <div>
        <div></div>
        <div id="r8"></div>
    </div>
    <fieldset>
        <div></div>
    </fieldset>
</div>

<script>
document.body.offsetTop;

test(function() {
    assert_true(!!window.internals, "This test only works with internals exposed present");
}, "internals are exposed");

test(function() {
    assert_equals(getComputedStyle(t1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t1.className = "";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Single element style recalc");
    assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Negated class without combinators");

test(function() {
    assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t2.className = "";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc changed element and #r2");
    assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Id descendant of negated class");

test(function() {
    assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t3.className = "";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
    assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Negated class descendant of negated class");

test(function() {
    assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t4.className = "t4";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
    assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Negated class descendant of class");

test(function() {
    assert_equals(getComputedStyle(r5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t5.className = "";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc changed element and #r5");
    assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Id descendant of negated class in :-webkit-any");

test(function() {
    assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t6.className = "t6";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc changed element and #r6");
    assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Negated class with id descendant of class");

test(function() {
    assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t7.className = "";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Recalc changed element and #r7");
    assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Id descendant of negated sibling class");

test(function() {
    assert_equals(getComputedStyle(r8).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    t8.className = "t8";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
    assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Negated class descendant of sibling class");

</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/invalidation-set-not.html
