Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(550)

Unified Diff: third_party/WebKit/LayoutTests/fast/multicol/balance-fixed-height-unused-space-after-strutless-break.html

Issue 2509813004: Improve strut handling in initial column balancing pass. (Closed)
Patch Set: Rebaseline for column-rules-fixed-height. This test no longer triggers deep layout. Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698