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/repeated-section | |
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/repeated-section')
36 files changed, 762 insertions, 0 deletions
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> |