| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <p>There should be two blue squares below.</p> |
| 3 <div style="position:relative; columns:2; column-fill:auto; height:120px; line-h
eight:20px; orphans:1; widows:1;"> |
| 4 <!-- line 1 --><br> |
| 5 <!-- line 2 --><br> |
| 6 <!-- line 3 --><br> |
| 7 <!-- line 4 --><br> |
| 8 <div id="floater" style="float:left; width:40px; height:80px; background:blu
e;"> |
| 9 <div id="child" style="break-inside:avoid; height:80px;"></div> |
| 10 </div> |
| 11 <!-- line 5 --><br> |
| 12 <!-- line 6 --><br> |
| 13 <!-- line 7 --><br> |
| 14 <!-- line 8 --><br> |
| 15 </div> |
| 16 <script src="../resources/testharness.js"></script> |
| 17 <script src="../resources/testharnessreport.js"></script> |
| 18 |
| 19 <script> |
| 20 test(() => { |
| 21 var floater = document.getElementById("floater"); |
| 22 var child = document.getElementById("child"); |
| 23 document.body.offsetTop; |
| 24 |
| 25 assert_equals(floater.offsetTop, 0); |
| 26 // The float contains a tall unbreakable block. Its natural position would |
| 27 // be to start flush with line 5, because that's where it lies in the DOM, |
| 28 // but since we only have 40px column space left at that point, and it |
| 29 // contains something unbreakable that's 80px tall, it needs to be pushed to |
| 30 // the next column, and therefore end up next to line 7. Now, if we remove |
| 31 // the unbreakable block, it should jump back to line 5, though. |
| 32 child.style.display = "none"; |
| 33 assert_equals(floater.offsetTop, 80); |
| 34 }, "Remove a tall unbreakable block inside a float."); |
| 35 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2521963002:
Add test for line float that removes a tall unbreakable block child. (Closed)
