balance-float-with-margin-top-and-line-before-break.html

<!DOCTYPE html>
<p>There should be a blue rectangle in the bottom left corner of a yellow rectangle.</p>
<div id="multicol" style="position:relative; width:70px; columns:2; line-height:20px; background:yellow;">
    <br>
    <br>
    <div id="elm" style="float:left; width:20px; margin-top:10px; background:blue;"><br></div>
    <div style="clear:both;">
        <br>
        <br>
    </div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(() => {
    var multicol = document.getElementById("multicol");
    var elm = document.getElementById("elm");
    assert_equals(multicol.offsetHeight, 70);
    assert_equals(elm.offsetTop, 50);
    assert_equals(elm.offsetHeight, 20);
}, "Float that should fit at the bottom of the first column.");
</script>

chromium/third_party/blink/web_tests/fast/multicol/balance-float-with-margin-top-and-line-before-break.html