commit 2175e7197b3750df3d0973ed45f3ec08b2f0d791 parent 7846ce5e0dc16e4cf923143bb7b2c5ed48216945 Author: Javier Contreras Tenorio (from Dev Box) <javiercon@microsoft.com> Date: Mon, 27 Oct 2025 10:06:32 +0000 Bug 1996060 [wpt PR 55624] - [gap-decorations] Flex fragmentation gap decorations part 2, a=testonly Automatic update from web-platform-tests [gap-decorations] Flex fragmentation gap decorations part 2 This CL continues the implementation of gap decorations for fragmented flexboxes. Namely, we add support for fragmented column flexboxes, and we add tests for such scenarios along with more tests for behavior with break rules, alignment etc. This required `GapAccumulator` to be passed as parameter to the 2 functions that create it (GiveItemsFinal*). This is mainly because for column flexboxes, we need to update the `content_block_end` AFTER we are done laying out the fragment, because the `block end` for a column flexbox is the `main end`, and we won't know where this actually ends until after we lay the whole fragment out. We call `AdjustGapAccumulatorContentMainEndIfNeeded` for this. Most of the non-trivial changes in this CL are found in the aforementioned function, and in `GiveItemsFinalPositionAndSizeForFragmentation`. Basically, we use a combination of things (break tokens, fragmentainer space, and a fragment relative index) to determine whether a given item or line is the first or last in the fragment. `GapAccumulator` then can use this whilst being agnostic to the fact that we are in a fragmentation context to compute the `CrossGap` and `MainGap` objects. Bug: 357648037 Change-Id: I863ad7c52ec5f8685bb1fd57a4629a1bf3e57bed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7013948 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1534457} -- wpt-commits: ed34ca484aca362da7c1621eb1df1630b82084e7 wpt-pr: 55624 Diffstat:
20 files changed, 1097 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032-ref.html @@ -0,0 +1,56 @@ +<!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: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + flex-direction: column; + height: 110px; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + .column-rule { + background-color: blue; + position: absolute; + top: 0px; + height: 47px; + width: 10px; + } +</style> + + +<div class="column-rule" style="left: 52px; height: 45px; top: 2px"></div> +<div class="column-rule" style="left: 225px;"></div> +<div class="column-rule" style="left: 398px; height: 18px;"></div> + +<div style="left: 175px; height: 10px; width: 110px; position: absolute; background-color: gold; top: 5px"></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">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-032.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-032-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 47px; + column-width: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + flex-direction: column; + height: 110px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + +</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">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-033-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-033-ref.html @@ -0,0 +1,67 @@ +<!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: 2; + height: 150px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 20px; + width: 90px; + flex-wrap: wrap; + flex-direction: column; + height: 200px; + align-items: center; + justify-content: center; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + } + .column-rule { + background-color: blue; + position: absolute; + height: 100px; + width: 10px; + } + + .row-rule { + background-color: gold; + position: absolute; + height: 20px; + /* Last flex line cross size is 40 rather than 30. */ + width: 90px; + } +</style> + +<div class="column-rule" style="top: 2px; left: 47px;"></div> +<div class="column-rule" style="top: 0px; left: 220px;"></div> + +<div class="row-rule" style="left: 7px; top: 42px"></div> +<div class="row-rule" style="left: 180px; top: 30px"></div> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + <div class="items">5</div> + <div class="items">6</div> + <div class="items">7</div> + <div class="items">8</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-033.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-033.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps with justify-content and align-items are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-033-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 2; + height: 150px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 20px; + width: 90px; + flex-wrap: wrap; + flex-direction: column; + height: 200px; + align-items: center; + justify-content: center; + column-rule: 10px solid blue; + row-rule: 20px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + <div class="items">5</div> + <div class="items">6</div> + <div class="items">7</div> + <div class="items">8</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-034-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-034-ref.html @@ -0,0 +1,65 @@ +<!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: 2; + column-width: 90px; + width: 330px; + height: 130px; + column-fill: balance; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 20px; + width: 90px; + flex-wrap: wrap; + height: 130px; + align-items: center; + justify-content: center; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + } + + .column-rule { + background-color: blue; + position: absolute; + height: 65px; + width: 10px; + } + + .row-rule { + background-color: gold; + position: absolute; + height: 20px; + width: 90px; + } +</style> + +<div class="column-rule" style="top: 2px; left: 42px;"></div> +<div class="column-rule" style="top: 0px; left: 215px; height: 65px;"></div> + +<div class="row-rule" style="left: 2px; top: 32px"></div> +<div class="row-rule" style="left: 175px; top: 15px"></div> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-034.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-034.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: row flex gaps with justify-content and align-items are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-034-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 2; + column-width: 100px; + width: 330px; + height: 130px; + column-fill: balance; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 20px; + width: 90px; + flex-wrap: wrap; + height: 130px; + align-items: center; + justify-content: center; + column-rule: 10px solid blue; + row-rule: 20px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-035-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-035-ref.html @@ -0,0 +1,50 @@ +<!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: 2; + height: 90px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 90px; + flex-wrap: wrap; + height: 170px; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + break-before: column; + } + .column-rule { + background-color: blue; + position: absolute; + height: 30px; + width: 10px; + } +</style> + +<div class="column-rule" style="left: 32px; top: 2px;"></div> +<div class="column-rule" style="left: 205px; top: 50px;"></div> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-035.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-035.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: flex gaps with break-before column are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-035-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 2; + height: 90px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 90px; + flex-wrap: wrap; + height: 170px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + break-before: column; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-037-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-037-ref.html @@ -0,0 +1,52 @@ +<!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: 2; + height: 90px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 90px; + flex-wrap: wrap; + height: 170px; + flex-direction: column; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + break-before: avoid-column; + } + + .row-rule { + background-color: gold; + height: 10px; + width: 30px; + position: absolute; + width: 90px; + } +</style> + +<div class="row-rule" style="top: 32px; left: 2px;"></div> +<div class="row-rule" style="top: 30px; left: 175px;"></div> +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-037.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-037.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps with break-before avoid-column are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-037-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 2; + height: 90px; + column-width: 100px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 90px; + flex-wrap: wrap; + height: 170px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + flex-direction: column; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 30px; + height: 30px; + break-before: avoid-column; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">1</div> + <div class="items">2</div> + <div class="items">3</div> + <div class="items">4</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-038-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-038-ref.html @@ -0,0 +1,62 @@ +<!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: 100px; + column-width: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 140px; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 44px; + } + + .row-rule { + position: absolute; + background-color: gold; + height: 10px; + width: 110px; + left: 2px; + top: 46px; + } + + .column-rule { + position: absolute; + background-color: blue; + width: 10px; + } +</style> + +<div class="column-rule" style="top: 2px; left: 52px; height: 98px;"></div> +<div class="column-rule" style="top: 0px; left: 225px; height: 44px;"></div> +<div class="row-rule"></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">Four</div> + <div class="items">Five</div> + <div class="items">Six</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-038.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-038.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps are painted when container is fragmented. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-038-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 100px; + column-width: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 140px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 44px; + } + +</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">Four</div> + <div class="items">Five</div> + <div class="items">Six</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-039-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-039-ref.html @@ -0,0 +1,61 @@ +<!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: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #One { + height: 25px + } + + .column-rule { + position: absolute; + background-color: blue; + width: 10px; + } + + .row-rule { + position: absolute; + background-color: gold; + height: 10px; + } +</style> + +<div class="column-rule" style="top: 2px; left: 52px; height: 45px;"></div> +<div class="column-rule" style="top: 0px; left: 225px; height:47px;"></div> +<div class="column-rule" style="top: 0px; left: 398px; height:18px;"></div> + +<div class="row-rule" style="top: 5px; left: 175px; width: 110px;"></div> +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="One">One</div> + <div class="items">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-039.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-039.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: row flex gaps are painted when container is fragmented and first item in line is smaller + than others. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-039-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 47px; + column-width: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #one { + height: 25px; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="one">One</div> + <div class="items">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-040-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-040-ref.html @@ -0,0 +1,61 @@ +<!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: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + xborder: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 55px; + } + + #monolithic { + contain: size; + } + + .row-rule { + position: absolute; + background-color: gold; + height: 10px; + } + + .column-rule { + position: absolute; + background-color: blue; + width: 10px; + } +</style> + +<div class="column-rule" style="top: 0px; height: 55px; left: 50px;"></div> +<div class="column-rule" style="top: 18px; height: 29px; left: 223px;"></div> +<div class="column-rule" style="top: 0px; height: 26px; left: 396px;"></div> +<div class="row-rule" style="left: 173px; width: 110px; top: 8px"></div> +<div class="multi-column"> + <div id="flexbox"> + <div class="items">One</div> + <div class="items" id="monolithic">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-040.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-040.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: row flex gaps are painted when container is fragmented and an item in line is monolithic. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-040-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 47px; + column-width: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 55px; + } + + #monolithic { + contain: size; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items">One</div> + <div class="items" id="monolithic">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-041-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-041-ref.html @@ -0,0 +1,62 @@ +<!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: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + flex-direction: column; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #One { + height: 25px + } + + .column-rule { + position: absolute; + background-color: blue; + width: 10px; + } + + .row-rule { + position: absolute; + background-color: gold; + height: 10px; + } +</style> + +<div class="column-rule" style="top: 2px; left: 52px; height: 45px;"></div> +<div class="column-rule" style="top: 0px; left: 225px; height:47px;"></div> +<div class="column-rule" style="top: 0px; left: 398px; height:18px;"></div> + +<div class="row-rule" style="top: 5px; left: 235px; width:50px;"></div> +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="One">One</div> + <div class="items">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-041.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-041.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps are painted when container is fragmented and first item in line is smaller + than others. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-041-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 47px; + column-width: 110px; + width: 330px; + } + + body { + margin: 0px; + } + + #flexbox { + border: 2px solid rgb(96 139 168); + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + column-rule: 10px solid blue; + row-rule: 10px solid gold; + flex-direction: column; + row-rule-break: intersection; + row-rule-outset: 0; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #one { + height: 25px; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="one">One</div> + <div class="items">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> + +</html> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-042-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-042-ref.html @@ -0,0 +1,56 @@ +<!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: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + flex-direction: column; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #monolithic { + contain: size; + } + + .column-rule { + position: absolute; + background-color: blue; + top: 0px; + width: 10px; + } +</style> + +<div class="column-rule" style="left: 50px; height: 50px;"></div> +<div class="column-rule" style="left: 223px; height: 47px;"></div> +<div class="column-rule" style="left: 396px; height: 13px;"></div> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="monolithic">One</div> + <div class="items">Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-042.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-042.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: column flex gaps are painted when container is fragmented and an item in line is monolithic. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="flex-gap-decorations-042-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + .multi-column { + columns: 3; + height: 47px; + column-width: 110px; + width: 330px; + column-fill: auto; + } + + body { + margin: 0px; + } + + #flexbox { + display: flex; + column-gap: 10px; + row-gap: 10px; + width: 110px; + flex-wrap: wrap; + height: 110px; + column-rule: 10px solid blue; + flex-direction: column; + } + + .items { + background-color: rgb(96 139 168 / 0.2); + width: 50px; + height: 50px; + } + + #monolithic { + contain: size; + } +</style> + +<div class="multi-column"> + <div id="flexbox"> + <div class="items" id="monolithic">One</div> + <div class="items" >Two</div> + <div class="items">Three</div> + <div class="items">Four</div> + </div> +</div>