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