balance-fixed-height-unused-space-nested-block.html

<!DOCTYPE html>
<p>There should be a green square below, and no red.</p>
<div style="columns:4; column-gap:0; width:100px; height:150px; orphans:1; widows:1; line-height:100px;">
    <div id="parent" style="background:red;">
        <div id="child1" style="background:green;"><br></div>
        <div id="child2" style="background:green;">
            <div>
                <br>
                <br>
                <br>
            </div>
        </div>
    </div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var parent = document.getElementById("parent");
    var child1 = document.getElementById("child1");
    var child2 = document.getElementById("child2");
    assert_equals(parent.offsetHeight, 400);
    assert_equals(child1.offsetHeight, 100);
    assert_equals(child2.offsetHeight, 300);
}, "Balance, non-auto height, unused space");
</script>

chromium/third_party/blink/web_tests/fast/multicol/balance-fixed-height-unused-space-nested-block.html