remove-unbreakable-block-in-line-float.html

<!DOCTYPE html>
<p>There should be two blue squares below.</p>
<div style="position:relative; columns:2; column-fill:auto; height:120px; line-height:20px; orphans:1; widows:1;">
    <!-- line 1 --><br>
    <!-- line 2 --><br>
    <!-- line 3 --><br>
    <!-- line 4 --><br>
    <div id="floater" style="float:left; width:40px; height:80px; background:blue;">
        <div id="child" style="break-inside:avoid; height:80px;"></div>
    </div>
    <!-- line 5 --><br>
    <!-- line 6 --><br>
    <!-- line 7 --><br>
    <!-- line 8 --><br>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<script>
test(() => {
    var floater = document.getElementById("floater");
    var child = document.getElementById("child");
    document.body.offsetTop;

    assert_equals(floater.offsetTop, 0);
    // The float contains a tall unbreakable block. Its natural position would
    // be to start flush with line 5, because that's where it lies in the DOM,
    // but since we only have 40px column space left at that point, and it
    // contains something unbreakable that's 80px tall, it needs to be pushed to
    // the next column, and therefore end up next to line 7. Now, if we remove
    // the unbreakable block, it should jump back to line 5, though.
    child.style.display = "none";
    assert_equals(floater.offsetTop, 80);
}, "Remove a tall unbreakable block inside a float.");
</script>
chromium/third_party/blink/web_tests/fragmentation/remove-unbreakable-block-in-line-float.html
