commit 4f2631312dcf634cf5ffd4e59aba4f36dd0b6243 parent b98bc639112d95fe2969e428c81b68a2fd58f89d Author: Sam Davis Omekara <samomekarajr@microsoft.com> Date: Fri, 14 Nov 2025 10:22:54 +0000 Bug 1999900 [wpt PR 56005] - [Gap Decorations]: Implement Paint logic for empty cells, a=testonly Automatic update from web-platform-tests [Gap Decorations]: Implement Paint logic for empty cells This CL adds the paint logic for handling empty cells. The major detail here is augmenting the adjustment functions to also account for rule visibility rather than just rule break. Consequently, additional conditions are added for adjusting the start/end pairs when painting gap decorations. Tests have been added to exercise the code in this CL. Bug: 357648037 Change-Id: I6aebd66f60e2b750891e466dcb7cbfd16e99b16c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7133218 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1543967} -- wpt-commits: c450942caca0d0c67f23acd86917353de79abf67 wpt-pr: 56005 Diffstat:
10 files changed, 645 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-054-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-054-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + position: relative; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } + .col-gaps { + display: flex; + position: absolute; + top: 0; + left: 107px; + column-gap: 114px; + } + .col-gap-1-group { + display: flex; + flex-direction: column; + justify-content: center; + height: 340px; + } + .col-gap { + background: blue; + width: 6px; + height: 100px; + } + .col-gap-2-group { + display: flex; + flex-direction: column; + justify-content: center; + row-gap: 20px; + height: 340px; + } + .row-gaps { + display: flex; + flex-direction: column; + position: absolute; + top: 107px; + left: 0px; + row-gap: 114px; + } + .row-gap-1-group { + display: flex; + flex-direction: row; + justify-content: start; + width: 340px; + column-gap: 20px; + } + .row-gap { + background: red; + width: 100px; + height: 6px; + } + .row-gap-2-group { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 20px; + height: 340px; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> + + <div class="col-gaps"> + <div class="col-gap-1-group"> + <div class="col-gap"></div> + </div> + + <div class="col-gap-2-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + </div> + + <div class="row-gaps"> + <div class="row-gap-1-group"> + <div class="row-gap"></div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-2-group"> + <div class="row-gap"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-054.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-054.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gap segments are painted properly with empty areas. Tests + scenario where *rule-visibility-items is `around` and *-rule-break is `intersection`. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="match" href="grid-gap-decorations-054-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + row-rule: 6px solid red; + column-rule: 6px solid blue; + rule-inset: 0px; + + column-rule-visibility-items: around; + row-rule-visibility-items: around; + + column-rule-break: intersection; + row-rule-break: intersection; + } + + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-055-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-055-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + position: relative; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } + .col-gaps { + display: flex; + position: absolute; + top: 0; + left: 107px; + column-gap: 114px; + } + .col-gap-1-group { + display: flex; + flex-direction: column; + justify-content: center; + height: 340px; + } + .col-gap { + background: blue; + width: 6px; + height: 120px; + } + .col-gap-2-group { + display: flex; + flex-direction: column; + justify-content: center; + + height: 340px; + } + .row-gaps { + display: flex; + flex-direction: column; + position: absolute; + top: 107px; + left: 0px; + row-gap: 114px; + } + .row-gap-1-group { + display: flex; + flex-direction: row; + justify-content: start; + width: 340px; + } + .row-gap { + background: red; + width: 110px; + height: 6px; + } + .row-gap-2-group { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 20px; + height: 340px; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> + + <div class="col-gaps"> + <div class="col-gap-1-group"> + <div class="col-gap" style="height: 100px;"></div> + </div> + + <div class="col-gap-2-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + </div> + + <div class="row-gaps"> + <div class="row-gap-1-group"> + <div class="row-gap"></div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-2-group"> + <div class="row-gap" style="width: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-055.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-055.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gap segments are painted properly with empty areas. Tests + scenario where *rule-visibility-items is `around` and *-rule-break is `spanning-item`. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="match" href="grid-gap-decorations-055-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> + +<style> + body { + margin: 0px; + } + + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + row-rule: 6px solid red; + column-rule: 6px solid blue; + rule-inset: 0px; + + column-rule-visibility-items: around; + row-rule-visibility-items: around; + } + + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-056-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-056-ref.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + position: relative; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } + .col-gaps { + display: flex; + position: absolute; + top: 0; + left: 227px; + column-gap: 114px; + } + .col-gap-1-group { + display: flex; + flex-direction: column; + justify-content: center; + height: 340px; + } + .col-gap { + background: blue; + width: 6px; + height: 100px; + } + .col-gap-2-group { + display: flex; + flex-direction: column; + justify-content: start; + + height: 340px; + } + .row-gaps { + display: flex; + flex-direction: column; + position: absolute; + top: 107px; + left: 0px; + row-gap: 114px; + } + .row-gap-1-group { + display: flex; + flex-direction: row; + justify-content: start; + width: 340px; + } + .row-gap { + background: red; + width: 100px; + height: 6px; + } + .row-gap-2-group { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 20px; + height: 340px; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> + <div class="col-gaps"> + <div class="col-gap-2-group"> + <div class="col-gap"></div> + </div> + </div> + <div class="row-gaps"> + <div class="row-gap-1-group"> + <div class="row-gap"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-056.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-056.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gap segments are painted properly with empty areas. Tests + scenario where *rule-visibility-items is `between` and *rule-break is `intersection`. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="match" href="grid-gap-decorations-056-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + row-rule: 6px solid red; + column-rule: 6px solid blue; + rule-inset: 0px; + + column-rule-visibility-items: between; + row-rule-visibility-items: between; + + column-rule-break: intersection; + row-rule-break: intersection; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-057-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-057-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + position: relative; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } + .col-gaps { + display: flex; + position: absolute; + top: 0; + left: 107px; + column-gap: 114px; + } + .col-gap-1-group { + display: flex; + flex-direction: column; + justify-content: center; + height: 340px; + } + .col-gap { + background: blue; + width: 6px; + height: 120px; + } + .col-gap-2-group { + display: flex; + flex-direction: column; + justify-content: center; + + height: 340px; + } + .row-gaps { + display: flex; + flex-direction: column; + position: absolute; + top: 107px; + left: 0px; + row-gap: 114px; + } + .row-gap-1-group { + display: flex; + flex-direction: row; + justify-content: start; + width: 340px; + } + .row-gap { + background: red; + width: 110px; + height: 6px; + } + .row-gap-2-group { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 20px; + height: 340px; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> + + <div class="col-gaps"> + <div class="col-gap-1-group"> + <div class="col-gap"></div> + </div> + + <div class="col-gap-2-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + </div> + + <div class="row-gaps"> + <div class="row-gap-1-group"> + <div class="row-gap"></div> + <div class="row-gap" style="width: 120px;"></div> + </div> + + <div class="row-gap-2-group"> + <div class="row-gap"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-057.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-057.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gap segments are painted properly with empty areas. Tests + scenario where `*rule-visibility-items` is `around` and `*rule-break` is `spanning-item`. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="match" href="grid-gap-decorations-057-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + row-rule: 6px solid red; + column-rule: 6px solid blue; + + column-rule-visibility-items: around; + row-rule-visibility-items: around; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-058-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-058-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + position: relative; + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } + .col-gaps { + display: flex; + position: absolute; + top: 0; + left: 107px; + column-gap: 114px; + } + .col-gap-1-group { + display: flex; + flex-direction: column; + justify-content: center; + height: 340px; + } + .col-gap { + background: blue; + width: 6px; + height: 120px; + } + .col-gap-2-group { + display: flex; + flex-direction: column; + justify-content: center; + + height: 340px; + } + .row-gaps { + display: flex; + flex-direction: column; + position: absolute; + top: 107px; + left: 0px; + row-gap: 114px; + } + .row-gap-1-group { + display: flex; + flex-direction: row; + justify-content: start; + width: 340px; + } + .row-gap { + background: red; + width: 110px; + height: 6px; + } + .row-gap-2-group { + display: flex; + flex-direction: row; + justify-content: start; + column-gap: 20px; + height: 340px; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-058.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-058.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gap segments are painted properly with empty areas. Tests + scenario where `*rule-visibility-items` is `none`. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/"> +<link rel="match" href="grid-gap-decorations-058-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> + +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(3, 100px) / repeat(3, 100px); + gap: 20px; + row-rule: 6px solid red; + column-rule: 6px solid blue; + + column-rule-visibility-items: none; + row-rule-visibility-items: none; + + } + .item { + width: 100%; + height: 100%; + background: lightgray; + opacity: 0.8; + } +</style> +<div class="grid"> + <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div> + <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div> + <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div> +</div>