<!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; column-fill:auto; height:50px; line-height:20px; background:yellow;">
    <br>
    <br>
    <div>
        <div>
            <div id="elm" style="float:left; width:20px; background:blue;"><br></div>
        </div>
    </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");
    document.body.offsetTop;
    multicol.style.height = "60px";
    assert_equals(elm.offsetTop, 40);
    assert_equals(elm.offsetHeight, 20);
}, "Float that should fit at the bottom of the first column.");
</script>