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