commit c0aa4b72bade98e0f919fb4ce89c5b8ab5e95253 parent ec7ba45348fed6617a6f4c254d78e7417f1e909f Author: Sam Davis Omekara (from Dev Box) <samomekarajr@microsoft.com> Date: Mon, 27 Oct 2025 10:01:58 +0000 Bug 1995871 [wpt PR 55602] - [Gap Decorations]: Add tests for subgrid fragmentation, a=testonly Automatic update from web-platform-tests [Gap Decorations]: Add tests for subgrid fragmentation This CL introduces several tests for the behavior of gap decorations in subgrids within a fragmentation context. During the creation of these tests, a bug was identified in the paint color logic, where the start should be less than the last intersection index rather than the intersection count, ensuring the start/end pair advances correctly for painting gap segments. The only aspect not covered is fragmentation with rule breaking behavior for both grid and subgrid, which will be added in a subsequent CL. Bug: 357648037 Change-Id: I0b98272822069c194da25acf694c931086e7bfed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7049588 Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1533952} -- wpt-commits: 2b8b3b74974383b894c2bab485a0a7dbe49c1115 wpt-pr: 55602 Diffstat:
21 files changed, 1861 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-001.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title> + Suppress row grid gaps: row gaps should be suppressed if it's split across + fragmentainer breaks or is the last content before a break. Tests a grid subgridded + on both axes and has a row gap that is split across a fragmentainer break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + .multi-col { + position: relative; + columns: 3; + column-fill: auto; + width: 100px; + height: 100px; + background: green; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-rows: repeat(3, 80px); + gap: 30px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: red; + grid-column: 1 / -1; + grid-row: 1 / -1; + row-rule: solid 10px; + } + .subgrid-item { + background: green; + } + .abspos { + background: green; + position: absolute; + width: 100px; + height: 20px; + left: 0; + top: 80px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multi-col"> + <div class="grid-container"> + <div class="subgrid"> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + </div> + </div> + <!-- Abspos element to cover 20px empty space left by split gaps at the bottom of the three fragmentainers --> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-002.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title> + Suppress row grid gaps: row gaps should be suppressed if it's split across + fragmentainer breaks or is the last content before a break. Tests a grid subgridded + only on the column axes and has a row gap that is split across a fragmentainer break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + .multi-col { + position: relative; + columns: 3; + column-fill: auto; + width: 100px; + height: 100px; + background: green; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 90px); + row-gap: 15px; + column-gap: 15px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: repeat(3, 50px); + grid-column: 1 / -1; + grid-row: 1 / -1; + column-rule: green solid 15px; + row-gap: 75px; + row-rule: yellow solid 75px; + background: red; + } + .subgrid-item { + background: green; + } + .abspos { + background: green; + position: absolute; + height: 50px; + top: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multi-col"> + <div class="grid-container"> + <div class="subgrid"> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + </div> + </div> + + <!-- Abspos elements to cover container space present as a result of row gap supprssion --> + <div class="abspos" style="width: 9px; left: 0;"></div> + <div class="abspos" style="width: 18px; left: 24.33px;"></div> + <div class="abspos" style="width: 42.33px; left: 57.33px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-003.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-003.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title> + Suppress row grid gaps: row gaps should be suppressed if it's split across + fragmentainer breaks or is the last content before a break. Tests a grid subgridded + only on the row axes and has a row gap that is split across a fragmentainer break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + .multi-col { + position: relative; + columns: 3; + column-fill: auto; + width: 100px; + height: 100px; + background: green; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-rows: repeat(3, 90px); + row-gap: 15px; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: subgrid; + grid-column: 1 / -1; + grid-row: 1 / -1; + column-rule: green solid 10px; + column-gap: 10px; + row-rule: green solid 20px; + background: red; + } + .subgrid-item { + background: green; + } + .abspos { + background: green; + position: absolute; + height: 10px; + top: 90px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multi-col"> + <div class="grid-container"> + <div class="subgrid"> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + </div> + </div> + + <!-- Abspos elements to cover container space present as a result of row gap supprssion --> + <div class="abspos" style="width: 11.5px; left: 0;"></div> + <div class="abspos" style="width: 23px; left: 21.5px;"></div> + <div class="abspos" style="width: 45.5px; left: 54.5px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-004.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-004.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title> + Suppress row grid gaps: row gaps should be suppressed if it's split across + fragmentainer breaks or is the last content before a break. Tests a grid subgridded + on both axes and has a row gap that is the last content in a fragmentainer. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="../../../../reference/ref-filled-green-100px-square.xht"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + .multi-col { + position: relative; + columns: 3; + column-fill: auto; + width: 100px; + height: 100px; + background: green; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-rows: repeat(3, 50px); + gap: 50px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: red; + grid-column: 1 / -1; + grid-row: 1 / -1; + row-rule: solid 10px; + } + .subgrid-item { + background: green; + } + .abspos { + background: green; + position: absolute; + width: 66.66px; + height: 50px; + left: 0; + top: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multi-col"> + <div class="grid-container"> + <div class="subgrid"> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + <div class="subgrid-item"></div> + </div> + </div> + <!-- Abspos element to cover 20px empty space left by split gaps at the bottom of the three fragmentainers --> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-005.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-005.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not have decorations. + Tests a grid that is subgridded in both directions and has all row gaps suppressed. +</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11520"> +<link rel="match" href="../../fragmentation/grid-gap-decorations-fragmentation-009-ref.html"> + +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + height: 100px; + width: 320px; + columns: 3; + column-fill: auto; + column-gap: 10px; + background: lightgray; + } + .grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, 90px); + column-gap: 10px; + row-gap: 20px; + row-rule: solid 10px red; + column-rule: solid 6px blue; + } + .subgrid { + display: grid; + grid-column: 1 / -1; + grid-row: 1 / -1; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + column-rule: blue solid 6px; + row-rule: red solid 5px; + } + .subgrid > div { + background-color: skyblue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="subgrid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006-ref.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 80px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 80px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:6;"></div> + <div class="item" style="grid-row:6;"></div> + <div class="item" style="grid-row:8;"></div> + <div class="item" style="grid-row:8;"></div> + <div class="item" style="grid-row:8;"></div> + <div class="item" style="grid-row:8;"></div> + <div class="item" style="grid-row:8;"></div> + <div class="subgrid"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:4;"></div> + <div class="item" style="grid-row:4;"></div> + <div class="item" style="grid-row:4;"></div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 50px; top: 30px; left: 50px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 50px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 20px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"> </div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 30px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;"> + <div class="row-gap" style="width: 30px;"> </div> + <div class="row-gap" style="width: 80px;"> </div> + <div class="row-gap" style="width: 30px;"> </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where a row gap starts at the beginning of a fragment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-006-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 80px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 20px 10px) 20px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 72px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:7;"></div> + <div class="item" style="grid-row:7;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="subgrid"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 50px; top: 30px; left: 50px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + + <div class="col-gap-group" style="left: 160px; height: 68px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 38px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"></div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 30px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px; top: 8px;"> + <div class="row-gap" style="width: 30px;"> </div> + <div class="row-gap" style="background: blue; width: 80px;"> </div> + <div class="row-gap" style="width: 30px;"> </div> + </div> + + <div class="row-gap-group" style="left: 140px; top: 38px;"> + <div class="row-gap"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where no row gap is suppressed and gap decorations are drawn properly. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-007-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008-ref.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 20px 10px) 20px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + background: orange; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 72px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:-2; grid-column: -2;"></div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 50px; top: 30px; left: 50px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 68px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 38px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"></div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 30px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px; top: 8px;"> + <div class="row-gap" style="width: 30px;"> </div> + <div class="row-gap" style="background: blue; width: 80px;"> </div> + <div class="row-gap" style="width: 30px;"> </div> + </div> + + <div class="row-gap-group" style="left: 140px; top: 38px;"> + <div class="row-gap"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where both grid and subgrid are sparse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-008-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="item"></div> + <div class="item" style="grid-row: -2; grid-column: -2;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009-ref.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 80px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + background: orange; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 80px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"></div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 50px; top: 30px; left: 50px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 50px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 20px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"> </div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 30px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;"> + <div class="row-gap" style="width: 30px;"> </div> + <div class="row-gap" style="width: 80px;"> </div> + <div class="row-gap" style="width: 30px;"> </div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where the subgrid is empty. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-009-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 80px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010-ref.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 10px 20px 10px 20px 10px 20px 10px 20px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + background: orange; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 72px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 140px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:7;"></div> + <div class="item" style="grid-row:7;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="subgrid" style="break-before: column;"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + </div> + </div> + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 72px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="left: 300px; height:38px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height: 72px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="col-gap-group" style="height: 8px; top: 0px; left: 330px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"> </div> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="top: 20px; left: 170px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 170px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> + + <div class="row-gap-group" style=" top: 8px; left:280px;"> + <div class="row-gap"> </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where the subgrid has a forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-010-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="subgrid" style="break-before: column;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011-ref.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 10px 20px 10px 20px 10px 20px 10px 20px; + background: lightgray; + column-gap: 10px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: teal; + grid-column: 2 / -2; + grid-row: 3 / -3; + background: orange; + } + .item { + background: purple; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 72px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + height: 10px; + display: flex; + width: 140px; + flex-direction: row; + column-gap: 0px; + + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item" style="grid-row:1; "></div> + <div class="item" style="grid-row:1; "></div> + <div class="item" style="grid-row:1; "></div> + <div class="item" style="grid-row:1; "></div> + <div class="item" style="grid-row:1; "></div> + <div class="item" style="grid-row:3; "></div> + <div class="item" style="grid-row:3; "></div> + <div class="item" style="grid-row:5; "></div> + <div class="item" style="grid-row:5; "></div> + <div class="item" style="grid-row:7; "></div> + <div class="item" style="grid-row:7;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="item" style="grid-row:9;"></div> + <div class="subgrid"> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:1;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3;"></div> + <div class="item" style="grid-row:3; break-before: column;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + <div class="item" style="grid-row:5;"></div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 68px;"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="col-gap-group" style="height:42px; top: 30px; left: 50px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="col-gap-group" style="height:50px; top: 0px; left: 190px;"> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap" style="background: cornflowerblue;"> </div> + <div class="row-gap" style="column-gap: 80px;"> + <div style="width: 30px; background: cornflowerblue;"> </div> + <div style="width: 30px; background: cornflowerblue;"> </div> + </div> + </div> + + <div class="row-gap-group" style="left: 140px; top: 8px;"> + <div class="row-gap" style="column-gap: 80px;"> + <div style="width: 30px; background: cornflowerblue;"> </div> + <div style="width: 30px; background: cornflowerblue;"> </div> + </div> + <div class="row-gap" style="column-gap: 80px;"> + <div style="width: 30px; background: cornflowerblue;"> </div> + <div style="width: 30px; background: cornflowerblue;"> </div> + </div> + </div> + + <div class="row-gap-group" style="top: 20px; left: 170px; width: 80px;"> + <div class="row-gap" style="background: blue; width: 80px;"> </div> + </div> + + <div class="row-gap-group" style=" top: 8px; left:280px;"> + <div class="row-gap"> </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario where a subgrid item has a forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-011-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="break-before: column;"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012-ref.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 50px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 10px 20px 20px 10px 20px 20px 10px 10px; + background: lightgray; + column-gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 3 / -4; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .inner-subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 2 / -1; + grid-row: 2/ -1; + column-rule: red solid 10px; + row-rule: blue solid 10px; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 50px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .item { + background: purple; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 0px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + background: cornflowerblue; + height: 10px; + } +</style> + +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="inner-subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item" style="grid-row: -1;"></div> + <div class="item" style="grid-row: -1;"></div> + </div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="height: 20px; top: 30px;"> + <div class="col-gap"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 160px;"> + <div class="col-gap"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: red;"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 300px; height: 20px"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"></div> + </div> + <div class="row-gap-group" style="left: 140px;"> + <div class="row-gap"></div> + </div> + <div class="row-gap-group" style="top: 20px; left: 170px; width: 80px;"> + <div class="row-gap" style="background: blue;"> </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario with two nested subgrids and a row gap is suppressed. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-012-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 50px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .inner-subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 2 / -1; + grid-row: 2/ -1; + column-rule: red solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="inner-subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013-ref.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 20px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 20px 20px 20px 20px 20px 10px 10px 10px 10px; + background: lightgray; + column-gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / 5; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .inner-subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 2 / -1; + grid-row: 2/ -1; + column-rule: red solid 10px; + row-rule: blue solid 10px; + } + .col-gap-group { + position: absolute; + top: 0px; + left: 20px; + display: flex; + gap: 20px; + height: 20px; + } + .col-gap { + width: 10px; + background: skyblue; + } + .item { + background: purple; + } +</style> + +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="inner-subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 160px"> + <div class="col-gap"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 300px"> + <div class="col-gap"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: red;"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 440px"> + <div class="col-gap"></div> + <div class="col-gap" style="background: white;"></div> + <div class="col-gap" style="background: red;"></div> + <div class="col-gap"></div> + </div> + <div class="col-gap-group" style="left: 580px"> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + <div class="col-gap"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title> + Gap Decorations are shown in a grid that's fragmented. Suppressed row gaps do not + have decorations. Test scenario with two nested subgrids and all row gaps are suppressed. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-013-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 2; + column-fill: auto; + width: 280px; + height: 20px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + background: lightgray; + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: none; + row-rule-break: none; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + background: orange; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + } + .inner-subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 2 / -1; + grid-row: 2/ -1; + column-rule: red solid 10px; + row-rule: blue solid 10px; + } + .item { + background: purple; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"> + <div class="inner-subgrid"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + </div> + </div> +</div>