computed-style-recalc.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.a + .b { color: green; }
.c + .d { color: green; }
.e { color: green; }
</style>
<div id="t1">
    <div></div>
    <div class="b"></div>
</div>
<div id="t2">
    <div>
        <div></div>
        <div class="d"></div>
    </div>
    <div>
        <div class="e"></div>
    </div>
</div>
<div id="t3">
    <div>
        <div></div>
        <div class="d"></div>
    </div>
    <div>
        <div class="a"></div>
        <div class="b"></div>
    </div>
</div>
<script>
description("Check that getComputedStyle causes a style recalc when necessary, and only when necessary.");

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

// Check that sibling recalc for .b is performed before computed style is returned.

document.body.offsetTop;
document.body.querySelector("#t1 > div").className = "a";
shouldBe("getComputedStyle(document.body.querySelector('#t1 .b')).color", "green", true);
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");

// No style invalidation or recalc scheduled for an ascendant of .e, and no affected-by-adjacent
// bits set on any ascendants, hence we don't need to do a recalc even if a style invalidation
// is scheduled for the .c change with adjacent implications.

document.body.offsetTop;
document.body.querySelector("#t2 > div > div").className = "c";
shouldBe("getComputedStyle(document.body.querySelector('#t2 .e')).color", "green", true);
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

// No style invalidation or recalc scheduled for an ascendant of .b, and even if affected-by-adjacent
// bits are set on the ascendant (because of a+b), it doesn't matter since that ascendant does
// not have any children that needs style recalc or invalidation.

document.body.offsetTop;
document.body.querySelector("#t3 > div > div").className = "c";
shouldBe("getComputedStyle(document.body.querySelector('#t3 .b')).color", "green", true);
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

</script>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-recalc.html
