diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-break/table | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-break/table')
149 files changed, 2948 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html b/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html new file mode 100644 index 0000000000..67588f28b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/border-spacing.html b/testing/web-platform/tests/css/css-break/table/border-spacing.html new file mode 100644 index 0000000000..fc5e87e35d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/border-spacing.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html b/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html new file mode 100644 index 0000000000..e9c567d3b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html b/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html new file mode 100644 index 0000000000..60e0924892 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html b/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html new file mode 100644 index 0000000000..8f7e1ba1f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html new file mode 100644 index 0000000000..6dc765c82a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html new file mode 100644 index 0000000000..25c4496e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html new file mode 100644 index 0000000000..e09eaccfa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html new file mode 100644 index 0000000000..e8eb516fec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html new file mode 100644 index 0000000000..a9d53e2455 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html new file mode 100644 index 0000000000..b8dc0f4144 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html new file mode 100644 index 0000000000..4429edb2c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html new file mode 100644 index 0000000000..6250ea7e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html b/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html new file mode 100644 index 0000000000..1f10eb59f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html b/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html new file mode 100644 index 0000000000..6c413caa7e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html b/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html new file mode 100644 index 0000000000..b277001f4d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-second-row.html b/testing/web-platform/tests/css/css-break/table/break-before-second-row.html new file mode 100644 index 0000000000..3a8d307aa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-second-row.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html b/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html new file mode 100644 index 0000000000..3f07edf9ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html b/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html new file mode 100644 index 0000000000..1d50080f76 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html b/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html new file mode 100644 index 0000000000..2982eed1e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html b/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html new file mode 100644 index 0000000000..cd55f46889 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html b/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html new file mode 100644 index 0000000000..edca663567 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-001.html b/testing/web-platform/tests/css/css-break/table/caption-margin-001.html new file mode 100644 index 0000000000..cb2746ef15 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-002.html b/testing/web-platform/tests/css/css-break/table/caption-margin-002.html new file mode 100644 index 0000000000..3bb06bde1d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-003.html b/testing/web-platform/tests/css/css-break/table/caption-margin-003.html new file mode 100644 index 0000000000..e591c9e058 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-004.html b/testing/web-platform/tests/css/css-break/table/caption-margin-004.html new file mode 100644 index 0000000000..5c70c70728 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html new file mode 100644 index 0000000000..c57f412016 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html @@ -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> + + </span> + </div> +</div> +<script> + document.body.offsetTop; + target.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html new file mode 100644 index 0000000000..983f8bb95b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=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> diff --git a/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html b/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html new file mode 100644 index 0000000000..2e0540d745 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html b/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html new file mode 100644 index 0000000000..8ed379e5dd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html b/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html new file mode 100644 index 0000000000..62b3071ae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html new file mode 100644 index 0000000000..6ec70d030d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html new file mode 100644 index 0000000000..a7c2eeb5b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html @@ -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 diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html new file mode 100644 index 0000000000..e0485816bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html new file mode 100644 index 0000000000..d8b84ce72e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html new file mode 100644 index 0000000000..a7297f1dd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol-ref.html new file mode 100644 index 0000000000..ab2dcebc41 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol.html b/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol.html new file mode 100644 index 0000000000..78340661ed --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/block-in-inline.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/block-in-inline.tentative.html new file mode 100644 index 0000000000..1a94c697f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/block-in-inline.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-001-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-001-crash.html new file mode 100644 index 0000000000..dc87e5dd4f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-001-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-002-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-002-crash.html new file mode 100644 index 0000000000..778c1c61c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-002-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-003-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-003-crash.html new file mode 100644 index 0000000000..ce7a13282b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-003-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/break-avoidance-in-bottom-caption.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/break-avoidance-in-bottom-caption.tentative.html new file mode 100644 index 0000000000..fe676fd0c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/break-avoidance-in-bottom-caption.tentative.html @@ -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> + diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/captions.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/captions.tentative.html new file mode 100644 index 0000000000..1f28d56802 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/captions.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/footer.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/footer.tentative.html new file mode 100644 index 0000000000..8789ef2915 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/footer.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/header-after-break.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/header-after-break.tentative.html new file mode 100644 index 0000000000..6a5abc011f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/header-after-break.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/header-footer.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/header-footer.tentative.html new file mode 100644 index 0000000000..7a1e956a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/header-footer.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/header.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/header.tentative.html new file mode 100644 index 0000000000..6f4ad01097 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/header.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative-in-transform.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative-in-transform.tentative.html new file mode 100644 index 0000000000..43a36f1853 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative-in-transform.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative.tentative.html new file mode 100644 index 0000000000..348bb0dbc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test.tentative.html new file mode 100644 index 0000000000..9b462887c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/hit-test.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/image.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/image.tentative.html new file mode 100644 index 0000000000..72fea010d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/image.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/inline-block.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/inline-block.tentative.html new file mode 100644 index 0000000000..6dee47e375 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/inline-block.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/multicol.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/multicol.tentative.html new file mode 100644 index 0000000000..6dcd51bfe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/multicol.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/multiple-row-groups.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/multiple-row-groups.tentative.html new file mode 100644 index 0000000000..96e6173249 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/multiple-row-groups.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/nested-repeated-header-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/nested-repeated-header-crash.html new file mode 100644 index 0000000000..1dffcf821a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/nested-repeated-header-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-header-border-spacing.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-header-border-spacing.tentative.html new file mode 100644 index 0000000000..7471c342a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-header-border-spacing.tentative.html @@ -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> + diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html new file mode 100644 index 0000000000..469e53460e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html new file mode 100644 index 0000000000..8ded5f5f17 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html new file mode 100644 index 0000000000..bea1ace1c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html new file mode 100644 index 0000000000..f75a8cf216 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html new file mode 100644 index 0000000000..b457b1f7ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html new file mode 100644 index 0000000000..c3aceac5ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html new file mode 100644 index 0000000000..90834c806b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html new file mode 100644 index 0000000000..9c4699da93 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html new file mode 100644 index 0000000000..b17d0cc810 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=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> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html new file mode 100644 index 0000000000..1345c6eca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=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> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html new file mode 100644 index 0000000000..909052765b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html new file mode 100644 index 0000000000..665f5247ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html new file mode 100644 index 0000000000..c6c63abe0e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html new file mode 100644 index 0000000000..b3265c92c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html new file mode 100644 index 0000000000..67d20e3a46 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html new file mode 100644 index 0000000000..ad235534be --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html new file mode 100644 index 0000000000..9605abe343 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html new file mode 100644 index 0000000000..694ef40e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html new file mode 100644 index 0000000000..ca436aba67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html new file mode 100644 index 0000000000..b1528509de --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html new file mode 100644 index 0000000000..a78af3faf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html new file mode 100644 index 0000000000..28fcfd0a35 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html new file mode 100644 index 0000000000..f342e2a8fa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html new file mode 100644 index 0000000000..6b4cd11637 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-000.html b/testing/web-platform/tests/css/css-break/table/table-border-000.html new file mode 100644 index 0000000000..1ec0efa299 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-000.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-001.html b/testing/web-platform/tests/css/css-break/table/table-border-001.html new file mode 100644 index 0000000000..97e4ba8daf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-002.html b/testing/web-platform/tests/css/css-break/table/table-border-002.html new file mode 100644 index 0000000000..16c2a50395 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-003.html b/testing/web-platform/tests/css/css-break/table/table-border-003.html new file mode 100644 index 0000000000..26b01599ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-004.html b/testing/web-platform/tests/css/css-break/table/table-border-004.html new file mode 100644 index 0000000000..ed8314f1d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-005.html b/testing/web-platform/tests/css/css-break/table/table-border-005.html new file mode 100644 index 0000000000..3f8efe9d0a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-006.html b/testing/web-platform/tests/css/css-break/table/table-border-006.html new file mode 100644 index 0000000000..f0ebf25c08 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html b/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html new file mode 100644 index 0000000000..6f994082e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-007.html b/testing/web-platform/tests/css/css-break/table/table-border-007.html new file mode 100644 index 0000000000..66363cd0ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html b/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html new file mode 100644 index 0000000000..01253d3026 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-008.html b/testing/web-platform/tests/css/css-break/table/table-border-008.html new file mode 100644 index 0000000000..6140df1674 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html new file mode 100644 index 0000000000..c41a4a515a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html new file mode 100644 index 0000000000..11984c3ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html new file mode 100644 index 0000000000..1ca93e64f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html new file mode 100644 index 0000000000..365786f49e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html new file mode 100644 index 0000000000..ca210636a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html b/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html new file mode 100644 index 0000000000..1d3aa3317e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html new file mode 100644 index 0000000000..b10d516787 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html new file mode 100644 index 0000000000..6df44aa763 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html new file mode 100644 index 0000000000..32e12012ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html @@ -0,0 +1,12 @@ +<!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;"> + <table style="border-spacing: 0;"> + <td style="background: green; padding: 0;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html new file mode 100644 index 0000000000..2390e218c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html @@ -0,0 +1,21 @@ +<!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"> +<style> +td { padding: 0; } +</style> +<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;"> + <table style="border-spacing: 0;"> + <tr> + <td><div style="height: 180px;"></div></td> + <td style="background: green;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + <tr> + <td></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html new file mode 100644 index 0000000000..23fcc73e16 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html @@ -0,0 +1,21 @@ +<!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"> +<style> +td { padding: 0; } +</style> +<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;"> + <table style="border-spacing: 0;"> + <tr> + <td><div style="height: 180px;"></div></td> + <td style="background: green;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + <tr> + <td style="height: 20px;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html new file mode 100644 index 0000000000..1028664774 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html @@ -0,0 +1,11 @@ +<!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;"> + <table style="border-spacing: 0;"> + <td style="background: green; padding: 0; writing-mode: vertical-rl;"> + <div style="min-width: 100px; width: 200%; height: 100px;"></div> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html new file mode 100644 index 0000000000..bafe31200d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html @@ -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> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="background: green; border-spacing: 0;"> + <tr> + <td style="padding: 0;"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html new file mode 100644 index 0000000000..7e4cf16970 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html @@ -0,0 +1,23 @@ +<!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"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<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;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 50px;"></div> + <div style="height: 10px; break-before: column;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 90px;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html new file mode 100644 index 0000000000..ec34d0b707 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html @@ -0,0 +1,23 @@ +<!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"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<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;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 50px;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 10px;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html new file mode 100644 index 0000000000..0e6b849c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html @@ -0,0 +1,25 @@ +<!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"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 4; gap: 0; column-fill: balance; height: 100px; width: 100px; background: red;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 25px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 10px; break-before: column;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 90px;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..df7b50c84e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html new file mode 100644 index 0000000000..ea066d1354 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..4c00507249 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to right, lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html new file mode 100644 index 0000000000..ab45d31404 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to right,lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..0fde8bacc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to left, lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html new file mode 100644 index 0000000000..e31d1d4dc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to left,lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html new file mode 100644 index 0000000000..04d643437f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + width: 500px; + height: 100px; + columns: 5; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; height: 150px;"></div> + <div style="height: 35px; border: solid 10px lime; border-bottom-width: 5px; margin-left: 2.5px; margin-right: 2.5px;"></div> + <div style="height: 95px; border: solid black; border-width: 0 10px 5px 15px; margin-right: 2.5px;"> + <div style="border-top: solid lime 5px;"></div> + </div> + <div style="height: 5px; background: black; border-right: solid blue 15px; margin-left: 2.5px;"></div> + <div style="height: 40px; border: solid blue; border-width: 0 15px 10px 10px; margin-left: 2.5px;"></div> + <div style="height: 40px; border: solid blue; border-width: 0 10px 5px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div> + <div style="height: 70px; border: solid blue; border-width: 5px 10px 10px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html new file mode 100644 index 0000000000..0227b571a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-at-boundary-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + width: 500px; + height: 100px; + columns: 5; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; width: 100%;"> + <caption style="background: dodgerblue; height: 150px;"></caption> + <tbody> + <tr style="height: 45px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="height: 100px;"> + <td style="border: solid 10px; border-left-width: 15px;"></td> + </tr> + </tbody> + <tbody> + <tr style="height: 50px;"> + <td style="border: solid blue 10px; border-right-width: 15px;"></td> + </tr> + <tr style="height: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="height: 80px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..1841ff5821 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-top: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-top: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-top: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html new file mode 100644 index 0000000000..60e146296b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..e17497a270 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-left: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-left: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-left: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html new file mode 100644 index 0000000000..d03968ec4d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html new file mode 100644 index 0000000000..2721bc0af0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-right: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-right: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-right: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html new file mode 100644 index 0000000000..6dff501fec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-vrl-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..5830aa5fd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html new file mode 100644 index 0000000000..e2be9ce16c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..5f069ea053 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html new file mode 100644 index 0000000000..b26363056b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..2080a4e450 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html new file mode 100644 index 0000000000..0d83c6c402 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html b/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html new file mode 100644 index 0000000000..363324b225 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1351677"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="position:absolute; column-count:1;"> + <table> + <caption> + <meter style="column-count:1;"></meter> + </caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html b/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html new file mode 100644 index 0000000000..5bdc33b521 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html @@ -0,0 +1,29 @@ +<!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="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> +<div style="columns:3; column-fill:auto; height:70px; background:yellow;"> + <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> + <div id="colgroup" style="display:table-column-group;"> + <div id="col" style="display:table-column;"></div> + </div> + <div id="rowgroup" style="display:table-row-group;"> + <div id="row" style="display:table-row;"> + <div id="cell" style="display:table-cell;"> + <div id="content" style="width:100px; height:100px; background:blue;"></div> + </div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { assert_equals(table.offsetHeight, 120); }, "table"); + test(()=> { assert_equals(colgroup.offsetHeight, 100); }, "colgroup"); + test(()=> { assert_equals(col.offsetHeight, 100); }, "col"); + test(()=> { assert_equals(rowgroup.offsetHeight, 100); }, "rowgroup"); + test(()=> { assert_equals(row.offsetHeight, 100); }, "row"); + test(()=> { assert_equals(cell.offsetHeight, 100); }, "cell"); + test(()=> { assert_equals(content.offsetHeight, 100); }, "content"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html new file mode 100644 index 0000000000..3947dbdada --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr style="border-bottom: 10px solid;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html new file mode 100644 index 0000000000..e5c37cbdcf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table> + <tbody> + <tr style="border-bottom: 10px solid;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html new file mode 100644 index 0000000000..2fd7feb15d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table> + <tbody> + <tr style="padding-bottom: 10px;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..74e99b0143 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html new file mode 100644 index 0000000000..ecc156bd38 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..587b6c1ee4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html new file mode 100644 index 0000000000..f3d32c9df6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..ea81d9bcff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html new file mode 100644 index 0000000000..a74a952b4b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..75b2078c14 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html new file mode 100644 index 0000000000..ff0eda1be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..a2e65520ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html new file mode 100644 index 0000000000..1dbdb212ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..bc860a560f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html new file mode 100644 index 0000000000..d079c35818 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html b/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html new file mode 100644 index 0000000000..1e7ff9b12e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html @@ -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:20px; background:green;"></div> + <div style="display:table; width:100%;"> + <div style="display:table-cell; vertical-align:bottom; padding-bottom:30px;"> + <div style="height:150px; background:green;"></div> + </div> + </div> + <div style="margin-top:-30px; height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html b/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html new file mode 100644 index 0000000000..2b588586bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html @@ -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=1357123"> +<div style="columns:3; column-fill:auto; height:40px;"> + <div style="height:30px;"></div> + <div style="display:table; padding-top:20px; padding-bottom:100px;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html b/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html new file mode 100644 index 0000000000..0a93b64275 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1368054"> +<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 id="mc" style="columns:1; column-fill:auto; width:100px; height:60px; background:red;"> + <div style="display:table; width:100%; border-spacing:40px; background:green;"> + <div style="height:20px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + mc.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html b/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html new file mode 100644 index 0000000000..4feca8344b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html @@ -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=1354141"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:70px;"></div> + <div style="display:table;"> + <div style="height:150px;"></div> + <div style="display:table-footer-group; break-inside:avoid;"></div> + </div> +</div> |