diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-break')
25 files changed, 917 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html new file mode 100644 index 0000000000..ba0372df06 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com" /> +<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P).</p> +<div style="display:grid; grid-template-columns:1fr 1fr; break-before:page;"> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> +</div> +<div style="display:grid; grid-template-columns:1fr 1fr; break-before:page;"> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html new file mode 100644 index 0000000000..5a9e55973d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-print.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com"> +<link rel="help" href="https://issues.chromium.org/issues/327643792"> +<link rel="match" href="./monolithic-overflow-print-ref.html"> +<p style="height: 50vh">Test passes if there is two purple rectangles at the start of both page 2 and 3 when printing the page (Ctrl+P).</p> +<div style="display:grid; grid-template-columns:1fr 1fr;"> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> + <div style="contain:size; height:75vh;"> + <div style="height:75vh; width: 100px; background:purple;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-117.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-117.html new file mode 100644 index 0000000000..886a12acab --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-117.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/issues/40775119"> +<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:200px; height:100px;"> + <div style="height:40px; background:green;"></div> + <div style="columns:2; column-fill:auto; gap:0; height:40px; background:red;"> + <div style="position:relative; height:20px; background:red;"> + <div style="position:absolute; top:0; width:50px; height:40px; background:green;"></div> + </div> + <div style="column-span:all; height:40px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-002-print-ref.html b/testing/web-platform/tests/css/css-break/overflowing-block-002-print-ref.html new file mode 100644 index 0000000000..0322ba04a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-002-print-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-break-3/#parallel-flows"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=563436"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.content { + font: 0.5in/1 Ahem; + color: white; + word-break: break-all; + border: 0.5in solid purple; + margin-right: 2in; +} +</style> + +<!-- The content is printed in two pages. --> +<div class="content">XXXXXXXXXXXX</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-002-print.html b/testing/web-platform/tests/css/css-break/overflowing-block-002-print.html new file mode 100644 index 0000000000..3cba4b421f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-002-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="match" href="overflowing-block-002-print-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-break-3/#parallel-flows"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=563436"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.content { + position: absolute; + font: 0.5in/1 Ahem; + color: white; + word-break: break-all; + border: 0.5in solid purple; + margin-right: 2in; +} +</style> + +<!-- The content is printed in two pages. --> +<div class="content">XXXXXXXXXXXX</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-003-ref.html b/testing/web-platform/tests/css/css-break/overflowing-block-003-ref.html new file mode 100644 index 0000000000..a8f86d1cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-003-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +.multicol { + width: 150px; + height: 50px; + columns: 2; + column-gap: 0; + column-fill: auto; + border: 3px solid black; + margin: 10px; +} +.outer { + width: 50px; + height: 100px; + background: green; +} +</style> + +<p>This test passes if there are two 50x50 green squares in each black box.</p> + +<div class="multicol"> + <div class="outer"></div> +</div> + +<div class="multicol"> + <div class="outer"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-003.html b/testing/web-platform/tests/css/css-break/overflowing-block-003.html new file mode 100644 index 0000000000..786a61a492 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-003.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="match" href="overflowing-block-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-break-3/#parallel-flows"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=563436"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.multicol { + width: 150px; + height: 50px; + columns: 2; + column-gap: 0; + column-fill: auto; + border: 3px solid black; + margin: 10px; +} +.outer { + margin-right: 25px; +} +.inner { + background: green; + color: green; + font: 25px/1 Ahem; + word-break: break-all; +} +</style> + +<p>This test passes if there are two 50x50 green squares in each black box.</p> + +<div class="multicol"> + <div class="outer"> + <div class="inner" style="float: left"> + AAAA BBBB + </div> + </div> +</div> + +<div class="multicol"> + <div class="outer" style="height: 0"> + <div class="inner" style="height: 100px"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print-ref.html new file mode 100644 index 0000000000..d4229ebb87 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + width: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.5in; +} +.td { + border: 0.25in solid orange; +} +.content { + height: 1.5in; + background: gold; +} +</style> + +<div class="table"> + <div class="td"> + <div class="content"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print.html new file mode 100644 index 0000000000..4f2123b648 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001a-print.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-001a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001b-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001b-print.html new file mode 100644 index 0000000000..d445206a2b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001b-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-001a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 3.5in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print-ref.html new file mode 100644 index 0000000000..d7778e340a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + width: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.25in 0.5in; + box-decoration-break: clone; +} +.td { + margin: 0.25in 0; + border: 0.25in solid orange; +} +.content { + height: 2in; + background: gold; +} +</style> + +<div class="table"> + <div class="td"> + <div class="content"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print.html new file mode 100644 index 0000000000..4615270c40 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001c-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-001c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; + box-decoration-break: clone; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 2in; + background: gold; +} +</style> + +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-001d-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001d-print.html new file mode 100644 index 0000000000..ad120c2481 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-001d-print.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-001c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 4in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; + box-decoration-break: clone; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 2in; + background: gold; +} +</style> + +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print-ref.html new file mode 100644 index 0000000000..d7272352a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + width: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.5in; +} +.td { + border: 0.25in solid orange; +} +.content { + height: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<div class="table"> + <div class="td"> + <div class="content"></div> + </div> +</div> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print.html new file mode 100644 index 0000000000..88ea8cd697 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002a-print.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-002a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002b-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002b-print.html new file mode 100644 index 0000000000..97e102e3cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002b-print.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-002a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 3.5in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print-ref.html new file mode 100644 index 0000000000..18c1e0d5a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + width: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.25in 0.5in; + box-decoration-break: clone; +} +.td { + margin: 0.25in 0; + border: 0.25in solid orange; +} +.content { + height: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<div class="table"> + <div class="td"> + <div class="content"></div> + </div> +</div> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print.html new file mode 100644 index 0000000000..29fccdef99 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002c-print.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-002c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; + box-decoration-break: clone; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-002d-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002d-print.html new file mode 100644 index 0000000000..67aa7624b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-002d-print.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-002c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 3.5in; + border-spacing: 0.25in; + border: 0.25in solid black; + padding: 0.25in; + box-decoration-break: clone; +} +td { + vertical-align: top; + padding: 0; + border: 0.25in solid orange; +} +.content { + block-size: 1.5in; + background: gold; +} +</style> + +<div style="height: 0.25in">BEFORE TABLE</div> +<table> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> +</table> +<div style="height: 0.25in">AFTER TABLE</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print-ref.html new file mode 100644 index 0000000000..bf99e5b41e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + inline-size: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.25in; +} +.thead { + block-size: 0.25in; + background: blue; +} +.tbody { + border: 0 solid orange; + margin-block: 0.125in; + background: gold; +} +.tfoot { + block-size: 0.25in; + background: purple; +} +</style> + +<div class="table"> + <!-- Page 1 --> + <div class="thead"></div> + <div class="tbody" style="border-block-start-width: 0.25in; block-size: 0.5in;"></div> + <div class="tfoot"></div> + + <!-- Page 2 --> + <div class="thead"></div> + <div class="tbody" style="block-size: 1.25in;"></div> + <div class="tfoot"></div> + + <!-- Page 3 --> + <div class="thead"></div> + <div class="tbody" style="border-block-end-width: 0.25in; block-size: 0.25in;"></div> + <div class="tfoot"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print.html new file mode 100644 index 0000000000..c6190855b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003a-print.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-003a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.125in; + border: 0.25in solid black; + padding: 0.125in; +} +td { + padding: 0; +} +thead td { + block-size: 0.25in; + background: blue; +} +tbody td { + vertical-align: top; + border: solid orange; + border-width: 0.25in 0; +} +.content { + block-size: 2in; + background: gold; +} +tfoot td { + block-size: 0.25in; + background: purple; +} +</style> + +<table> + <thead> + <tr> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> + <tfoot> + <tr> + <td></td> + </tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003b-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003b-print.html new file mode 100644 index 0000000000..a1d3b21298 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003b-print.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-003a-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 4.25in; + border-spacing: 0.125in; + border: 0.25in solid black; + padding: 0.125in; +} +td { + padding: 0; +} +thead td { + block-size: 0.25in; + background: blue; +} +tbody td { + vertical-align: top; + border: solid orange; + border-width: 0.25in 0; +} +.content { + block-size: 2in; + background: gold; +} +tfoot td { + block-size: 0.25in; + background: purple; +} +</style> + +<table> + <thead> + <tr> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> + <tfoot> + <tr> + <td></td> + </tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print-ref.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print-ref.html new file mode 100644 index 0000000000..50738fbaa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +.table { + inline-size: 3in; + box-sizing: border-box; + border: 0.25in solid black; + padding: 0.125in 0.25in; + box-decoration-break: clone; +} +.thead { + block-size: 0.25in; + background: blue; +} +.tbody { + border: 0 solid orange; + margin-block: 0.125in; + background: gold; +} +.tfoot { + block-size: 0.25in; + background: purple; +} +</style> + +<div class="table"> + <!-- Page 1 --> + <div class="thead" style="margin-block-start: 0.125in;"></div> + <div class="tbody" style="border-block-start-width: 0.25in; block-size: 0.125in;"></div> + <div class="tfoot"></div> + + <!-- Page 2 --> + <div class="thead"></div> + <div class="tbody" style="block-size: 0.5in;"></div> + <div class="tfoot"></div> + + <!-- Page 3 --> + <div class="thead"></div> + <div class="tbody" style="border-block-end-width: 0.25in; block-size: 0.125in;"></div> + <div class="tfoot" style="margin-block-end: 0.125in;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print.html new file mode 100644 index 0000000000..9c4f8d3873 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003c-print.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-003c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + border-spacing: 0.125in; + border: 0.25in solid black; + padding: 0.125in; + box-decoration-break: clone; +} +td { + padding: 0; +} +thead td { + block-size: 0.25in; + background: blue; +} +tbody td { + vertical-align: top; + border: solid orange; + border-width: 0.25in 0; +} +.content { + block-size: 0.75in; + background: gold; +} +tfoot td { + block-size: 0.25in; + background: purple; +} +</style> + +<table> + <thead> + <tr> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> + <tfoot> + <tr> + <td></td> + </tr> + </tfoot> +</table> diff --git a/testing/web-platform/tests/css/css-break/table/table-fragmentation-003d-print.html b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003d-print.html new file mode 100644 index 0000000000..1903a68c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-fragmentation-003d-print.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863421"> +<link rel="match" href="table-fragmentation-003c-print-ref.html"> + +<style> +@page { size: 5in 3in; margin: 0.5in; } +body { margin: 0; } + +table { + inline-size: 3in; + block-size: 3in; + border-spacing: 0.125in; + border: 0.25in solid black; + padding: 0.125in; + box-decoration-break: clone; +} +td { + padding: 0; +} +thead td { + block-size: 0.25in; + background: blue; +} +tbody td { + vertical-align: top; + border: solid orange; + border-width: 0.25in 0; +} +.content { + block-size: 0.75in; + background: gold; +} +tfoot td { + block-size: 0.25in; + background: purple; +} +</style> + +<table> + <thead> + <tr> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td><div class="content"></div></td> + </tr> + </tbody> + <tfoot> + <tr> + <td></td> + </tr> + </tfoot> +</table> |