balance-inner-near-outer-boundary.html

<!DOCTYPE html>
<p>There should be a green rectangle below, and no red.</p>
<div style="columns:2; column-fill:auto; width:200px; height:55px; line-height:20px; orphans:1; widows:1;">
    <br>
    <div id="inner" style="columns:4; column-gap:0; background:red;">
        <div id="child1" style="background:green;"><br></div>
        <div id="child2" style="background:green;">
            <br>
            <br>
            <br>
        </div>
    </div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var inner = document.getElementById("inner");
    var child1 = document.getElementById("child1");
    var child2 = document.getElementById("child2");
    assert_equals(inner.offsetHeight, 20);
    assert_equals(child1.offsetHeight, 20);
    assert_equals(child2.offsetHeight, 60);
}, "Lines at outer column boundaries");
</script>

chromium/third_party/blink/web_tests/fast/multicol/balance-inner-near-outer-boundary.html