Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-12 00:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-001.html Normal file
View file

@ -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>

7
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-002.html Normal file
View file

@ -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>

10
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-003.html Normal file
View file

@ -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>

10
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-004.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-005.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-006.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-007.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-008.html Normal file
View file

@ -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>

20
tests/wpt/web-platform-tests/css/css-break/grid/grid-container-fragmentation-009.html Normal file
View file

@ -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>

10
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-001.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-002.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-003.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-004.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-005.html Normal file
View file

@ -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>

12
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-006.html Normal file
View file

@ -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>

12
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-007.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-008.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-009.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-010.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-011.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-012.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-013.html Normal file
View file

@ -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>

14
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-014.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-015.html Normal file
View file

@ -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>

14
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-016.html Normal file
View file

@ -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>

14
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-017.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-018.html Normal file
View file

@ -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>

14
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-019.html Normal file
View file

@ -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>

18
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-020.html Normal file
View file

@ -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>

14
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-021.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-022.html Normal file
View file

@ -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>

18
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-023.html Normal file
View file

@ -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>

19
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-024.html Normal file
View file

@ -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>

18
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-025.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-026.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html Normal file
View file

@ -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>

11
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-028.html Normal file
View file

@ -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>

12
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-029.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-030.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-031.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-032.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-033.html Normal file
View file

@ -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>

13
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-034.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-035.html Normal file
View file

@ -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>

16
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-036.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-037.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-038.html Normal file
View file

@ -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>

10
tests/wpt/web-platform-tests/css/css-break/grid/grid-item-fragmentation-039.html Normal file
View file

@ -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>