unforced-break-after-complex-margin-collapsing.html

<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<p>Given a parent block with an empty collapse-through child followed by a child with a top margin,
    check that the parent block is pulled downwards by that margin, to the exact top of the next
    column. The collapse-through child prevents us from correctly estimating the logical top of the
    parent initially.</p>
<p>Below there should be a yellow box. Inside it there should be a top-center aligned green box.</p>
<div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:10px; column-fill:auto; width:620px; height:90px; line-height:20px; background:yellow;">
    <br>
    <br>
    <br>
    <br>
    <div style="background:red;" data-offset-x="210" data-offset-y="0" data-expected-height="80">
        <div data-offset-x="210" data-offset-y="0" data-expected-height="0"></div>
        <div data-offset-x="210" data-offset-y="0" data-expected-height="80" style="margin-top:20px; background:green;">
            <br><br><br><br>
        </div>
    </div>
</div>
<script>
    checkLayout("#test");
</script>

chromium/third_party/blink/web_tests/fast/multicol/unforced-break-after-complex-margin-collapsing.html