diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-break/grid')
98 files changed, 1342 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html new file mode 100644 index 0000000000..0b954f2814 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green; height: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html new file mode 100644 index 0000000000..aec5085991 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green; grid-template-rows: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html new file mode 100644 index 0000000000..659d9eaac5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; background: green; height: 100px; break-inside: avoid;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html new file mode 100644 index 0000000000..3e27606071 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; background: green; height: 300px; break-before: column;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html new file mode 100644 index 0000000000..a110275ff8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red; position: relative;"> + <div style="display: grid; background: green; height: 50px; break-after: column;"></div> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="width: 50px; height: 50px; background: green; position: absolute; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html new file mode 100644 index 0000000000..2c25d1f35c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="Clipping only in the inline direction shouldn't affect fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; width:100px; column-gap:0; column-fill:auto; height:100px; background:red;"> + <div style="overflow-x:clip; display: grid; height:200px;"> + <div style="width:100px; background:red;"> + <div style="width:25px; height:400px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html new file mode 100644 index 0000000000..86323ee57a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip; height:300px;"> + <div style="display: grid;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html new file mode 100644 index 0000000000..38392afc60 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="display:grid; max-height:300px; overflow:clip;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html new file mode 100644 index 0000000000..c4148bb226 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + .content { + width:50px; + background:green; + contain:size; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0px; column-fill:auto; width:100px; height:100px; position:relative;"> + <div style="display:grid; max-height:200px; overflow:clip;"> + <div class="content" style="height:50px;"></div> + <div class="content" style="height:150px;"></div> + </div> + <div class="content" style="position:absolute; height:50px; left:0px; top:50px;"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html new file mode 100644 index 0000000000..d3e87d062b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> + <div style="background: green; height: 50px;"></div> + <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> + <div></div> + <div style="break-before: column;"></div> <!-- Should result in a column break before the grid container. --> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html new file mode 100644 index 0000000000..8615244bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> + <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> + <div style="break-after: column;"></div> <!-- Should result in a column break after the grid container. --> + <div></div> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-008.html new file mode 100644 index 0000000000..b9caacc4af --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; column-fill: auto; height: 100px; gap: 0; columns: 2;"> + <div style="display: grid; position: relative; grid-template: 100px 100px / auto; background: red;"> + <div style="background: green;"></div> + <div style="position: absolute; top: 0; left: 0; width: 50px; height: 100px; grid-row-start: 2; grid-row-end: 2; background: green;"</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-009.html new file mode 100644 index 0000000000..dc095fd4ee --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; column-fill: auto; height: 100px; gap: 0; columns: 2;"> + <div style="display: grid; position: relative; grid-template: auto 30px / auto; background: red;"> + <div style="background: green;"> + <div style="height: 70px; break-inside: avoid;"></div> + <div style="height: 70px; break-inside: avoid;"></div> + </div> + <div style="position: absolute; top: 0; left: 0; width: 50px; height: 30px; grid-row-start: 2; grid-row-end: 2; background: green;"</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html new file mode 100644 index 0000000000..1e2d41775e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests basic fragmentation of a grid-item.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="min-height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html new file mode 100644 index 0000000000..ce1b6b67ef --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-item reordered with grid-row-start is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 150px; background: green; grid-row-start: 1;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html new file mode 100644 index 0000000000..8c4e42d640 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that parallel grid items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: auto auto;"> + <div style="background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html new file mode 100644 index 0000000000..e0eca9c9d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; align-self: end;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html new file mode 100644 index 0000000000..8b7503f927 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item (with auto margins) is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; margin-top: auto;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html new file mode 100644 index 0000000000..8c458c832c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a center aligned grid-item is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; align-self: center;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 50px;"></div> + <div style="position: absolute; background: green; bottom: 0; right: 0; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html new file mode 100644 index 0000000000..cd78a9bc17 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a center aligned grid-item (with auto margins) is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; margin: auto 0;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 50px;"></div> + <div style="position: absolute; background: green; bottom: 0; right: 0; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html new file mode 100644 index 0000000000..79703f6513 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that baseline aligned grid-items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; align-items: baseline; line-height: 0; grid-template-columns: auto auto;"> + <div style="height: 150px; background: green;"> + <span style="display: inline-block; height: 10px;"></span> + </div> + <div style="height: 200px; background: green;"> + <span style="display: inline-block; height: 60px;"></span> + </div> + </div> + <div style="position: absolute; width: 25px; height: 50px; top: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html new file mode 100644 index 0000000000..3338510941 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a margin fragments correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="background: green; margin-top: 50px;"></div> + </div> + <div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html new file mode 100644 index 0000000000..bd57ef797a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a min-content min-track grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(min-content, 10px);"> + <div style="line-height: 0; background: green;"> <!-- Spans an min-content min row. --> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html new file mode 100644 index 0000000000..e353537827 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with auto track(s) grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: auto;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html new file mode 100644 index 0000000000..c3b206e26c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a flexible track grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 1fr;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html new file mode 100644 index 0000000000..a1e7106e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, auto) track inside an auto-grid grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(0, auto);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html new file mode 100644 index 0000000000..09c95d1840 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, auto) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px; grid-template-rows: minmax(0, auto);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html new file mode 100644 index 0000000000..6dd82de582 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, 1fr) track inside an auto-grid grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(0, 1fr);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html new file mode 100644 index 0000000000..c16f740bd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, 1fr) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px; grid-template-rows: minmax(0, 1fr);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html new file mode 100644 index 0000000000..a5c1abeb12 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a fixed track *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html new file mode 100644 index 0000000000..18c757352e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid expands its intrinsic block-size, due to a grid child fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green;"> + <div style="display: grid;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html new file mode 100644 index 0000000000..dc14a6f744 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items in subsequent rows get pushed down due to a grid-item fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: auto 70px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 110px, after 100px + 30px --> + <div style="display: inline-block; width: 50px; height: 80px;"></div> + <div style="display: inline-block; width: 50px; height: 30px;"></div> + </div> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html new file mode 100644 index 0000000000..f0636c4982 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items in subsequent rows get pushed down due to a grid-items fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; orphans: 1; background: red;"> + <div style="display: grid; grid-template-rows: auto auto 170px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 110px, after 100px + 30px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 90px, after 70px + 30px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html new file mode 100644 index 0000000000..775422db7b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px;"> + <div style="background: green;"></div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 180px, after 100px + 100px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html new file mode 100644 index 0000000000..a31e8b51df --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 12.5px 12.5px; grid-template-rows: auto 140px;"> + <div style="background: green;"></div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 180px, after 100px + 100px + 60px --> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html new file mode 100644 index 0000000000..092aeba9c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: auto 40px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html new file mode 100644 index 0000000000..691212b240 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: auto 40px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="line-height: 0; background: green; align-self: end;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> + <div style="background: green; position: absolute; left: 25px; top: 0; width: 25px; height: 10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html new file mode 100644 index 0000000000..fc0731f63e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-areas: 'a b' 'c c';"> + <div style="background: green; grid-area: b; line-height: 0;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="background: green; grid-area: c; height: 40px;"></div> + <div style="background: green; grid-area: a; line-height: 0;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html new file mode 100644 index 0000000000..9f4be08a44 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items with a block-start margin will get pushed into the next fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 100px 100px / 50px; grid-template-areas: 'a' 'b'"> + <div style="background: green; grid-area: a; margin-top: 100px; height: 100px;"></div> + <div style="background: green; grid-area: a; height: 100px; "></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html new file mode 100644 index 0000000000..c0270db499 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items with a negative margin are placed relative to their row (instead of fragmenting earlier).</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: red; width: 100px; height: 100px; display: flow-root;"> + <div style="margin-top: 10px; height: 90px; columns: 2; column-gap: 0;"> + <div style="display: grid; grid-template: 90px 90px / 50px;"> + <div> + <div style="background: green; margin-top: -10px; height: 100px;"></div> + </div> + <div style="background: green; margin-top: -10px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html new file mode 100644 index 0000000000..1718fa2081 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 50px 100px / 50px;"> + <div style="background: green; height: 100px;"></div> + <div style="background: green; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html new file mode 100644 index 0000000000..380fba879c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item pushes all grid-items on the same row into the next fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 50px 100px / 25px 25px; grid-template-areas: 'a a' 'b c';"> + <div style="background: green; grid-area: a; height: 100px;"></div> + <div style="background: green; grid-area: b;"></div> + <div style="background: green; grid-area: c; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html new file mode 100644 index 0000000000..a3e05d0956 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; line-height: 0;"> <!-- row size before fragmentation is 170px, after 100px + 90px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 90px;"></div> + </div> + <div style="background: green; break-inside: avoid; height: 80px;"></div> + <div style="background: green; height: 120px;"></div> + </div> + <div style="background: green; position: absolute; width: 25px; height: 10px; bottom: 0; left: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html new file mode 100644 index 0000000000..1a339ab22c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; line-height: 0;"> <!-- row size before fragmentation is 170px, after 100px + 80px --> + <div style="display: inline-block; width: 25px; height: 90px;"></div> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + </div> + <div style="background: green; height: 30px; break-inside: avoid;"></div> <!-- Gets placed in the 3rd fragmentainer. --> + <div style="background: green; height: 170px;"></div> + </div> + <div style="background: green; position: absolute; width: 25px; height: 20px; left: 25px; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html new file mode 100644 index 0000000000..33f855f895 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; grid-column: 1 / span 2;"></div> + <div style="background: green; break-before: avoid;"></div> + <div style="background: green; break-before: column;"></div> <!-- "column" should have precedence over "avoid" --> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html new file mode 100644 index 0000000000..c8f54c90a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; break-after: column;"></div> <!-- "column" should have precedence over "avoid" --> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html new file mode 100644 index 0000000000..9a81c074bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; grid-column: 1 / span 2; break-before: column;"></div> <!-- "column" should have precedence over "avoid" --> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html new file mode 100644 index 0000000000..15a544ea22 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break voilation precedence.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; columns: 2; column-fill: auto; gap: 0; width: 100px; height: 100px; background: red;"> + <div style="display:grid; orphans: 2; widows: 2; line-height: 0;"> + <div style="background: green; height: 70px;"></div> + <div style="break-before: avoid;"> <!-- Prefer avoiding the row break rather and violate orphans/widows constraint. --> + <span style="display: inline-block; height: 30px; width: 50px; background: green;"></span> + <span style="display: inline-block; height: 70px; width: 50px; background: green;"></span> + </div> + </div> + <div style="position: absolute; width: 50px; height: 30px; bottom: 0; right: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html new file mode 100644 index 0000000000..ba44745e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break voilation precedence.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; columns: 2; column-fill: auto; gap: 0; width: 100px; height: 100px; background: red;"> + <div style="display:grid; orphans: 2; widows: 2; line-height: 0; grid-template-columns: 0% 100%;"> + <div style="background: green; height: 70px; grid-column: 1 / span 2;"></div> + <div style="break-before: avoid;"></div> <!-- Prefer avoiding the row break rather and violate orphans/widows constraint. --> + <div> + <span style="display: inline-block; height: 30px; width: 50px; background: green;"></span> + <span style="display: inline-block; height: 70px; width: 50px; background: green;"></span> + </div> + </div> + <div style="position: absolute; width: 50px; height: 30px; bottom: 0; right: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html new file mode 100644 index 0000000000..d5d97394c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-before:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 40px;"></div> + <div style="background: green; break-before: avoid; line-height: 0;"> + <span style="display: inline-block; width: 100%; height: 60px;"></span> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html new file mode 100644 index 0000000000..40008b5dcd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-before:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 150px;"></div> + <div style="background: green; height: 110px;"></div> + <div style="background: green; break-before: avoid; line-height: 0;"> + <span style="display: inline-block; width: 100%; height: 60px;"></span> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 40px; bottom: 0; right: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html new file mode 100644 index 0000000000..5201c49fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 50px; columns: 1; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 100px; break-after: column;"></div> + <div style="background: green; height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html new file mode 100644 index 0000000000..8733073741 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red; column-fill: auto;"> + <div style="display: grid; grid-template-areas: 'a b' 'c c'; grid-template-columns: 25px 25px;"> + <div style="background: green; grid-area: b; line-height: 0;"> + <div style="height: 30px;"></div> + <div style="height: 50px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green; grid-area: a;"></div> + <div style="background: green; grid-area: c; height: 20px;"></div> + </div> + <div style="position: absolute; background: green; width: 50px; height: 30px; bottom: 0; right: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html new file mode 100644 index 0000000000..f26c726553 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="margin-left:-100px; columns:2; height:200px; width:200px; column-gap:0; column-fill:auto;"> + <div style="height:199px;"></div> + <div style="display: grid;"> + <div style="columns:2; width:100%; column-gap:0; background:red; line-height: 0;"> + <div style="display: inline-block; width: 100%; height: 20px; background: green;"></div> + <div style="height:180px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html new file mode 100644 index 0000000000..67e2d40520 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red; column-fill: auto;"> + <div style="display: grid; grid-template-columns: 25px;"> + <div style="background: green;"> + <div style="height: 30px;"></div> + <div style="height: 50px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green;"> + <div style="height: 30px;"></div> + <div style="height: 10px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green; height: 190px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html new file mode 100644 index 0000000000..7a4ddc54e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; columns: 2; width: 100px; height: 100px; gap: 0; background: red;"> + <div style="display: grid;"> + <div style="height: 50px; background: green;"></div> + <div> + <div style="break-inside: avoid; height: 100px; background: green;"></div> <!-- A space shortage should be reported due to this. --> + </div> + <div style="break-inside: avoid; width: 0; height: 50px;"></div> + </div> + <div style="position: absolute; width: 50px; height: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html new file mode 100644 index 0000000000..8c028479bc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid;"> + <div style="break-before: column;"></div> <!-- This break-before should be propagated to the grid row. --> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html new file mode 100644 index 0000000000..e4010b421c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"> + <div> + <div style="break-after: column;"></div> <!-- This break-after should be propagated to the grid row. --> + </div> + </div> + <div style="background: green;"> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html new file mode 100644 index 0000000000..ffdc94efba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid; display: grid; grid-template-columns: auto auto;"> + <div></div> + <div style="break-before: column;"></div> <!-- This break-before should be propagated to the outermost grid row. --> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html new file mode 100644 index 0000000000..ac6d137cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid; display: grid; grid-template-columns: auto auto;"> + <div style="break-after: column;"></div> <!-- This break-after should be propagated to the outermost grid row. --> + <div></div> + </div> + <div style="background: green;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html new file mode 100644 index 0000000000..5eed6b9184 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 50px 200px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid; break-after: avoid; display: grid; grid-template-columns: auto auto;"> + <div style="break-before: column; break-after: column;"></div> <!-- The break values should be propagated to the outermost rows. --> + <div></div> + </div> + <div style="background: green;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html b/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html new file mode 100644 index 0000000000..ec27d0cc3f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; width: 100px; gap: 0; background: red;"> + <div style="display: grid;"> + <!-- Don't try and expand this row - as we'll continually expand due to the %-based child. --> + <div style="min-height: 100px;"> + <div style="height: 200%; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html new file mode 100644 index 0000000000..e94889228a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative;"> + <div style="display: grid; height: 200px;"> + <div style="position: absolute; width: 50px; height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html new file mode 100644 index 0000000000..b1ced43ab8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;"> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: end;"></div> + <div style="grid-row-start: 1; position: absolute; width: 50px; height: 50px; background: green; align-self: start;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html new file mode 100644 index 0000000000..59235f9245 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;"> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: center;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: end;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: start;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html new file mode 100644 index 0000000000..f73d91a192 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 100px;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="grid-row-start: 2; break-before: column; height: 50px; background: green;"></div> <!-- break-before pushes this row into the 2nd column. --> + <div style="grid-row-start: 2; position: absolute; width: 50px; height: 50px; background: green; align-self: end;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html new file mode 100644 index 0000000000..3536b30a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px auto;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="grid-row-start: 2;"> <!-- Row expands from 80px to 90px --> + <div style="break-inside: avoid; height: 40px;"></div> + <div style="break-inside: avoid; height: 40px;"></div> + </div> + <div style="grid-row-start: 2; position: absolute; width: 50px; height: 40px; background: green; align-self: end;"></div> + <div style="position: absolute; background: green; width: 50px; height: 60px; bottom: -60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html new file mode 100644 index 0000000000..63a14e5cff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px 100px 50px;"> + <div style="background: green;"> + <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div> + <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html new file mode 100644 index 0000000000..6802973edb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px auto 50px;"> + <div style="background: green;"> + <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div> + <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div> + </div> + <div> <!-- Expands row from 70px to 100px --> + <div style="break-inside: avoid; height: 20px;"></div> + <div style="break-inside: avoid; height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html new file mode 100644 index 0000000000..a8ef5622a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 200px;"> + <div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + <div style="width: 50px; height: 200px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html new file mode 100644 index 0000000000..6b50367b16 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 4; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 400px; align-items: end;"> + <div style="position: absolute; width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html new file mode 100644 index 0000000000..9b12550e6b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 4; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 400px; align-items: center;"> + <div style="position: absolute; width: 25px; height: 100px; background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; background: white;"></div> + </div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; background: red;"></div> + </div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html new file mode 100644 index 0000000000..81bf627587 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 200px; grid-template-rows: 100px 100px;"> + <div style="grid-row-start: 1; width: 50px; height: 100px; background: red;"></div> + <div style="grid-row-start: 2; width: 50px; height: 100px; background: green;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html new file mode 100644 index 0000000000..fae587dc8e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318399"> +<div style="column-count: 1;"> + <div style="break-inside: avoid; display: grid; grid-template-rows: 10px; position: relative;"> + <div style="position: absolute; grid-row-start: 1; grid-row-end: 1; inset: 0;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html new file mode 100644 index 0000000000..30d6f3bb21 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1417976"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto;"> + <div style="display:grid;"> + <div style="width:100px; max-height:50px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px; background:red;"></div> + </div> + </div> + <div style="position:relative; width:100px; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html new file mode 100644 index 0000000000..6ce9d39ef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399336"> +<body> + <div style="width: 6000px; height: 6000px;"> + <div style="columns: 4; border: 1px solid black;"> + <div style="height: 50px; width: 550px; float: right;">Text</div> + <div style="display: grid; grid-template-columns: repeat(auto-fill,250px);"> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html new file mode 100644 index 0000000000..e6cc6c8b51 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399336"> +<body> + <div style="width: 2000px; height: 2000px;"> + <div style="columns: 2; border: 1px solid black;"> + <div style="height: 50px; width: 550px; float: right;">Text</div> + <div style="display: grid; grid-template-columns: repeat(auto-fill,250px);"> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html new file mode 100644 index 0000000000..d2705f04f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1319964"> +<div style="column-count:2; column-fill:auto; border-bottom: 4294967295px solid;"> + <div style="display:grid; padding-top:1px; border-bottom: 4294967295px solid;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html new file mode 100644 index 0000000000..8b636ae7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html @@ -0,0 +1,11 @@ +<!-- quirks-mode --> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318608"> +<style> +html, div { + column-count: 2; +} +</style> +<body style="display: grid; align-items: end;"> + <div>a</div> + <div> + <span style="display: block; contain: size;">content</span> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html new file mode 100644 index 0000000000..95660ec106 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:1; column-fill:auto; height:60px;"> + <div style="display:grid; height:100px; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html new file mode 100644 index 0000000000..f487c3ded5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:1; column-fill:auto; height:60px;"> + <div style="display:grid; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html new file mode 100644 index 0000000000..c7a3903a09 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:grid; height:200px; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html new file mode 100644 index 0000000000..208100619c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:grid; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.html new file mode 100644 index 0000000000..069ffb5b21 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. --> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:200px auto;"> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div> + <div style="contain:size; height:150px;"></div> + </div> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html new file mode 100644 index 0000000000..af4cfb1216 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. --> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="display:grid; grid-template-columns:auto auto;"> + <div> + <div style="contain:size; height:150px;"></div> + <div style="contain:size; height:150px;"></div> + <div style="contain:size; height:150px;"></div> + </div> + <div style="background:red;"> + <div style="height:400px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html new file mode 100644 index 0000000000..906ad29fc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="display:grid; background:red;"> + <div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html new file mode 100644 index 0000000000..6e2caf60ce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="display:grid; background:red;"> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html new file mode 100644 index 0000000000..e3416da195 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1430650"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:grid; grid-template-rows:20px 100px;"> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="break-before:column; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html new file mode 100644 index 0000000000..959ff4a905 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html new file mode 100644 index 0000000000..9b28b37b42 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html new file mode 100644 index 0000000000..3f1381a7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; height: 100px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html new file mode 100644 index 0000000000..67c291fbc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; height: 300px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html new file mode 100644 index 0000000000..37babe2991 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red; position: relative;"> + <div style="display: grid; height: 50px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-after: column;"></div> + </div> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="width: 50px; height: 50px; background: green; position: absolute; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html new file mode 100644 index 0000000000..1a26d816d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests basic fragmentation of a grid-item.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="min-height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html new file mode 100644 index 0000000000..24f7d997a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-item reordered with grid-row-start is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="display: grid; grid-template: subgrid / subgrid; grid-row: span 2;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 150px; background: green; grid-row-start: 1;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html new file mode 100644 index 0000000000..49f0b5fc76 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that parallel grid items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: auto auto;"> + <div style="display: grid; grid-template: subgrid / subgrid; grid-column: span 2;"> + <div style="background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html new file mode 100644 index 0000000000..85ed105f96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="height: 100px; background: green; align-self: end;"></div> + </div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html new file mode 100644 index 0000000000..3832f0d16e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item (with auto margins) is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="height: 100px; background: green; margin-top: auto;"></div> + </div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> |