commit 889dd77ee0017b351b2f0b62fa14413f14caf3c9
parent 96b9e4f85e5c28a874c86492ff3ca03b7a8af081
Author: Javier Contreras Tenorio <javiercon@microsoft.com>
Date: Tue, 14 Oct 2025 22:23:39 +0000
Bug 1993198 [wpt PR 55287] - [gap-decorations] Flex fragmentation gap decorations, a=testonly
Automatic update from web-platform-tests
[gap-decorations] Flex fragmentation gap decorations
This CL implements gap decorations for flex in fragmentation scenarios.
Essentially what we do now, is we build a `GapGeometry` for every
fragment, making everything within that geometry fragment-relative.
In order to achieve this there was some minor refactoring to the
`GapAccumulator` logic so that the only thing we have to do is pass in
the fragment-relative offsets and booleans so that we build the Geometry
correctly. For example, the accumulator uses boolean states to build the
geometry, such as whether we are processing the first or the last line.
This CL does some refactoring so that that same logic applies but is
fragment relative (i.e. whether a line is "first" in the fragment).
Now we will create a GapGeometry in `GiveItemsFinalPositionAndSize` when
there's no fragmentation, and in
`GiveItemsFinalPositionAndSizeForFragmentation` when there is
fragmentation.
Tweaks for column flexboxes as well as their respective tests will be
added in a followup CL.
Bug: 357648037
Change-Id: Ieb5786c0b241564936b4a9f0d6d52db8834064d1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6998207
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1526543}
--
wpt-commits: dbbea4504a74c59e5050359d479e1e33b646f028
wpt-pr: 55287
Diffstat:
6 files changed, 365 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028-ref.html
@@ -0,0 +1,71 @@
+<!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>
+ .multi-column {
+ columns: 3;
+ height: 47px;
+ column-width: 170px;
+ width: 510px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+
+ .column-rule {
+ position: absolute;
+ top: 0px;
+ background: red;
+ width: 10px;
+ }
+
+ .row-rule {
+ position: absolute;
+ background: blue;
+ width: 170px;
+ height: 10px;
+ top: 5px;
+ left: 265px;
+ }
+</style>
+
+<div class="column-rule" style="top: 2px; height: 45px; left: 52px;"></div>
+<div class="column-rule" style="top: 2px; height: 45px; left: 112px;"></div>
+
+<div class="column-rule" style="height: 5px; left: 315px;"></div>
+<div class="column-rule" style="height: 5px; left: 375px;"></div>
+<div class="column-rule" style="top: 15px; height: 32px; left: 365px;"></div>
+<div class=row-rule></div>
+
+<div class="column-rule" style="height: 18px; left: 628px;"></div>
+
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: flex gaps are painted when the container is fragmented.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-028-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ .multi-column {
+ columns: 3;
+ height: 47px;
+ column-width: 170px;
+ width: 510px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ row-rule-style: solid;
+ row-rule-color: blue;
+ row-rule-width: 10px;
+ column-rule-style: solid;
+ column-rule-color: red;
+ column-rule-width: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+</style>
+
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030-ref.html
@@ -0,0 +1,57 @@
+<!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>
+ .multi-column {
+ columns: 4;
+ height: 30px;
+ column-width: 170px;
+ width: 680px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+
+ .column-rule {
+ position: absolute;
+ top: 2px;
+ background: red;
+ width: 10px;
+ }
+</style>
+<div class="column-rule" style="height: 28px; left: 52px;"></div>
+<div class="column-rule" style="height: 28px; left: 112px;"></div>
+<div class="column-rule" style="height: 22px; top: 0px; left: 284px;"></div>
+<div class="column-rule" style="height: 22px; top: 0px; left: 344px;"></div>
+<div class="column-rule" style="height: 30px; top: 0px; left: 566px;"></div>
+<div class="column-rule" style="height: 20px; top: 0px; left: 798px;"></div>
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: flex gaps are painted when the container is fragmented and row gap is suppressed.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-030-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ .multi-column {
+ columns: 4;
+ height: 30px;
+ column-width: 170px;
+ width: 680px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ row-rule-style: solid;
+ row-rule-color: blue;
+ row-rule-width: 10px;
+ column-rule-style: solid;
+ column-rule-color: red;
+ column-rule-width: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+</style>
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031-ref.html
@@ -0,0 +1,71 @@
+<!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>
+ .multi-column {
+ columns: 3;
+ height: 47px;
+ column-width: 170px;
+ width: 510px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+
+ .column-rule {
+ position: absolute;
+ top: 1px;
+ background: red;
+ width: 10px;
+ }
+
+ .row-rule {
+ position: absolute;
+ background: blue;
+ width: 170px;
+ height: 10px;
+ top: 5px;
+ left: 265px;
+ }
+</style>
+
+<div class="column-rule" style="top: 3px; height: 43px; left: 52px;"></div>
+<div class="column-rule" style="top: 3px; height: 43px; left: 112px;"></div>
+
+<div class="column-rule" style="height: 3px; left: 315px;"></div>
+<div class="column-rule" style="height: 3px; left: 375px;"></div>
+<div class="column-rule" style="top: 16px; height: 30px; left: 365px;"></div>
+<div class=row-rule></div>
+
+<div class="column-rule" style="height: 16px; left: 628px;"></div>
+
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-031.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>
+ CSS Gap Decorations: flex gaps are painted when the container is fragmented, and we have rule-break intersection.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
+<link rel="match" href="flex-gap-decorations-031-ref.html">
+<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
+<style>
+ .multi-column {
+ columns: 3;
+ height: 47px;
+ column-width: 170px;
+ width: 510px;
+ }
+
+ body {
+ margin: 0px;
+ }
+
+ #flexbox {
+ border: 2px solid rgb(96 139 168);
+ display: flex;
+ column-gap: 10px;
+ row-gap: 10px;
+ row-rule-style: solid;
+ row-rule-color: blue;
+ row-rule-width: 10px;
+ column-rule-style: solid;
+ column-rule-color: red;
+ column-rule-width: 10px;
+ column-rule-break: intersection;
+ column-rule-outset: -1px;
+ width: 170px;
+ flex-wrap: wrap;
+ }
+
+ .items {
+ background-color: rgb(96 139 168 / 0.2);
+ flex-shrink: 1;
+ width: 50px;
+ height: 50px;
+ }
+
+ #four {
+ width: 100px;
+ }
+</style>
+
+<div class="multi-column">
+ <div id="flexbox">
+ <div class="items">One</div>
+ <div class="items">Two</div>
+ <div class="items">Three</div>
+ <div class="items" id="four">Four</div>
+ <div class="items">Five</div>
+ </div>
+</div>
