commit 103a340510ef55169f7947891236a64a6e90b679 parent 5daef5de61f05fa806885ea85e07a04f049c79d3 Author: Sam Davis Omekara <samomekarajr@microsoft.com> Date: Thu, 11 Dec 2025 09:28:27 +0000 Bug 2005038 [wpt PR 56613] - [Gap Decorations]: Implement fragmentation for gap segments states, a=testonly Automatic update from web-platform-tests [Gap Decorations]: Implement fragmentation for gap segments states This CL implements fragmentation logic for gap segments states. Gap segments states control the rule breaking and visibility functionality for gap decorations. In order for these ranges to be valid in fragmentation context, some changes had to be made with the guiding principle that during fragmentation main(row) gaps are mostly affected/shifted. The changes are: (1) A `MainGap` copy-esque constructor is introduced such that we can use the constructed ranges from the unfragmented main gap and just update the offset. (2) Adjustment functions are added for the ranges of cross gaps such that those ranges are fragmentation-aware and updated to be relative to the current fragment. Tests have been added to exercise this change. Bug: 357648037 Change-Id: Id75b924210c84ad26fe9cef36112829e502b8275 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7056842 Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1556284} -- wpt-commits: 2b0a0bc9e95d52738ed1307d4c27498ddd33fec8 wpt-pr: 56613 Diffstat:
27 files changed, 2713 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-020-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-020-ref.html @@ -0,0 +1,209 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap1b { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap2b { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap3 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 12.5px; + left: 440px; + } + .row-gap3a { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap3b { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap3c { + width: 100px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 110px; + left: 102.5px; + } + .col-gap1a { + height: 100px; + border-left: solid 5px blue; + } + .col-gap1b { + height: 90px; + border-left: solid 5px blue; + } + .col-gap1-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 542.5px; + } + .col-gap1a-frag2 { + height: 10px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 100px; + border-left: solid 5px blue; + } + .col-gap2b { + height: 100px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3b { + height: 90px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 10px; + border-left: solid 5px blue; + } + .col-gap3b-frag2 { + height: 100px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> + <div class="col-gap1b"></div> +</div> + +<div class="col-gap1-frag2"> + <div class="col-gap1a-frag2"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> + <div class="col-gap2b"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> + <div class="col-gap3b"></div> +</div> + +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> + <div class="col-gap3b-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> + <div class="row-gap1b"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> + <div class="row-gap2b"></div> +</div> +<div class="row-gap3"> + <div class="row-gap3a"></div> + <div class="row-gap3b"></div> + <div class="row-gap3c"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-020.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-020.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to intersection stops painting decorations at + each intersection in fragmentation context. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-020-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + + width: 430px; + height: 430px; + + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + + column-rule-break: intersection; + column-rule-inset: 0px; + + row-rule-break: intersection; + row-rule-inset: 0px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-021-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-021-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap3 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 12.5px; + left: 440px; + } + .row-gap3a { + width: 430px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 110px; + left: 102.5px; + } + .col-gap1a { + height: 200px; + border-left: solid 5px blue; + } + .col-gap1-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 542.5px; + } + .col-gap1a-frag2 { + height: 10px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 310px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 120px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap1-frag2"> + <div class="col-gap1a-frag2"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> +<div class="row-gap3"> + <div class="row-gap3a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-021.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-021.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-021-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-022-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-022-ref.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 320px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 210px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 110px; + left: 102.5px; + } + .col-gap1a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 320px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 100px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-022.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-022.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where a row gap begins at the + start of the subsequent fragment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-022-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 320px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-023-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-023-ref.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 325px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 210px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 110px; + left: 102.5px; + } + .col-gap1a { + height: 215px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 325px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 100px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-023.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-023.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where a row gap is split across + fragments. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-023-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 325px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-024-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-024-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 325px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 210px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 110px; + left: 102.5px; + } + .col-gap1a { + height: 220px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 330px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 100px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-024.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-024.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where a row gap is the last + content in the fragment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-024-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 330px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-row: 2 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-025-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-025-ref.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 220px; + } + .row-gap2a { + width: 100px; + border-bottom: solid 5px red; + } + .row-gap3 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 12.5px; + left: 770px; + } + .row-gap3a { + width: 100px; + border-bottom: solid 5px red; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 100px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 310px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 10px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> +<div class="row-gap3"> + <div class="row-gap3a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-025.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-025.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where *rule-visibility-items + is set to `between`. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-025-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + column-rule-visibility-items: between; + row-rule-visibility-items: between; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-026-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-026-ref.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap2 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 212.5px; + left: 110px; + } + .row-gap2a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap3 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 12.5px; + left: 550px; + } + .row-gap3a { + width: 320px; + border-bottom: solid 5px red; + } + .col-gap1 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 220px; + left: 102.5px; + } + .col-gap1a { + height: 90px; + border-left: solid 5px blue; + } + .col-gap1-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 542.5px; + } + .col-gap1a-frag2 { + height: 10px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 210px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 310px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 120px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap1-frag2"> + <div class="col-gap1a-frag2"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> +<div class="row-gap3"> + <div class="row-gap3a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-026.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-026.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where *rule-visibility-items + is set to `around`. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-026-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 2; + column-fill: auto; + height: 310px; + width: 870px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + column-rule-visibility-items: around; + row-rule-visibility-items: around; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-027-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-027-ref.html @@ -0,0 +1,186 @@ +<!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; + } + .multi-col { + position: relative; + columns: 4; + column-fill: auto; + height: 200px; + width: 1750px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } + .row-gap1 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 0px; + } + .row-gap1a { + width: 210px; + border-bottom: solid 5px red; + } + .row-gap3 { + position: absolute; + height: 0px; + display: flex; + gap: 10px; + top: 102.5px; + left: 990px; + } + .row-gap3a { + width: 320px; + border-bottom: solid 5px red; + } + .col-gap1-frag3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 982.5px; + } + .col-gap1a-frag3 { + height: 100px; + border-left: solid 5px blue; + } + .col-gap2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 212.5px; + } + .col-gap2a { + height: 200px; + border-left: solid 5px blue; + } + .col-gap2-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 652.5px; + } + .col-gap2a-frag2 { + height: 200px; + border-left: solid 5px blue; + } + .col-gap3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 322.5px; + } + .col-gap3a { + height: 200px; + border-left: solid 5px blue; + } + .col-gap3-frag2 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 762.5px; + } + .col-gap3a-frag2 { + height: 200px; + border-left: solid 5px blue; + } + .col-gap3-frag3 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 1202.5px; + } + .col-gap3a-frag3 { + height: 200px; + border-left: solid 5px blue; + } + .col-gap3-frag4 { + position: absolute; + width: 0; + display: flex; + flex-direction: column; + gap: 10px; + top: 0px; + left: 1642.5px; + } + .col-gap3a-frag4 { + height: 10px; + border-left: solid 5px blue; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4; break-before: column;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div> + </div> +</div> + +<div class="col-gap1"> + <div class="col-gap1a"></div> +</div> +<div class="col-gap1-frag3"> + <div class="col-gap1a-frag3"></div> +</div> +<div class="col-gap2"> + <div class="col-gap2a"></div> +</div> +<div class="col-gap2-frag2"> + <div class="col-gap2a-frag2"></div> +</div> +<div class="col-gap3"> + <div class="col-gap3a"></div> +</div> +<div class="col-gap3-frag2"> + <div class="col-gap3a-frag2"></div> +</div> +<div class="col-gap3-frag3"> + <div class="col-gap3a-frag3"></div> +</div> +<div class="col-gap3-frag4"> + <div class="col-gap3a-frag4"></div> +</div> + +<div class="row-gap1"> + <div class="row-gap1a"></div> +</div> +<div class="row-gap2"> + <div class="row-gap2a"></div> +</div> +<div class="row-gap3"> + <div class="row-gap3a"></div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-027.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-027.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: setting *rule-break to spanning-item stops painting decorations at + each spanning-item in fragmentation context. Tests scenario where there's a forced break + and *rule-visibility-items is set to `around`. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break"> +<link rel="match" href="grid-gap-decorations-fragmentation-027-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multi-col { + position: relative; + columns: 4; + column-fill: auto; + height: 200px; + width: 1750px; + column-gap: 10px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 430px; + height: 430px; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 5px; + row-rule-color: red; + row-rule-style: solid; + row-rule-width: 5px; + column-rule-break: spanning-item; + column-rule-inset: 0px; + row-rule-break: spanning-item; + row-rule-inset: 0px; + column-rule-visibility-items: around; + row-rule-visibility-items: around; + } + .grid-item { + background-color: gray; + opacity: 0.5; + } +</style> +<div class="multi-col"> + <div class="grid-container"> + <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div> + <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4; break-before: column;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 3;"></div> + <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></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 @@ -40,6 +40,8 @@ grid-row: 2 / -2; column-rule: white solid 10px; row-rule: blue solid 10px; + column-rule-break: none; + row-rule-break: none; } .inner-subgrid { display: grid; diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014-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> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:0px; top: 50px; column-gap: 10px;"> + <div class="row-gap" style="width: 20px;"></div> + <div class="row-gap" style="width: 80px; background: blue;"></div> + <div class="row-gap" style="width: 20px;"></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-014.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014.html @@ -0,0 +1,54 @@ +<!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 and *rule-break is + spanning-item. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-014-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: spanning-item; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .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-015-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015-ref.html @@ -0,0 +1,169 @@ +<!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; + 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; + display: flex; + flex-direction: column; + row-gap: 10px; + } + .col-gap-segment { + background: skyblue; + height: 20px; + } + .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; + flex-direction: row; + column-gap: 10px; + } + .row-gap-segment { + background: cornflowerblue; + width: 20px; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"></div> + </div> + + <div class="col-gap-group"> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + </div> + + <div class="col-gap-group" style="height: 50px; top: 30px; left: 50px;"> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="background: white;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="background: white;"></div> + </div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 50px;"> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + </div> + </div> + + <div class="col-gap-group" style="height: 20px; top: 0px; left: 190px;"> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + </div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + <div class="row-gap"> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 30px; width: 80px;"> + <div class="row-gap"> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + </div> + </div> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;"> + <div class="row-gap" style="width: 140px;"> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015.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. Test scenario where the subgrid is empty and *rule-break is intersection. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-015-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: intersection; + row-rule-break: intersection; + column-rule-inset: 0px; + row-rule-inset: 0px; + } + .subgrid { + display: grid; + grid-template-columns: subgrid; + grid-template-rows: subgrid; + grid-column: 2 / -2; + grid-row: 2 / -2; + column-rule: white solid 10px; + row-rule: blue solid 10px; + column-rule-break: intersection; + row-rule-break: intersection; + column-rule-inset: 0px; + row-rule-inset: 0px; + } + .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-016-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016-ref.html @@ -0,0 +1,220 @@ +<!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: 3; + column-fill: auto; + width: 420px; + 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; + 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; + display: flex; + flex-direction: column; + row-gap: 10px; + } + .col-gap-segment { + background: skyblue; + height: 20px; + } + .row-gap-group { + position: absolute; + top: 20px; + left: 140px; + display: flex; + flex-direction: column; + row-gap: 20px; + width: 140px; + } + .row-gap { + height: 10px; + display: flex; + flex-direction: row; + column-gap: 10px; + } + .row-gap-segment { + background: cornflowerblue; + width: 20px; + } +</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 class="col-gap-segment" style="height: 100%;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 100%;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 100%;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 100%;"></div> + </div> + </div> + + <div class="col-gap-group" style="left: 160px; height: 72px;"> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment" style="height: 12px;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment" style="height: 12px;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment" style="height: 12px;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment"></div> + <div class="col-gap-segment"></div> + <div class="col-gap-segment" style="height: 12px;"></div> + </div> + </div> + + <div class="col-gap-group" style="left: 300px; height:38px;"> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 8px;"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 8px;"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 8px;"></div> + <div class="col-gap-segment"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="height: 8px;"></div> + <div class="col-gap-segment"></div> + </div> + </div> + + <div class="col-gap-group" style="height: 72px; top: 0px; left: 190px;"> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="height: 12px; background: white;"></div> + </div> + <div class="col-gap"> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="background: white;"></div> + <div class="col-gap-segment" style="height: 12px; background: white;"></div> + </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 class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + <div class="row-gap"> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + </div> + + <div class="row-gap-group" style="top: 20px; left: 170px; width: 80px;"> + <div class="row-gap"> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + </div> + </div> + + <div class="row-gap-group" style="top: 50px; left: 170px; width: 80px;"> + <div class="row-gap"> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + <div class="row-gap-segment" style="background: blue;"></div> + </div> + </div> + + <div class="row-gap-group" style=" top: 8px; left:280px;"> + <div class="row-gap"> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + <div class="row-gap-segment"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016.html @@ -0,0 +1,85 @@ +<!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 and has *rule-break + set to intersection. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-016-ref.html"> +<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> +<style> + body { + margin: 0px; + } + .multicol { + position: relative; + columns: 3; + column-fill: auto; + width: 420px; + height: 72px; + background: yellow; + column-gap: 0px; + } + .grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, 1fr); + + gap: 10px; + height: 140px; + column-rule: skyblue solid 10px; + row-rule: cornflowerblue solid 10px; + column-rule-break: intersection; + row-rule-break: intersection; + column-rule-inset: 0px; + row-rule-inset: 0px; + } + .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; + column-rule-break: intersection; + row-rule-break: intersection; + column-rule-inset: 0px; + row-rule-inset: 0px; + } + .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> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017-ref.html @@ -0,0 +1,111 @@ +<!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; + } + .spanner { + background: purple; + grid-column: 2/ -2; + grid-row: -2/-3; + opacity: 0.5; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"></div> + <div class="spanner"> </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; column-gap: 80px;"> + <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> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:0px; top: 50px; column-gap: 10px;"> + <div class="row-gap" style="width: 20px;"></div> + <div class="row-gap" style="width: 80px; background: blue;"></div> + <div class="row-gap" style="width: 20px;"></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-017.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017.html @@ -0,0 +1,58 @@ +<!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 and *rule-break is + spanning-item. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-017-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: spanning-item; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .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; + } + .spanner { + background: purple; + grid-column: -2/-5; + grid-row: -1/-2; + opacity: 0.5; + } +</style> +<div class="multicol"> + <div class="grid-container"> + <div class="subgrid"></div> + <div class="spanner"> </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018-ref.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018-ref.html @@ -0,0 +1,108 @@ +<!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 style="grid-row: 4; grid-column: 2/4; background: red; "></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: red;" ></div> + </div> + + <div class="row-gap-group"> + <div class="row-gap"></div> + </div> + + <div class="row-gap-group" style="flex-direction: row; width: 140px; left:0px; top: 50px; column-gap: 10px;"> + <div class="row-gap" style="width: 20px;"></div> + <div class="row-gap" style="width: 80px; background: blue;"></div> + <div class="row-gap" style="width: 20px;"></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-018.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018.html @@ -0,0 +1,56 @@ +<!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 and *rule-break is + spanning-item. +</title> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> +<link rel="match" href="subgrid-gap-decorations-fragmentation-018-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: spanning-item; + row-rule-break: spanning-item; + row-rule-inset: 0px; + } + .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 style="grid-row: -2; grid-column: 2/4; background: red;"></div> + </div> + </div> +</div>