| <!DOCTYPE html> |
| <p>There should be two blue squares below.</p> |
| <div style="position:relative; columns:2; column-fill:auto; height:120px; line-height:20px; orphans:1; widows:1;"> |
| <!-- line 1 --><br> |
| <!-- line 2 --><br> |
| <!-- line 3 --><br> |
| <!-- line 4 --><br> |
| <div id="floater" style="float:left; width:40px; height:80px; background:blue;"> |
| <div id="child" style="break-inside:avoid; height:80px;"></div> |
| </div> |
| <!-- line 5 --><br> |
| <!-- line 6 --><br> |
| <!-- line 7 --><br> |
| <!-- line 8 --><br> |
| </div> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <script> |
| test(() => { |
| var floater = document.getElementById("floater"); |
| var child = document.getElementById("child"); |
| document.body.offsetTop; |
| |
| assert_equals(floater.offsetTop, 0); |
| // The float contains a tall unbreakable block. Its natural position would |
| // be to start flush with line 5, because that's where it lies in the DOM, |
| // but since we only have 40px column space left at that point, and it |
| // contains something unbreakable that's 80px tall, it needs to be pushed to |
| // the next column, and therefore end up next to line 7. Now, if we remove |
| // the unbreakable block, it should jump back to line 5, though. |
| child.style.display = "none"; |
| assert_equals(floater.offsetTop, 80); |
| }, "Remove a tall unbreakable block inside a float."); |
| </script> |
