<!DOCTYPE html>
<p>There should be a blue square below.</p>
<div id="multicol" data-expected-height="72" style="position:relative; columns:5; column-gap:10px; width:240px; line-height:20px;">
<div style="height:160px;">
<div style="height:161px;"></div>
<!-- The spanner starts after 161px of column content. -->
<div data-offset-y="32" style="column-span:all; width:40px; height:20px; background:blue;"></div>
<!-- The second column row starts here, after 161px of column
content (the spanner doesn't count as column content). -->
</div>
<!-- The following block starts after 160px of column content. It's
logically after the spanner, but since offset 160px belongs to the
first column row, we'll first attempt to place it there. In this case
it's not going to fit there, since there's only 1px of space left, and
we have a 20px tall line to fit, so it should be pushed to the next
row. -->
<div data-offset-y="52" data-expected-height="20" style="background:blue;"><br></div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/check-layout-th.js"></script>
<script>
checkLayout("#multicol");
</script>