| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <p>There should be a green square below, and no red.</p> |
| 3 <!-- In the first layout pass we'll use the specified column height. We'll need |
| 4 to insert pagination struts at breaks if some unbreakable content (such as |
| 5 a line) would otherwise be broken in half. When calculating a balanced |
| 6 column height, we need to subtract these struts again, to calculate a |
| 7 minimal column height. The final column height (in the second layout pass) |
| 8 in this case should be 60px, since that's what the contents |
| 9 require. (8*20px + 2*40px) / 4 = 60px --> |
| 10 <div style="columns:4; column-gap:0; width:60px; height:80px; orphans:1; widows:
1; line-height:20px;"> |
| 11 <div id="parent" style="background:red;"> |
| 12 <div id="child1" style="background:green;"> |
| 13 <br> |
| 14 <br> |
| 15 <br> |
| 16 <br> |
| 17 <!-- In the first layout pass, when column height is 80px, as |
| 18 specified, there'll be a break between these two |
| 19 lines. There'll be no pagination strut, though, since four |
| 20 lines take up exactly 80px. --> |
| 21 <br> |
| 22 <br> |
| 23 <br> |
| 24 </div> |
| 25 <!-- There'll be a break between these two blocks. At this point in the |
| 26 first layout pass we have 20px left in the second column (since it |
| 27 contains 3 lines == 60px). The 20px will be lost, and the next |
| 28 block therefore needs a pagination strut of 20px. --> |
| 29 <div id="child2" style="line-height:40px; background:green;"> |
| 30 <br> |
| 31 </div> |
| 32 <div id="child3" style="background:green;"> |
| 33 <br> |
| 34 </div> |
| 35 <!-- There'll be another break between these two blocks. At this point |
| 36 in the first layout pass we have 20px left in the third column. The |
| 37 situation is exactly the same as at the previous breaks. We need |
| 38 another pagination strut of 20px. --> |
| 39 <div id="child4" style="line-height:40px; background:green;"> |
| 40 <br> |
| 41 </div> |
| 42 </div> |
| 43 <!-- The height of #parent (which comprises the entire multicol container) |
| 44 in the first layout pass will be the height of all lines, plus |
| 45 pagination struts. We have 8 lines that are 20px tall, and 2 lines that |
| 46 are 40px tall. We have one pagination strut before the the third column |
| 47 and one before the fourth one, each 20px. Total height of #parent in |
| 48 the initial layout pass will be 8*20px + 2*40px + 2*20px = 280px. To |
| 49 find the minimal balanced height, we should look strictly at the |
| 50 contents, and subtract the 40px of strut. We end up with 240px, which |
| 51 we should balance over the 4 columns. So we get a column height of |
| 52 60px. --> |
| 53 </div> |
| 54 <script src="../../resources/testharness.js"></script> |
| 55 <script src="../../resources/testharnessreport.js"></script> |
| 56 <script> |
| 57 test(() => { |
| 58 var parent = document.getElementById("parent"); |
| 59 var child1 = document.getElementById("child1"); |
| 60 var child2 = document.getElementById("child2"); |
| 61 var child3 = document.getElementById("child3"); |
| 62 var child4 = document.getElementById("child4"); |
| 63 assert_equals(parent.offsetHeight, 240); |
| 64 assert_equals(child1.offsetHeight, 140); |
| 65 assert_equals(child2.offsetHeight, 40); |
| 66 assert_equals(child3.offsetHeight, 20); |
| 67 assert_equals(child4.offsetHeight, 40); |
| 68 }, "Balance, non-auto height, unused space at break after perfect break with no
space loss"); |
| 69 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2509813004:
Improve strut handling in initial column balancing pass. (Closed)
