reattach-with-sibling-invalidation.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
    .b { color: red }
    .a + div .b { color: green }
</style>
<input type="text"></input>
<div>
    <span class="b">Should be green</span>
    <span></span>
    <span></span>
    <span></span>
</div>
<script>
    description("A reattach should not discard a scheduled sibling invalidation.");

    var input = document.querySelector("input");

    shouldBeEqualToString("getComputedStyle(document.querySelector('.b')).color", "rgb(255, 0, 0)");

    // Force clean style+layout
    input.offsetTop;

    // Schedule sibling invalidation set to invalidate span.b
    input.className = "a";

    // Trigger lazyReattachIfAttached() -> detachLayoutTree().
    document.querySelector("input").type = "button";

    // One for attaching the input, and one for the span.b recalc.
    if (window.internals)
        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

    shouldBeEqualToString("getComputedStyle(document.querySelector('.b')).color", "rgb(0, 128, 0)");
</script>

chromium/third_party/blink/web_tests/fast/css/invalidation/reattach-with-sibling-invalidation.html