summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-break/table/repeated-section
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-break/table/repeated-section
parentInitial commit. (diff)
downloadfirefox-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')
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html4
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html14
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/balanced-inner-multicol.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/block-in-inline.tentative.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-001-crash.html9
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-002-crash.html11
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/border-spacing-taller-than-fragmentainer-003-crash.html9
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/break-avoidance-in-bottom-caption.tentative.html28
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/captions.tentative.html18
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/footer.tentative.html13
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/header-after-break.tentative.html24
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/header-footer.tentative.html16
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/header.tentative.html13
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative-in-transform.tentative.html29
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/hit-test-relative.tentative.html27
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/hit-test.tentative.html26
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/image.tentative.html38
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/inline-block.tentative.html13
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/multicol.tentative.html15
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/multiple-row-groups.tentative.html24
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/nested-repeated-header-crash.html33
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/repeated-header-border-spacing.tentative.html19
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html105
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html17
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html17
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html20
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html12
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html21
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html23
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html22
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html22
-rw-r--r--testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html22
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>