<!DOCTYPE html>
<style>
.part { height:30px; background:blue; }
</style>
<p>There should be a blue square below.</p>
<div style="columns:3; column-fill:auto; column-gap:0; width:30px; height:80px; line-height:20px;">
<div style="position:relative;">
<div style="float:left; width:100%;">
<div id="elm1" class="part"></div>
<div id="elm2" class="part" style="break-before:column; break-after:column;"></div>
<div id="elm3" class="part"></div>
</div>
</div>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
test(() => {
assert_equals(document.getElementById("elm1").offsetTop, 0);
assert_equals(document.getElementById("elm2").offsetTop, 80);
assert_equals(document.getElementById("elm3").offsetTop, 160);
}, "Forced breaks should be allowed inside floats");
</script>