commit 76ab2bca98c0f5739b8492e9f036d1e08164ac17 parent 30833bba3238a45c7e96231214eed86029a2a632 Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Fri, 3 Oct 2025 08:58:08 +0000 Bug 1990879 [wpt PR 55068] - [gap-decorations] Update multicol gap decorations based on new def, a=testonly Automatic update from web-platform-tests [gap-decorations] Update multicol gap decorations based on new def This CL updates the implementation for GapDecorations in multicol. Based on some discussions in https://github.com/w3c/csswg-drafts/issues/12784, and the definition of gap intersections https://drafts.csswg.org/css-gaps-1/#layout-painting we have to update how we compute and store the information to generate the intersections for gap decorations in multicol. The main new behavior is that intersections in the column gap happen right before/after where the column gap intersects any row gaps. Previously this happened at the middle of where these two gaps met. There are couple of tweaks needed for this, which overall at the end of the day reduces the code complexity of painting multicol gap decorations. 1. Instead of having ONE `MainGap` being generated by a spanner, we now generate TWO, one at the start of the spanner and one at the end. 2. Instead of having `CrossGap`s end only at spanners, we instead simply have `CrossGap`s end at all main gaps (spanners and row gaps), and start right after. This way, we can easily generate the intersections there, which is what the discussion seems to have settled on. 3. Using the two above, along with a transient map which maps from an intersection to a `MainGap`, we can now determine in constant time whether a given intersection is `blocked before/after` or if it should be treated like an Edge intersection, which enables us to fix the rule breaking behavior that was broken for multicol. This also enables us to get rid of a lot of the complex logic of advancing indices of spanner main gaps when generating the intersections for multicol. This CL also makes two more changes: a) Some of the expectation files had to be updated to match the new behavior. b) We add a test case of a multicol container with multiple spanners c) `column-height-009.html` test is now technically incorrect given the dicussion at https://github.com/w3c/csswg-drafts/issues/12784, so this CL updates the expectation for it. This brings the behavior to exactly what we had with the original GapDecorations, before the optimized pipeline. Bug: 357648037, 436140061, 446616449 Change-Id: Ie132c4f7c81c1db57e87c1a9b0601ff5c691fdfd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6972503 Commit-Queue: Javier Contreras <javiercon@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1520744} -- wpt-commits: c365dc339907a22df4ab1c360ce780a275d65d42 wpt-pr: 55068 Diffstat:
13 files changed, 165 insertions(+), 25 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-004-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-004-ref.html @@ -54,7 +54,7 @@ .column-gap { position: absolute; - height: 130px; + height: 60px; width: 4px; background: blue; top: 2px; @@ -74,5 +74,7 @@ </div> <div class="column-gap" style="left:65px;"></div> <div class="column-gap" style="left:135px;"></div> + <div class="column-gap" style="left:65px; top: 72px"></div> + <div class="column-gap" style="left:135px; top: 72px"></div> <div class="row-gap"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-007-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-007-ref.html @@ -82,7 +82,7 @@ .column-gap3 { background: blue; - height: 130px; + height: 100px; position: absolute; width: 10px; top: 0px; @@ -110,9 +110,10 @@ <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px)"></div> <div class="column-gap1" style="height: 20px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"> </div> - <div class="column-gap2" style="height: 160px; left:calc(2px + 85.333px + 5px)"></div> - <div class="column-gap2" style="height: 160px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"> - </div> + <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px)"></div> + <div class="column-gap2" style="height: 100px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div> + <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px)"></div> + <div class="column-gap2" style="top: 160px; height: 40px; left:calc(2px + 85.333px + 5px + 10px + 5px + 85.333px + 5px)"></div> <div class="row-gap1"></div> </div> <div class="inner2"> @@ -128,6 +129,7 @@ </div> <div class="column-gap3" style="left:calc(85.333px + 5px);"></div> <div class="column-gap3" style="left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div> + <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px);"></div> + <div class="column-gap3" style="top: 120px; height: 10px;left:calc(85.333px + 5px + 10px + 5px + 85.333px + 5px);"></div> <div class="row-gap2"></div> </div> -</div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008-ref.html @@ -51,7 +51,7 @@ } .row-gap-items { - width: 60px; + width: 200px; background: gold; } @@ -102,8 +102,6 @@ </div> <div class="row-gap"> <div class="row-gap-items"></div> - <div class="row-gap-items"></div> - <div class="row-gap-items"></div> </div> <div class="spanner"></div> <div class="column-gap1" style="left:62px;"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009-ref.html @@ -51,7 +51,7 @@ } .row-gap-items { - width: 64px; + width: 204px; background: gold; } @@ -101,6 +101,9 @@ <div class="items2"></div> <div class="items2"></div> </div> + <div class="row-gap"> + <div class="row-gap-items"></div> + </div> <div class="column-gap1" style="left:62px;"></div> <div class="column-gap1" style="left:132px;"></div> <div class="column-gap2" style="left:62px;"></div> @@ -108,9 +111,4 @@ <div class="spanner"></div> <div class="column-gap3" style="left:62px;"></div> <div class="column-gap3" style="left:132px;"></div> - <div class="row-gap"> - <div class="row-gap-items"></div> - <div class="row-gap-items"></div> - <div class="row-gap-items"></div> - </div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009.html @@ -31,6 +31,7 @@ column-width: 60px; column-count: 3; column-fill: auto; + gap-rule-overlap: column-over-row; } p { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010-ref.html @@ -65,7 +65,7 @@ } .row-gap-items { - width: 56px; + width: 196px; background: gold; } @@ -122,8 +122,6 @@ </div> <div class="row-gap"> <div class="row-gap-items"></div> - <div class="row-gap-items"></div> - <div class="row-gap-items"></div> </div> <div class="column-gap1" style="left:62px;"></div> <div class="column-gap1" style="left:132px;"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011-ref.html @@ -73,7 +73,7 @@ .column-gap2 { position: absolute; - height: 142px; + height: 60px; width: 2px; background: blue; top: 60px; @@ -110,6 +110,8 @@ <div class="column-gap1" style="left:136px;"></div> <div class="column-gap2" style="left:66px;"></div> <div class="column-gap2" style="left:136px;"></div> + <div class="column-gap2" style="top: 130px; height: 72px; left:66px;"></div> + <div class="column-gap2" style="top: 130px; height: 72px; left:136px;"></div> <div class="row-gap"></div> <div class="spanner"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-012-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-012-ref.html @@ -65,7 +65,7 @@ .column-gap1 { position: absolute; - height: 200px; + height: 118px; width: 2px; background: blue; top: 2px; @@ -99,6 +99,8 @@ </div> <div class="column-gap1" style="left:66px;"></div> <div class="column-gap1" style="left:136px;"></div> + <div class="column-gap1" style="top: 130px; height: 72px;left:66px;"></div> + <div class="column-gap1" style="top: 130px; height: 72px;left:136px;"></div> <div class="row-gap"></div> <div class="spanner"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-014-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-014-ref.html @@ -57,6 +57,4 @@ <div class="last-item"></div> <div class="column-gap" style="left:62px;"></div> <div class="column-gap" style="left:132px;"></div> -<div class="column-gap" style="left:62px; top: 72px;"></div> -<div class="column-gap" style="left:132px; top: 72px;"></div> <div class="row-gap"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-017-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-017-ref.html @@ -44,6 +44,6 @@ <div class="items"></div> <div class="items"></div> </div> -<div class="row-gap"></div> <div class="column-gap" style="left:58.666px;"></div> <div class="column-gap" style="left:135.332px;"></div> +<div class="row-gap"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> + <style> + body { + margin: 0px; + } + + #container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 200px; + column-gap: 10px; + row-gap: 10px; + column-width: 60px; + column-count: 3; + column-fill: auto; + } + + p { + background: rgb(96 139 168 / 0.2); + height: 50px; + margin: 0px; + } + + h2 { + column-span: all; + background-color: #4d4e53; + color: #fff; + margin: 0px; + opacity: 0.5; + } + + .column-decor-container { + position: absolute; + display: flex; + flex-direction: column; + top: 2px; + left: 62px; + row-gap: 18px; + height: 200px; + } + + .column-decor { + width: 10px; + height: 200px; + background: blue; + } + +</style> + +<body> + <div class="column-decor-container"> + <div class="column-decor"> + </div> + </div> + <div class="column-decor-container" style="left: 132px"> + <div class="column-decor"> + </div> + </div> + <div id="container"> + <p>One</p> + <p>Two</p> + <h2>Spanner</h2> + + <p>Three</p> + <p>Four</p> + <p>Five</p> + <h2>Spanner</h2> + <p>Six</p> + <p>Seven</p> + <p>Eight</p> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Multicolumn gap decorations painted in container with two spanners and rule break none. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="multicol-gap-decorations-020-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> + <style> + body { + margin: 0px; + } + + #container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 200px; + column-gap: 10px; + row-gap: 10px; + column-rule-width: 10px; + column-rule-style: solid; + column-rule-color: blue; + column-rule-break: none; + column-rule-outset: 0; + row-rule-width: 10px; + row-rule-style: solid; + row-rule-color: gold; + column-width: 60px; + column-count: 3; + column-fill: auto; + } + + p { + background: rgb(96 139 168 / 0.2); + height: 50px; + margin: 0px; + } + + h2 { + column-span: all; + background-color: #4d4e53; + color: #fff; + margin: 0px; + opacity: 0.5; + } + +</style> + +<body> + <div id="container"> + <p>One</p> + <p>Two</p> + <h2>Spanner</h2> + + <p>Three</p> + <p>Four</p> + <p>Five</p> + <h2>Spanner</h2> + <p>Six</p> + <p>Seven</p> + <p>Eight</p> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-009-ref.html b/testing/web-platform/tests/css/css-multicol/column-height-009-ref.html @@ -26,13 +26,16 @@ <div class="item">g<br>h</div> <div class="item">m<br>n</div> </div> - <div class="rule" style="height:160px;"></div> + <div class="rule" style="height:40px;"></div> + <div class="rule" style="position: absolute; top: 68px; left: 108px; height:40px;"></div> + <div class="rule" style="position: absolute; top: 128px; left: 108px; height:40px;"></div> <div class="column"> <div class="item">c<br>d</div> <div class="item">i<br>j</div> <div class="item">o<br>p</div> </div> - <div class="rule" style="height:160px;"></div> + <div class="rule" style="height:40px;"></div> + <div class="rule" style="position: absolute; top: 68px; left: 228px; height:40px;"></div> <div class="column"> <div class="item">e<br>f</div> <div class="item">k<br>l</div>