overflow-crossing-boundary.html | Explore in Territory

<!DOCTYPE html>
<div id="multicol" style="position:relative; columns:2; line-height:20px; orphans:1; widows:1; background:yellow;">
    <div style="width:4em;">
        <div style="height:20px; background:hotpink;"></div>
        <div style="height:15px;">
            <div id="child1">line</div>
            <div id="child2">line</div>
            <div id="child3">line</div>
            <div id="child4">line</div>
            <div id="child5">line</div>
        </div>
    </div>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(() => {
    var multicol = document.getElementById("multicol");
    var child1 = document.getElementById("child1");
    var child2 = document.getElementById("child2");
    var child3 = document.getElementById("child3");
    var child4 = document.getElementById("child4");
    var child5 = document.getElementById("child5");

    assert_equals(child1.offsetTop, 20);
    assert_equals(child2.offsetTop, 40);
    assert_equals(child3.offsetTop, 0);
    assert_equals(child4.offsetTop, 20);
    assert_equals(child5.offsetTop, 40);

    multicol.style.columnFill = "auto";
    multicol.style.height = "90px";
    assert_equals(child3.offsetTop, 60);
    assert_equals(child4.offsetTop, 0);
    assert_equals(child5.offsetTop, 20);

    multicol.style.height = "80px";
    assert_equals(child3.offsetTop, 60);
    assert_equals(child4.offsetTop, 0);
    assert_equals(child5.offsetTop, 20);

    multicol.style.height = "110px";
    assert_equals(child3.offsetTop, 60);
    assert_equals(child4.offsetTop, 80);
    assert_equals(child5.offsetTop, 0);

    multicol.style.height = "200px";
    assert_equals(child3.offsetTop, 60);
    assert_equals(child4.offsetTop, 80);
    assert_equals(child5.offsetTop, 100);

    multicol.style.height = "100px";
    assert_equals(child3.offsetTop, 60);
    assert_equals(child4.offsetTop, 80);
    assert_equals(child5.offsetTop, 0);

}, "Overflow should also be fragmented.");
</script>
chromium/third_party/blink/web_tests/fragmentation/overflow-crossing-boundary.html
