<!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>