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

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

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

22
tests/wpt/web-platform-tests/css/css-break/table/border-spacing-at-breaks.tentative.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; width:100%; border-spacing:0 10px;">
<div style="display:table-row;">
<div style="width:100%; height:85px; background:green;"></div>
</div>
<div style="display:table-row;">
<div style="width:25px; height:100px; background:green;">
<div style="margin-left:-25px; width:25px; height:10px; background:green;"></div>
<div style="height:85px;"></div>
<div style="margin-left:-25px; width:25px; height:5px; background:green;"></div>
</div>
</div>
<div style="display:table-row-group;">
<div style="width:25px; height:200px; background:green;"></div>
</div>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-break/table/border-spacing.html Normal file
View file

@ -0,0 +1,34 @@
<!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=534751">
<style>
.cell > div { background:white; }
</style>
<p>No red should be seen below.</p>
<div id="multicol" style="columns:2; column-fill:auto; height:70px; width:200px; line-height:20px;">
<div style="position:relative; display:table; border-spacing:10px;">
<div class="cell" style="display:table-cell; width:30px; background:red;">
<div id="child1">1<br></div>
<div id="child2">2<br></div>
<div id="child3">3<br></div>
<div id="child4">4<br></div>
<div id="child5">5<br></div>
</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
assert_equals(document.getElementById("child1").offsetTop, 10);
assert_equals(document.getElementById("child1").offsetHeight, 20);
assert_equals(document.getElementById("child2").offsetTop, 30);
assert_equals(document.getElementById("child2").offsetHeight, 20);
assert_equals(document.getElementById("child3").offsetTop, 50);
assert_equals(document.getElementById("child3").offsetHeight, 20);
assert_equals(document.getElementById("child4").offsetTop, 70);
assert_equals(document.getElementById("child4").offsetHeight, 20);
assert_equals(document.getElementById("child5").offsetTop, 90);
assert_equals(document.getElementById("child5").offsetHeight, 20);
}, "Table with border spacing");
</script>

9
tests/wpt/web-platform-tests/css/css-break/table/bottom-padding-repeated-header-crash.html Normal file
View file

@ -0,0 +1,9 @@
<!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=1356236">
<div style="columns:2; column-fill:auto; height:100px;">
<div style="display:table; padding-bottom:101px;">
<div style="display:table-caption;"></div>
<div style="display:table-header-group; break-inside:avoid;"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/break-after-table-cell-child.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;">
<div style="background: green; height: 100px; width: 100%; display: table; break-after: avoid;">
<div style="display: table-cell;">
<div style="break-after: column;"></div> <!-- Should be propagated to the outer table. -->
</div>
<div style="display: table-cell;"></div>
</div>
<div style="background: green; height: 100px;"></div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/break-after-table-cell.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;">
<div style="background: green; height: 100px; width: 100%; display: table; break-after: avoid;">
<div style="display: table-cell; break-after: column;"></div> <!-- Should be propagated to the outer table. -->
<div style="display: table-cell;"></div>
</div>
<div style="background: green; height: 100px;"></div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-001.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table>
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. -->
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr>
<tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr>
</table>
<div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-002.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table>
<tbody>
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. -->
</tbody>
<tbody>
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr>
<tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr>
</tbody>
</table>
<div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-003.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table style="background: green;">
<tr><td style="height: 50px; width: 50px;"></td></tr> <!-- We should have a column break after this row. -->
<tr><td style="height: 50px; width: 50px;"></td></tr>
<tr><td style="height: 50px; width: 50px; break-before: avoid;"></td></tr>
</table>
</div>

16
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-004.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table>
<tbody><tr><td style="height: 50px; width: 50px; background: green;"></td></tr></tbody> <!-- We should have a column break after this section. -->
<tbody><tr><td style="height: 50px; width: 50px; background: green;"></td></tr></tbody>
<tbody><tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr></tbody>
</table>
<div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-005.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table>
<tbody>
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. -->
<tr><td style="height: 50px; width: 50px; background: green;"></td></tr>
</tbody>
<tbody>
<tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr>
</tbody>
</table>
<div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-006.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; break-inside: avoid; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table style="background: green;">
<tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody> <!-- We should have a column break after this section. -->
<tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody>
<tbody><tr><td style="height: 50px; width: 50px; break-before: avoid;"></td></tr></tbody>
</table>
</div>

16
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-007.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<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; line-height:20px; height:250px;">
<div style="display:table-caption;">
<div style="contain:size; width:50px; height:100px; background:green;"></div>
<div style="contain:size; width:50px; height:100px; background:green;"></div>
</div>
<div style="break-before:avoid;">
<div style="contain:size; width:10px; height:100px;"></div>
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/table/break-avoidance-in-table-in-grid.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between">
<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:150px;">
<div style="display:grid;">
<div style="height:100px; background:green;"></div>
<div>
<div style="contain:size; height:40px; background:green;"></div>
</div>
<div>
<div style="display:table; width:100%;">
<div style="break-before:avoid; contain:size; height:60px; background:green;"></div>
</div>
</div>
</div>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/break-before-expansion-001.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table style="background: green;">
<tr><td style="height: 50px; width: 50px;"></td></tr> <!-- We should have a column break after this row. -->
<tr><td style="height: 100px; width: 50px; break-before: column;"></td></tr>
</table>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/break-before-expansion-002.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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>
<style>
table { border-spacing: 0; }
td { padding: 0; }
</style>
<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;">
<table style="background: green;">
<tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody> <!-- We should have a column break after this section. -->
<tbody><tr><td style="height: 100px; width: 50px; break-before: column;"></td></tr></tbody>
</table>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html Normal file
View file

@ -0,0 +1,10 @@
<!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=1353998">
<div style="columns:3; column-fill:auto; height:100px;">
<div style="height:70px;"></div>
<div style="display:table; border-bottom:40px solid;">
<div></div>
<div style="display:table-footer-group; break-inside:avoid;"></div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-break/table/break-before-second-row.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
<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-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:green;">
<div style="height:40px;"></div>
<div style="position:relative; z-index:-1; display:table; border-spacing:0 20px; width:100%; background:red;">
<div style="display:table-row;">
<br>
</div>
<div style="display:table-row;">
<div style="height:80px; background:red;">
<br>
</div>
</div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/break-before-table-cell-child.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;">
<div style="background: green; height: 100px;"></div>
<div style="background: green; height: 100px; width: 100%; display: table; break-before: avoid;">
<div style="display: table-cell;"></div>
<div style="display: table-cell;">
<div style="break-before: column;"></div> <!-- Should be propagated to the outer table. -->
</div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/break-before-table-cell.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;">
<div style="background: green; height: 100px;"></div>
<div style="background: green; height: 100px; width: 100%; display: table; break-before: avoid;">
<div style="display: table-cell;"></div>
<div style="display: table-cell; break-before: column;"></div> <!-- Should be propagated to the outer table. -->
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-break/table/break-inside-cell-000.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
<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-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;">
<div style="height:40px; background:green;"></div>
<div style="display:table; width:100%; background:red;">
<div style="display:table-cell; vertical-align:top; background:green;">
<br>
</div>
<div style="display:table-cell; vertical-align:top; background:green;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>

32
tests/wpt/web-platform-tests/css/css-break/table/break-inside-cell-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
<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-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;">
<div style="display:table; width:100%; background:red;">
<div style="display:table-row;">
<div style="display:table-cell; vertical-align:top; background:green;">
<br>
<br>
</div>
<div style="display:table-cell; vertical-align:top; background:green;"></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; vertical-align:top; background:green;">
<br>
</div>
<div style="display:table-cell; vertical-align:top; background:green;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>

8
tests/wpt/web-platform-tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html Normal file
View file

@ -0,0 +1,8 @@
<!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=1353558">
<div style="columns:2; column-fill:auto; line-height:20px; height:42px;">
<div style="display:table-caption; margin-bottom:10px;">
<br><br>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/caption-margin-001.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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="height:50px; background:green;"></div>
<div style="display:table-caption; margin-top:-30px;">
<div style="width:50px;">
<div style="height:30px;"></div>
<div style="height:150px; background:green;"></div>
</div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/table/caption-margin-002.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:150px;">
<div style="height:100px; background:green;"></div>
<div style="display:table;">
<div style="display:table-caption;"></div>
<!-- We want a break opportunity before the second caption inside the
table, which is why we need another empty caption before it. -->
<div style="display:table-caption; margin-top:200px; contain:size; width:50px; height:100px; background:green;"></div>
</div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/caption-margin-003.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:table;">
<div style="display:table-caption; margin-bottom:20px; width:50px; height:50px; background:green;"></div>
<div style="margin-top:-20px; width:50px; height:150px; background:green;"></div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/caption-margin-004.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:150px;">
<div style="display:table-caption; caption-side:bottom; margin-bottom:50px; width:50px; height:100px; background:green;"></div>
<div style="height:100px; background:green;"></div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-break/table/dynamic-caption-child-change-001.html Normal file
View file

@ -0,0 +1,19 @@
<!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=1379473">
<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; height:500px;">
<div style="display:table-caption; overflow:hidden;">
<span>
<div style="display:inline-block; width:100px; height:100px; background:red;">
<div id="target" style="width:0px; height:100px; background:green;"></div>
</div>
&nbsp;
</span>
</div>
</div>
<script>
document.body.offsetTop;
target.style.width = "100px";
</script>

18
tests/wpt/web-platform-tests/css/css-break/table/dynamic-caption-child-change-002-crash.html Normal file
View file

@ -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=1379473">
<div style="columns:2; column-fill:auto; height:500px;">
<div style="display:table-caption; overflow:hidden;">
<span>
<div style="display:inline-block;">
<div id="target"></div>
<div style="width:300px; height:150px;"></div>
</div>
x
</span>
</div>
</div>
<script>
document.body.offsetTop;
target.style.display = "none";
</script>

15
tests/wpt/web-platform-tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<p style="position:relative; z-index:1;">Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display:flow-root; margin-top:-20px;">
<div style="position:relative; height:20px; background:white;"></div>
<div style="width:100px; overflow-x:clip;">
<div style="columns:2; gap:0; column-fill:auto; width:200px; height:100px;">
<div style="display:table; margin-top:-20px; border-spacing:0 20px; background:red;">
<div style="width:100px; height:100px; background:green;"></div>
</div>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/overflow-scroll-row.html Normal file
View file

@ -0,0 +1,15 @@
<!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=1365306">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<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; gap:0; width:100px; height:100px; background:red;">
<div style="height:30px; background:green;"></div>
<div style="display:table; width:100%;">
<!-- The overflow property doesn't apply to table rows. -->
<div style="display:table-row; overflow:scroll; height:170px; background:green;">
<br>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/overflow-scroll-section.html Normal file
View file

@ -0,0 +1,15 @@
<!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=1365306">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties">
<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; gap:0; width:100px; height:100px; background:red;">
<div style="height:30px; background:green;"></div>
<div style="display:table; width:100%;">
<!-- The overflow property doesn't apply to table sections. -->
<div style="display:table-row-group; overflow:scroll; height:170px; background:green;">
<br>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; gap:0; width:100px; height:100px; background:red;">
<div style="display:table; width:100%;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="position:relative; top:-5px; left:-5px; contain:size; width:50px; height:20px;">
<div style="position:absolute; top:5px; left:5px; width:50px; height:20px; background:green;"></div>
</div>
</div>
<div style="height:160px; background:green;"></div>
</div>
</div>

4
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>The word PASS should be seen <em>once</em> below.</p>
PASS

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/abspos-uncontained-text.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<link rel="match" href="abspos-uncontained-text-ref.html">
<p>The word PASS should be seen <em>once</em> below.</p>
<div style="columns:4; column-fill:auto; gap:0; width:100px; height:100px;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px;">
<div style="position:absolute;">PASS</div>
</div>
</div>
<div style="width:25px; height:320px;"></div>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; overflow:hidden; background:red;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="position:absolute; width:10px; height:20px; background:green;"></div>
<div style="margin-left:10px; width:25px; height:20px; background:green;"></div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/abspos.tentative.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="position:relative; display:table-header-group; break-inside:avoid;">
<div style="height:20px;">
<div style="position:absolute; width:25px; height:20px; background:green;"></div>
</div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

23
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/balanced-inner-multicol-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be 6 small blue squares below.</p>
<div style="width:300px;">
<div style="float:left; width:50px;">
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
</div>
<div style="float:left; width:50px;">
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
</div>
<div style="float:left; width:50px;">
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
</div>
<div style="float:left; width:50px;">
<div style="margin-top:90px; width:10px; height:10px; background:blue;"></div>
</div>
<div style="float:left; width:50px;">
<div style="margin-top:50px; width:10px; height:10px; background:blue;"></div>
</div>
<div style="float:left; width:50px;">
<div style="margin-top:50px; width:10px; height:10px; background:blue;"></div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/balanced-inner-multicol.html Normal file
View file

@ -0,0 +1,15 @@
<!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=1378657">
<link rel="match" href="balanced-inner-multicol-ref.html">
<p>There should be 6 small blue squares below.</p>
<div style="columns:3; gap:0; column-fill:auto; width:300px; height:100px;">
<div style="columns:2; gap:0; max-height:260px;">
<div style="display:table;">
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:10px; height:10px; background:blue;"></div>
</div>
<div style="height:460px;"></div>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/block-in-inline.tentative.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="position:relative; top:5px; left:5px; display:table-header-group; break-inside:avoid;">
<span style="position:relative; left:5px; top:5px;">
<div style="position:relative; left:-10px; top:-10px; width:100%; height:20px; background:green;"></div>
</span>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-001-crash.html Normal file
View file

@ -0,0 +1,9 @@
<!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=1378661">
<div style="columns:4; height:100px; column-fill:auto;">
<div style="display:table; border-spacing:120px;">
<div style="display:table-header-group; break-inside:avoid;"></div>
<div style="height:140px;"></div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-002-crash.html Normal file
View file

@ -0,0 +1,11 @@
<!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=1378661">
<div style="columns:4; height:100px; column-fill:auto;">
<div style="display:table; border-spacing:120px;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px;"></div>
</div>
<div style="height:140px;"></div>
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-003-crash.html Normal file
View file

@ -0,0 +1,9 @@
<!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=1378661">
<div style="columns:4; height:100px; column-fill:auto;">
<div style="display:table; border-spacing:120px;">
<div style="display:table-header-group; break-inside:avoid;"></div>
<div></div>
</div>
</div>

28
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/break-avoidance-in-bottom-caption.tentative.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1356236">
<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:4; column-fill:auto; gap:0; height:150px;">
<div style="display:table; width:100%;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="height:80px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:80px; background:green;"></div>
<div style="height:50px;"></div>
<div style="height:30px; background:green;"></div>
<div style="display:table-caption; caption-side:bottom;">
<div style="contain:size; height:50px; background:green;"></div>
<div style="contain:size; height:50px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom; break-before:avoid;">
<div style="contain:size; height:50px; background:green;"></div>
</div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/captions.tentative.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-caption; caption-side:top; height:150px; background:green;"></div>
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="width:25px; height:20px; background:green;"></div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom; height:150px; background:green;"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/footer.tentative.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-footer-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/header-after-break.tentative.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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:4; gap:0; column-fill:auto; height:130px;">
<div style="display:table; width:100%; border-top:20px solid green;">
<div style="display:table-caption; height:230px;">
<div style="height:100px; background:green;"></div>
<div style="height:30px;"></div>
<div style="height:100px; background:green;"></div>
</div>
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="height:200px;">
<div style="height:60px; background:green;"></div>
<div style="height:30px;"></div>
<div style="height:80px; background:green;"></div>
</div>
</div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/header-footer.tentative.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="width:25px; height:240px; background:green;"></div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/header.tentative.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:20px; background:green;"></div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

29
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/hit-test-relative-in-transform.tentative.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<style>
body { margin: 0; }
</style>
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
<div style="transform:translateX(30px);">
<div id="table" style="display:table; width:100%;">
<div id="header" style="display:table-header-group; break-inside:avoid;">
<div id="hitme" style="position:relative; left:30px; width:20px; height:20px;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> { assert_equals(document.elementFromPoint(59, 10), header); }, "before first");
test(()=> { assert_equals(document.elementFromPoint(70, 10), hitme); }, "first");
test(()=> { assert_equals(document.elementFromPoint(91, 10), header); }, "after first");
test(()=> { assert_equals(document.elementFromPoint(159, 10), header); }, "before second");
test(()=> { assert_equals(document.elementFromPoint(170, 10), hitme); }, "second");
test(()=> { assert_equals(document.elementFromPoint(181, 10), header); }, "after second");
</script>

27
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/hit-test-relative.tentative.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<style>
body { margin: 0; }
</style>
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
<div id="table" style="display:table; width:100%;">
<div id="header" style="display:table-header-group; break-inside:avoid;">
<div id="hitme" style="position:relative; left:30px; width:20px; height:20px;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> { assert_equals(document.elementFromPoint(29, 10), header); }, "before first");
test(()=> { assert_equals(document.elementFromPoint(40, 10), hitme); }, "first");
test(()=> { assert_equals(document.elementFromPoint(61, 10), header); }, "after first");
test(()=> { assert_equals(document.elementFromPoint(129, 10), header); }, "before second");
test(()=> { assert_equals(document.elementFromPoint(140, 10), hitme); }, "second");
test(()=> { assert_equals(document.elementFromPoint(151, 10), header); }, "after second");
</script>

26
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/hit-test.tentative.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
body { margin: 0; }
</style>
<div style="columns:2; width:200px; gap:0; column-fill:auto; height:100px;">
<div id="table" style="display:table; width:100%;">
<div id="header" style="display:table-header-group; break-inside:avoid;">
<div id="hitme" style="width:20px; height:20px;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
<div style="display:table-row; break-inside:avoid;">
<div style="height:60px; background:blue;"></div>
</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> { assert_equals(document.elementFromPoint(10, 10), hitme); }, "first");
test(()=> { assert_equals(document.elementFromPoint(21, 10), header); }, "after first");
test(()=> { assert_equals(document.elementFromPoint(99, 10), header); }, "before second");
test(()=> { assert_equals(document.elementFromPoint(110, 10), hitme); }, "second");
test(()=> { assert_equals(document.elementFromPoint(121, 10), header); }, "after second");
</script>

38
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/image.tentative.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
<style>
.table {
display: table;
width: 100%;
}
.header {
display: table-header-group;
break-inside: avoid;
}
.filler {
display: table-row;
break-inside: avoid;
height: 350px;
}
img {
width: 100%;
height: 100px;
}
</style>
<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:4; gap:0; column-fill:auto; height:500px;">
<div class="table">
<div class="header">
<!-- The image src is a 1x1 green pixel. -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII=">
</div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
</div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/inline-block.tentative.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="display:inline-block; vertical-align:top; width:100%; height:20px; background:green;"></div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/multicol.tentative.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; column-fill:auto; gap:0; width:100px; height:100px; background:red;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="columns:5; height:20px; gap:0; background:red;">
<div style="height:100px; background:green;"></div>
</div>
</div>
<div style="width:25px; height:320px; background:green;"></div>
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/multiple-row-groups.tentative.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; background:red;">
<div style="display:table; width:100%;">
<div style="display:table-footer-group; break-inside:avoid;">
<div style="height:10px; background:green;"></div>
</div>
<div style="display:table-row-group;">
<div style="height:150px; background:green;"></div>
</div>
<div style="display:table-row-group;">
<div style="height:20px; background:green;"></div>
</div>
<div style="display:table-row-group;">
<div style="height:90px; background:green;"></div>
</div>
<div style="display:table-row-group;">
<div style="height:100px; background:green;"></div>
</div>
</div>
</div>

33
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/nested-repeated-header-crash.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336683">
<style>
thead { break-inside: avoid; }
td { padding: 0; }
table { border-spacing: 0; }
</style>
<p>PASS if no freeze.</p>
<div style="columns:2; column-fill:auto; height:700px;">
<table>
<thead>
<tr>
<td>
<div style="columns:2; column-fill:auto; height:120px; background:yellow;">
<table>
<thead>
<tr>
<td>
<div style="width:50px; height:20px; background:hotpink;"></div>
</td>
</tr>
</thead>
<tr><td style="height:100px;"></td></tr>
<tr><td style="height:100px;"></td></tr>
</table>
</div>
</td>
</tr>
</thead>
<tr><td style="height:400px; background:blue;"></td></tr>
<tr><td style="height:400px; background:orange;"></td></tr>
</table>
</div>

19
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/repeated-header-border-spacing.tentative.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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; background:red;">
<div style="position:absolute; width:25px; height:10px; background:green;"></div>
<div style="display:table; width:100%; border-spacing:0 10px;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="height:10px;">
<div style="height:20px; background:green;"></div>
</div>
</div>
<div style="display:table-row-group;">
<div style="height:310px; background:green;"></div>
</div>
</div>
</div>

105
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/special-elements-crash.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<style>
body {
margin: 0;
}
.table {
display: table;
width: 100%;
}
.header {
display: table-header-group;
break-inside: avoid;
}
.filler {
display: table-row;
break-inside: avoid;
height: 2600px;
}
.header > * {
/* Don't make stuff too tall. We want everything (in the header) to be
within the viewport. */
height: 10px;
}
</style>
<div style="columns:3; column-fill:auto; width:600px; height:5000px;">
<div class="table">
<div class="header">
<input type="text" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<input type="submit" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
<input type="radio">
<input type="checkbox">
<input type="date">
<input type="range">
<input type="number">
<input type="color">
<input type="password">
<canvas id="canvas" style="width:40px; height:40px;"></canvas>
<iframe src="data:text/html,<div style='position:absolute; height:200px;'>x</div>" style="width:100px; height:40px;"></iframe>
<div style="overflow:scroll; width:100px; height:30px;">
<div style="height:200px;"></div>
</div>
<select size="0"><option>xxx</option></select>
<select size="5"><option>xxx</option></select>
<svg style="width:100px; height:30px;">
<circle cx="20" cy="15" r="7" fill="hotpink"/>
</svg>
<textarea style="width:50px; height:30px;">
xxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxx
</textarea>
<video style="width:100px; height:50px;" controls></video>
<video style="width:100px; height:50px;"></video>
<meter></meter>
<button>xxxxxx</button>
<fieldset><legend>epic</legend></fieldset>
<!-- The image src is a 1x1 green pixel. -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII=">
</div>
<div class="filler"></div>
<div class="filler"></div>
<div class="filler"></div>
</div>
</div>
<script>
var ctx = canvas.getContext('2d');
ctx.fillStyle = "hotpink";
ctx.fillRect(0, 0, 50, 50);
function paintDone() {
return new Promise(function(resolve) {
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
resolve();
});
});
});
}
async function toggleStyles(elements) {
for (const display of ['block', 'inline-block', 'inline']) {
for (const position of ['static', 'relative']) {
for (const cssfloat of ['none', 'left']) {
for (var elm of elements) {
elm.style.display = display;
elm.style.position = position;
elm.style.cssFloat = cssfloat;
}
await paintDone();
for (var elm of elements) {
var rect = elm.getClientRects()[0];
var x = rect.left;
var y = rect.top;
x += 2;
y += 2;
document.elementFromPoint(x, y);
document.elementFromPoint(x + 200, y);
document.elementFromPoint(x + 400, y);
}
}
}
}
}
toggleStyles(document.querySelectorAll(".header > *"));
</script>

17
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html Normal file
View file

@ -0,0 +1,17 @@
<!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=1378576">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<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="display:flow-root; width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; gap:0; margin-top:-20px; height:100px;">
<div style="display:table; width:100%;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px;"></div>
</div>
<div style="contain:size; height:100px; background:green;"></div>
<div style="contain:size; height:100px; background:green;"></div>
</div>
</div>
</div>

17
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be three blue squares and three hotpink ones.</p>
<div style="width:300px;">
<div style="float:left; width:100px;">
<div style="width:20px; height:20px; background:blue;"></div>
<div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="float:left; width:100px;">
<div style="width:20px; height:20px; background:blue;"></div>
<div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="float:left; width:100px;">
<div style="width:20px; height:20px; background:blue;"></div>
<div style="margin-top:10px; width:20px; height:20px; background:hotpink;"></div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html Normal file
View file

@ -0,0 +1,20 @@
<!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=1378294">
<link rel="match" href="variable-fragmentainer-size-001-ref.html">
<p>There should be three blue squares and three hotpink ones.</p>
<!-- The first two inner fragmentainers are tall enough to allow a 20px tall
table header / footer, but the last one isn't. -->
<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;">
<div style="columns:1; column-fill:auto; height:250px;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:130px;"></div>
</div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be one blue square and one hotpink one.</p>
<div style="width:300px;">
<div style="float:left; width:100px;">
<div style="margin-top:50px; width:20px; height:20px; background:blue;"></div>
</div>
<div style="float:left; width:100px; height:100px;"></div>
<div style="float:left; width:100px;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
</div>

21
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html Normal file
View file

@ -0,0 +1,21 @@
<!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=1378294">
<link rel="match" href="variable-fragmentainer-size-002-ref.html">
<p>There should be one blue square and one hotpink one.</p>
<!-- The first inner fragmentainer isn't tall enough to allow a 20px tall table
header / footer, but the two other fragmentainers are. -->
<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;">
<div style="height:50px;"></div>
<div style="columns:1; column-fill:auto; height:250px;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:130px;"></div>
</div>
</div>
</div>

23
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html Normal file
View file

@ -0,0 +1,23 @@
<!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=1378294">
<!-- All fragmentainers but the first just have room for the repeated headers
and footers, and no room for regular, unrepeated, stuff. We should still
fit 1px of unrepeated content in every fragmentainer, because that should
be a sensible way of interpretating
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
assumed to have a minimum block size of 1px"). -->
<div style="margin:100px; columns:4; column-fill:auto; height:40px; background:yellow;">
<div style="margin-bottom:-60px;"></div>
<div style="columns:1; column-fill:auto; background:lime;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:100px; background:black;"></div>
</div>
</div>
</div>

22
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html Normal file
View file

@ -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=1378294">
<!-- Only the first fragmentainer actually has room for repeated headers and
footers. We should still fit 1px of unrepeated content in every
fragmentainer, because that should be a sensible way of interpretating
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
assumed to have a minimum block size of 1px"). -->
<div style="margin:100px; columns:4; column-fill:auto; height:30px; background:yellow;">
<div style="margin-bottom:-60px;"></div>
<div style="columns:1; column-fill:auto; background:lime;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:100px; background:black;"></div>
</div>
</div>
</div>

22
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html Normal file
View file

@ -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=1378294">
<!-- Only the first fragmentainer actually has room for repeated headers and
footers. We should still fit 1px of unrepeated content in every
fragmentainer, because that should be a sensible way of interpretating
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
assumed to have a minimum block size of 1px"). -->
<div style="margin:100px; columns:4; column-fill:auto; height:20px; background:yellow;">
<div style="margin-bottom:-60px;"></div>
<div style="columns:1; column-fill:auto; background:lime;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:100px; background:black;"></div>
</div>
</div>
</div>

22
tests/wpt/web-platform-tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html Normal file
View file

@ -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=1378294">
<!-- Only the first fragmentainer actually has room for repeated headers and
footers. We should still fit 1px of unrepeated content in every
fragmentainer, because that should be a sensible way of interpretating
https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are
assumed to have a minimum block size of 1px"). -->
<div style="margin:100px; columns:4; column-fill:auto; height:10px; background:yellow;">
<div style="margin-bottom:-60px;"></div>
<div style="columns:1; column-fill:auto; background:lime;">
<div style="display:table;">
<div style="display:table-header-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:blue;"></div>
</div>
<div style="display:table-footer-group; break-inside:avoid;">
<div style="width:20px; height:20px; background:hotpink;"></div>
</div>
<div style="height:100px; background:black;"></div>
</div>
</div>
</div>

24
tests/wpt/web-platform-tests/css/css-break/table/section-with-overflow-000.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
<style>
.halfsquare {
margin: -10px; /* Cover the border-spacing. */
width: 50px;
height: 100px;
background: green;
}
</style>
<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-gap:0; column-fill:auto; width:100px; height:200px;">
<div style="display:table; border-spacing:10px; background:red;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:50px;">
<div class="halfsquare"></div>
<div style="height:120px;"></div>
<div class="halfsquare" style="position:relative; z-index:-1;"></div>
</div>
</div>
</div>
</div>

22
tests/wpt/web-platform-tests/css/css-break/table/section-with-overflow-001.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
<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-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="display:table; width:100%;">
<div style="display:table-footer-group;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:30px; background:green;"></div>
</div>
</div>
<div style="display:table-row-group;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:40px; background:green;">
<div style="height:70px;"></div>
<div style="height:130px; background:green;"></div>
</div>
</div>
</div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-break/table/section-with-overflow-002.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
<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; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="display:table; width:100%;">
<div style="display:table-caption; caption-side:bottom;">
<div style="width:25px; height:40px; background:green;">
</div>
</div>
<div style="display:table-footer-group;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:240px;"></div>
</div>
</div>
<div style="display:table-caption;">
<div style="width:25px; height:40px; background:green;">
<div style="height:220px;"></div>
<div style="height:60px; background:green;"></div>
</div>
</div>
<div style="display:table-row-group;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:40px; background:green;">
<div style="height:40px;"></div>
<div style="height:100px; background:green;"></div>
</div>
</div>
</div>
<div style="display:table-header-group;">
<div style="display:table-cell; vertical-align:top;">
<div style="height:40px; background:green;">
<div style="height:240px;"></div>
<div style="height:80px; background:green;"></div>
</div>
</div>
</div>
</div>
</div>

42
tests/wpt/web-platform-tests/css/css-break/table/sections-and-captions-mixed-order-ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
.fakecolumn {
float: left;
width: 50px;
height: 100px;
background: green;
}
</style>
<p>There should be four columns with the numbers from 1 to 20 in ascending
order. No red should be seen.</p>
<div style="width:200px; line-height:20px;">
<div class="fakecolumn">
1<br>
2<br>
3<br>
4<br>
5<br>
</div>
<div class="fakecolumn">
6<br>
7<br>
8<br>
9<br>
10<br>
</div>
<div class="fakecolumn">
11<br>
12<br>
13<br>
14<br>
15<br>
</div>
<div class="fakecolumn">
16<br>
17<br>
18<br>
19<br>
20<br>
</div>
</div>

25
tests/wpt/web-platform-tests/css/css-break/table/sections-and-captions-mixed-order.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
<style>
#table > div {
background: green;
}
</style>
<link rel="match" href="sections-and-captions-mixed-order-ref.html">
<p>There should be four columns with the numbers from 1 to 20 in ascending
order. No red should be seen.</p>
<div style="columns:4; column-gap:0; column-fill:auto; width:200px; line-height:20px; height:100px; orphans:1; widows:1; background:red;">
<div id="table" style="display:table; width:100%;">
<div style="display:table-caption; caption-side:bottom;">14</div>
<div style="display:table-caption;">1</div>
<div style="display:table-footer-group;">8<br>9<br>10<br>11<br>12<br>13</div>
<div style="display:table-row-group;">4</div>
<div style="display:table-row-group;">5<br>6</div>
<div style="display:table-footer-group;">7</div>
<div style="display:table-header-group;">3</div>
<div style="display:table-caption; caption-side:bottom;">15<br>16<br>17<br>18<br>19<br>20</div>
<div style="display:table-caption;">2</div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-001.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:table; height:400px; width:100%; background:red;">
<div style="height:400px; background:green;"></div>
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-002.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; height:400px; width:100%; background:green;">
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-003.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; height:300px; width:100%; background:green;">
<div style="display:table-caption; height:100px; background:green;"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-004.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; height:300px; width:100%; background:green;">
<div style="display:table-caption; caption-side:bottom; height:100px; background:green;"></div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-005.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; height:200px; width:100%; background:green;">
<div style="display:table-caption; caption-side:top; height:100px; background:green;"></div>
<div style="display:table-caption; caption-side:bottom; height:100px; background:green;"></div>
</div>
</div>

11
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-006.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; height:300px; width:100%; background:green;">
<div style="display:table-caption; caption-side:top; height:50px; background:green;"></div>
<div style="display:table-caption; caption-side:bottom; height:50px; background:green;"></div>
</div>
</div>

8
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-007-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be four columns. The first one should be yellow, the three
others should be cyan. No red should be seen.</p>
<div style="float:left; width:25px; height:100px; margin-right:10px; background:yellow;"></div>
<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div>
<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div>
<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div>

16
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-007.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/">
<link rel="match" href="specified-block-size-007-ref.html">
<p>There should be four columns. The first one should be yellow, the three
others should be cyan. No red should be seen.</p>
<div style="columns:4; gap:10px; column-fill:auto; width:130px; height:100px;">
<div style="display:table; height:400px; width:100%; background:red;">
<div style="display:table-row; background:yellow;">
<div style="height:1px;"></div>
</div>
<div style="display:table-row; background:cyan;">
<div style="height:3px;"></div>
</div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/specified-block-size-008.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:table; width:100%; height:80px; background:green;">
<div style="display:table-caption; height:120px; background:green;"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/table-border-000.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; border:10px green; border-style:solid none; width:100%; background:red;">
<div style="height:380px; background:green;"></div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-break/table/table-border-001.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:3; gap:0; column-fill:auto; width:300px; height:100px; margin-left:-100px;">
<div style="display:table; border:solid green; border-width:10px 0; width:100%; background:red;">
<div style="display:table-caption;">
<div style="height:100px;"></div>
<div style="height:20px; background:green;"></div>
</div>
<div>
<div style="height:40px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom;">
<div style="height:20px; background:green;"></div>
<div style="height:100px;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/table/table-border-002.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:table; border:solid green; border-width:10px 0; width:100%;">
<div style="display:table-caption;">
<div style="height:50px; background:green;"></div>
</div>
<div>
<div style="height:80px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom;">
<div style="height:50px; background:green;"></div>
</div>
</div>
</div>

18
tests/wpt/web-platform-tests/css/css-break/table/table-border-003.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="display:table; border:solid green; border-width:10px 0; width:100%;">
<div style="display:table-caption;">
<div style="height:150px; background:green;"></div>
</div>
<div>
<div style="height:180px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom;">
<div style="height:150px; background:green;"></div>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/table-border-004.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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; background:red;">
<div style="display:table; border:solid green; border-width:20px 0; width:100%;">
<div style="display:table-caption;">
<div style="height:110px; background:green;"></div>
</div>
<div style="display:table-caption; caption-side:bottom;">
<div style="height:250px; background:green;"></div>
</div>
</div>
</div>

17
tests/wpt/web-platform-tests/css/css-break/table/table-border-005.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:150px;">
<div style="display:table; border-top:30px solid red; width:100%;">
<div style="display:table-caption;">
<div style="height:100px; background:green;"></div>
</div>
<div style="contain:size; height:70px;">
<div style="margin-top:-30px; height:100px; background:green;"></div>
</div>
</div>
</div>
</div>

17
tests/wpt/web-platform-tests/css/css-break/table/table-border-006.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<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:170px;">
<div style="display:table; width:100%; border-bottom:30px solid green;">
<div style="break-inside:avoid; display:table-row;">
<div style="height:100px; background:green;"></div>
</div>
<div style="break-inside:avoid; display:table-row;">
<div style="height:70px; background:green;"></div>
</div>
</div>
</div>
</div>

6
tests/wpt/web-platform-tests/css/css-break/table/table-border-007-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<p>There should be a pink table with a black border. The table should be split
into two columns.</p>
<div style="float:left; border:10px solid; border-bottom:none; width:50px; height:90px; margin-right:30px; background:pink;"></div>
<div style="float:left; border:10px solid; border-top:none; width:50px; height:90px; background:pink;"></div>

9
tests/wpt/web-platform-tests/css/css-break/table/table-border-007.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<link rel="match" href="table-border-007-ref.html">
<p>There should be a pink table with a black border. The table should be split
into two columns.</p>
<div style="columns:2; gap:0; column-fill:auto; width:200px; height:100px;">
<div style="display:table; border:10px solid; height:180px; width:50px; background:pink;"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-break/table/table-border-008-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
.fragment {
float: left;
width: 50px;
border: 10px solid;
background: pink;
}
</style>
<p>There should be a pink table box with a black border. The table box should be
split into three columns.</p>
<div class="fragment" style="height:40px; margin-left:100px; margin-top:50px; border-bottom:none;"></div>
<div class="fragment" style="height:100px; margin-left:30px; border-top:none; border-bottom:none;"></div>
<div class="fragment" style="height:40px; margin-left:30px; border-top:none;"></div>

12
tests/wpt/web-platform-tests/css/css-break/table/table-border-008.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<link rel="match" href="table-border-008-ref.html">
<p>There should be a pink table box with a black border. The table box should be
split into three columns.</p>
<div style="columns:6; gap:0; column-fill:auto; width:600px; height:100px;">
<div style="display:table; border:10px solid; height:180px; width:50px; background:pink;">
<div style="display:table-caption; caption-side:top; height:150px;"></div>
<div style="display:table-caption; caption-side:bottom; height:150px;"></div>
</div>
</div>

7
tests/wpt/web-platform-tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<p>Check that a table caption at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="margin-left:15em; width:10em; line-height:2em; text-align:center;">
PASS<br>
<div style="height:2em; background:black;"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/table-caption-and-cells-fixed-width.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421">
<link rel="match" href="table-caption-and-cells-fixed-width-ref.html">
<p>Check that a table caption at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; width:30em; height:9em;">
<div style="height:8em;"></div>
<table style="height:2em; width:10em; background:black;" cellspacing="0" cellpadding="0">
<caption>PASS</caption>
<tr>
<td></td>
</tr>
</table>
</div>

7
tests/wpt/web-platform-tests/css/css-break/table/table-caption-and-cells-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<p>Check that a table caption at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="margin-left:50%; width:10em; line-height:2em; text-align:center;">
PASS<br>
<div style="height:2em; background:black;"></div>
</div>

14
tests/wpt/web-platform-tests/css/css-break/table/table-caption-and-cells.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421">
<link rel="match" href="table-caption-and-cells-ref.html">
<p>Check that a table caption at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; height:9em;">
<div style="height:8em;"></div>
<table style="width:10em; height:2em; background:black;" cellspacing="0" cellpadding="0">
<caption>PASS</caption>
<tr>
<td></td>
</tr>
</table>
</div>

6
tests/wpt/web-platform-tests/css/css-break/table/table-caption-with-block-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<p>Check that a table caption with a block at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="margin-left:20em; line-height:2em;">
PASS
</div>

13
tests/wpt/web-platform-tests/css/css-break/table/table-caption-with-block.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421">
<link rel="match" href="table-caption-with-block-ref.html">
<p>Check that a table caption with a block at a column boundary is properly pushed to the next column.</p>
<p>The word "PASS" should be seen below, fully visible and unbroken.</p>
<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; width:40em; height:3em;">
<div style="height:2em;"></div>
<table cellspacing="0" cellpadding="0">
<caption>
<div>PASS</div>
</caption>
</table>
</div>

10
tests/wpt/web-platform-tests/css/css-break/table/table-cell-expansion-001.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;">
<div style="display: table-cell; background: green;">
<div style="height: 70px; width: 50px; break-inside: avoid;"></div>
<div style="height: 100px; width: 50px; break-inside: avoid;"></div>
</div>
</div>

9
tests/wpt/web-platform-tests/css/css-break/table/table-cell-expansion-002.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#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: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;">
<div style="display: table-cell; background: green; height: 200px;">
<div style="width: 50px; height: 200%;"></div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show more