| Index: third_party/WebKit/LayoutTests/fast/multicol/balance-fixed-height-unused-space-after-strutless-break.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/multicol/balance-fixed-height-unused-space-after-strutless-break.html b/third_party/WebKit/LayoutTests/fast/multicol/balance-fixed-height-unused-space-after-strutless-break.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..0c5d5d5f37deeede3aac720cd0a3226b8daf581a
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/multicol/balance-fixed-height-unused-space-after-strutless-break.html
|
| @@ -0,0 +1,69 @@
|
| +<!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>
|
|
|