<!DOCTYPE html>
<style>body { overflow:scroll; }</style>
<p>There should be a hotpink square in the bottom left corner of a olive rectangle.</p>
<div id="multicol" style="position:relative; columns:2; column-fill:auto; orphans:2; widows:2; line-height:20px; height:45px; background:olive;">
    <br>
    <div id="elm" style="float:left; width:40px; background:hotpink;"><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(elm.offsetTop, 0);
    assert_equals(elm.offsetHeight, 40);
    multicol.style.height = "60px";
    // Now there's room for the float in the first column
    assert_equals(elm.offsetTop, 20);
    assert_equals(elm.offsetHeight, 40);
}, "No crash or assertion failure.");
</script>