Skip to content

Commit ef05503

Browse files
Ahmad-S792Ahmad Saleem
Ahmad-S792
authored and
Ahmad Saleem
committed
[Multicolumn] Improve balancing for border/padding and empty block content
[Multicolumn] Improve balancing for border/padding and empty block content https://bugs.webkit.org/show_bug.cgi?id=250393 rdar://104336682 Reviewed by Alan Baradlay. This patch is to align WebKit with Blink / Chromium and Gecko / Firefox. Merge - https://chromium.googlesource.com/chromium/blink/+/89bca046c2cbea43e38ff1901e0739c2eead5b04 In a balancing pass, when a break occurs at borders, padding or empty block content (the trailing part of a block that has no lines or other content), we need to report the correct amount of space shortage, so that the balancer doesn't over-stretch the columns for the next balancing pass. Breaks triggered by lines are already handled just fine in adjustLinePositionForPagination(). What we need to handle in adjustBlockChildForPagination() is everything that has to do with the child block itself. If a block is unbreakable and crosses a column/page boundary (and therefore is moved as a whole to the next column/page), report space shortage. After applying pagination struts, if a block is breakable and crosses yet another column/page boundary, report the space occupied in the next columns/pages as shortage. We need to report something if all breaks occur inside freely breakable block content, or the balancer will have no clue. If none of the above is true, and the child is at the top of a column/page, report the total height of the child, in case that turns out to be the smallest piece of content that causes a break. This also needs to take place after having applied pagination struts. * Source/WebCore/rendering/RenderBlockFlow.cpp: (RenderBlockFlow::adjustBlockChildForPagination): Update balancing criteria * LayoutTests/fast/multicol/balance-unbreakable.html: Add Test Case * LayoutTests/fast/multicol/balance-unbreakable-expected.txt: Add Test Case Expectation * LayoutTests/fast/multicol/trailing-border.html: Add Test Case * LayoutTests/fast/multicol/trailing-border-expected.txt: Add Test Case Expectation * LayoutTests/fast/multicol/trailing-border2.html: Add Test Case * LayoutTests/fast/multicol/trailing-border2-expected.txt: Add Test Case Expectation * LayoutTests/fast/multicol/balance-short-trailing-empty-block.html: Add Test Case * LayoutTests/fast/multicol/balance-short-trailing-empty-block-expected.txt: Add Test Case Expectation * LayoutTests/platform/mac/fast/multicol/border-padding-pagination-expected.png: Rebaselined * LayoutTests/platform/mac/fast/multicol/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.png: Rebaselined * LayoutTests/platform/mac/fast/multicol/vertical-lr/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.png: Rebaselined * LayoutTests/platform/mac/fast/multicol/vertical-rl/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/glib/fast/multicol/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/glib/fast/multicol/vertical-lr/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/glib/fast/multicol/vertical-rl/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/ios/fast/multicol/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/ios/fast/multicol/vertical-lr/border-padding-pagination-expected.txt: Rebaselined * LayoutTests/platform/ios/fast/multicol/vertical-rl/border-padding-pagination-expected.txt: Rebaselined Deleted these LayoutTests in favor of WPT Tests and also they render different in all browsers (multicol-fill-balance-0**.html): * LayoutTests/imported/blink./fast/multicol/span/block-with-top-border-and-margin-around-spanner-exact-fit.html * LayoutTests/imported/blink./fast/multicol/span/block-with-top-border-and-margin-around-spanner-exact-fit-expected.html * LayoutTests/imported/blink/fast/multicol/span/block-with-top-border-and-margin-around-spanner-extra-space-expected.html * LayoutTests/imported/blink/fast/multicol/span/block-with-top-border-and-margin-around-spanner-extra-space.html Canonical link: https://commits.webkit.org/259246@main
1 parent dd7dffb commit ef05503

25 files changed

+209
-106
lines changed

‎LayoutTests/fast/multicol/balance-short-trailing-empty-block-expected.txt‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Both words below should be in the the right column.
2+
3+
Tests that a block a column boundary is recorded properly for balancing
4+
5+
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
6+
7+
8+
PASS mc.offsetHeight is 190
9+
PASS successfullyParsed is true
10+
11+
TEST COMPLETE
12+
right
13+
column
14+

‎LayoutTests/fast/multicol/balance-short-trailing-empty-block.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<script src="../../resources/js-test.js"></script>
3+
<p>Both words below should be in the the right column.</p>
4+
<div id="console"></div>
5+
<div id="mc" style="-webkit-columns:2; columns:2; orphans:1; widows:1; -webkit-column-rule:1px solid; column-rule:1px solid; background:olive;">
6+
<div style="height:120px;"></div>
7+
<div style="line-height:80px;">right<br>column</div>
8+
<div style="height:30px;"></div>
9+
</div>
10+
<script>
11+
description("Tests that a block a column boundary is recorded properly for balancing");
12+
shouldBe("mc.offsetHeight", "190");
13+
</script>

‎LayoutTests/fast/multicol/balance-trailing-border-expected.txt‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Both words below should be in the the right column.
2+
3+
Tests that the bottom border at a column boundary is recorded properly for balancing
4+
5+
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
6+
7+
8+
PASS mc.offsetHeight is 168
9+
PASS successfullyParsed is true
10+
11+
TEST COMPLETE
12+
right
13+
column

‎LayoutTests/fast/multicol/balance-trailing-border.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<script src="../../resources/js-test.js"></script>
3+
<p>Both words below should be in the the right column.</p>
4+
<div id="console"></div>
5+
<div id="mc" style="-webkit-columns:2; columns:2; orphans:1; widows:1; -webkit-column-rule:1px solid; column-rule:1px solid; background:olive;">
6+
<div style="height:110px"></div>
7+
<div style="border:2px solid black; width:375px;">
8+
<div style="margin:0 10px; border:2px solid blue;">
9+
<span style="line-height:80px;">right<br>column</span>
10+
</div>
11+
</div>
12+
</div>
13+
<script>
14+
description("Tests that the bottom border at a column boundary is recorded properly for balancing");
15+
shouldBe("mc.offsetHeight", "168");
16+
</script>

‎LayoutTests/fast/multicol/balance-trailing-border2-expected.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Tests that the bottom border at a column boundary in a block that lives in multiple columns is recorded properly for balancing
2+
3+
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4+
5+
6+
PASS mc.offsetHeight is 69
7+
PASS successfullyParsed is true
8+
9+
TEST COMPLETE
10+
There should be no space between the short black line and the long gray one.
11+
12+
13+
14+
15+
16+
17+
18+
19+
20+

‎LayoutTests/fast/multicol/balance-trailing-border2.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<script src="../../resources/js-test.js"></script>
3+
<script>
4+
description("Tests that the bottom border at a column boundary in a block that lives in multiple columns is recorded properly for balancing");
5+
</script>
6+
<p>There should be no space between the short black line and the long gray one.</p>
7+
<div id="mc" style="-webkit-columns:3; columns:3; line-height:21px; orphans:1; widows:1; border-bottom:3px solid gray;">
8+
<div style="height:9px;"></div>
9+
<div style="border-bottom:3px solid black;">
10+
<br><br><br><br><br><br><br><br>
11+
</div>
12+
</div>
13+
<script>
14+
shouldBe("mc.offsetHeight", "69");
15+
</script>

‎LayoutTests/fast/multicol/balance-unbreakable-expected.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
There should be a square with some stuff inside below.
2+
3+
Tests that an image at a column boundary is recorded properly for balancing
4+
5+
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
6+
7+
8+
PASS mc.offsetHeight is 224
9+
PASS successfullyParsed is true
10+
11+
TEST COMPLETE
12+
line
13+
line
14+
15+
line
16+
line
17+
line
18+
line
19+

‎LayoutTests/fast/multicol/balance-unbreakable.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<script src="../../resources/js-test.js"></script>
3+
<p>There should be a <em>square</em> with some stuff inside below.</p>
4+
<div id="console"></div>
5+
<div id="mc" style="-webkit-columns:3; columns:3; width:7em; float:left; orphans:1; widows:1; background:olive;">
6+
<div style="line-height:4em;">line</div>
7+
<div style="line-height:8em;">line</div>
8+
<img alt="x" style="display:block; height:2em;">
9+
<div style="line-height:4em;">line</div>
10+
<div style="line-height:10em;">line</div>
11+
<div style="line-height:2em;">line</div>
12+
<div style="line-height:6em;">line</div>
13+
</div>
14+
<div style="float:left; width:7em; height:14em; background:olive;"></div>
15+
<script>
16+
description("Tests that an image at a column boundary is recorded properly for balancing");
17+
shouldBe("mc.offsetHeight", "224");
18+
</script>

‎LayoutTests/imported/blink/fast/multicol/span/block-with-top-border-and-margin-around-spanner-exact-fit-expected.html‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎LayoutTests/imported/blink/fast/multicol/span/block-with-top-border-and-margin-around-spanner-exact-fit.html‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)