become-unfragmented-with-unbreakable-blocks.html

<!DOCTYPE html>
<style>
#inner > div { break-inside:avoid; }
</style>
<p>The word "PASS" should be seen 7 times below.</p>
<div id="container" style="position:relative; overflow:hidden; line-height:20px;">
    <div id="multicol" style="float:left; columns:3; column-fill:auto; height:70px; text-align:right;">
        <div style="width:6em;">
            <div id="inner">
                <div id="child1">PA</div>
                <div id="child2">PA</div>
                <div id="child3">PA</div>
                <div id="child4">PA</div>
                <div id="child5">PA</div>
                <div id="child6">PA</div>
                <div id="child7">PA</div>
            </div>
        </div>
    </div>
    <div style="float:left;">
        SS<br>
        SS<br>
        SS<br>
        SS<br>
        SS<br>
        SS<br>
        SS<br>
    </div>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
    test(() => {
        // Make the content unfragmented. That should clear all pagination
        // struts that were needed while we were fragmented.
        document.body.offsetTop;
        document.getElementById("multicol").style.columns = "auto";

        assert_equals(document.getElementById("child1").offsetTop, 0);
        assert_equals(document.getElementById("child2").offsetTop, 20);
        assert_equals(document.getElementById("child3").offsetTop, 40);
        assert_equals(document.getElementById("child4").offsetTop, 60);
        assert_equals(document.getElementById("child5").offsetTop, 80);
        assert_equals(document.getElementById("child6").offsetTop, 100);
        assert_equals(document.getElementById("child7").offsetTop, 120);
    }, "No pagination struts should be left behind.");
</script>
chromium/third_party/blink/web_tests/fragmentation/become-unfragmented-with-unbreakable-blocks.html
