<!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;">
<div>
<br>
</div>
<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>