<!DOCTYPE html>
<p>There should be a blue square below.</p>
<div id="multicol" style="position:relative; columns:2; column-fill:auto; line-height:20px; width:100px; height:100px;">
    <div><br></div>
    <div id="elm" style="float:left; width:20px; background:blue;">
        <div><br></div>
    </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 = "30px";
    assert_equals(elm.offsetTop, 0);
    assert_equals(elm.offsetHeight, 20);
}, "Push float to next column");
</script>