| <!DOCTYPE html> |
| <p>There should be a green square below, and no red.</p> |
| <!-- In the first layout pass we'll use the specified column height. We'll need |
| to insert pagination struts at breaks if some unbreakable content (such as |
| a line) would otherwise be broken in half. When calculating a balanced |
| column height, we need to subtract these struts again, to calculate a |
| minimal column height. The final column height (in the second layout pass) |
| in this case should be 60px, since that's what the contents |
| require. (8*20px + 2*40px) / 4 = 60px --> |
| <div style="columns:4; column-gap:0; width:60px; height:80px; orphans:1; widows:1; line-height:20px;"> |
| <div id="parent" style="background:red;"> |
| <div id="child1" style="background:green;"> |
| <br> |
| <br> |
| <br> |
| <br> |
| <!-- In the first layout pass, when column height is 80px, as |
| specified, there'll be a break between these two |
| lines. There'll be no pagination strut, though, since four |
| lines take up exactly 80px. --> |
| <br> |
| <br> |
| <br> |
| </div> |
| <!-- There'll be a break between these two blocks. At this point in the |
| first layout pass we have 20px left in the second column (since it |
| contains 3 lines == 60px). The 20px will be lost, and the next |
| block therefore needs a pagination strut of 20px. --> |
| <div id="child2" style="line-height:40px; background:green;"> |
| <br> |
| </div> |
| <div id="child3" style="background:green;"> |
| <br> |
| </div> |
| <!-- There'll be another break between these two blocks. At this point |
| in the first layout pass we have 20px left in the third column. The |
| situation is exactly the same as at the previous breaks. We need |
| another pagination strut of 20px. --> |
| <div id="child4" style="line-height:40px; background:green;"> |
| <br> |
| </div> |
| </div> |
| <!-- The height of #parent (which comprises the entire multicol container) |
| in the first layout pass will be the height of all lines, plus |
| pagination struts. We have 8 lines that are 20px tall, and 2 lines that |
| are 40px tall. We have one pagination strut before the the third column |
| and one before the fourth one, each 20px. Total height of #parent in |
| the initial layout pass will be 8*20px + 2*40px + 2*20px = 280px. To |
| find the minimal balanced height, we should look strictly at the |
| contents, and subtract the 40px of strut. We end up with 240px, which |
| we should balance over the 4 columns. So we get a column height of |
| 60px. --> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| var parent = document.getElementById("parent"); |
| var child1 = document.getElementById("child1"); |
| var child2 = document.getElementById("child2"); |
| var child3 = document.getElementById("child3"); |
| var child4 = document.getElementById("child4"); |
| assert_equals(parent.offsetHeight, 240); |
| assert_equals(child1.offsetHeight, 140); |
| assert_equals(child2.offsetHeight, 40); |
| assert_equals(child3.offsetHeight, 20); |
| assert_equals(child4.offsetHeight, 40); |
| }, "Balance, non-auto height, unused space at break after perfect break with no space loss"); |
| </script> |
