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> |