diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-break | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-break')
1153 files changed, 28835 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-break/META.yml b/testing/web-platform/tests/css/css-break/META.yml new file mode 100644 index 0000000000..5c3363562a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-break/ +suggested_reviewers: + - mstensho + - rachelandrew diff --git a/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print-ref.html b/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print-ref.html new file mode 100644 index 0000000000..205856035b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +There should only be one page. diff --git a/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print.html b/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print.html new file mode 100644 index 0000000000..4510dd3cbc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-clipped-overflow-print.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<link rel="match" href="abspos-in-clipped-overflow-print-ref.html"> +There should only be one page. +<div style="position:absolute; overflow:clip; width:10px; height:10px;"> + <div style="position:absolute; height:350vh;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-offset-relpos.html b/testing/web-platform/tests/css/css-break/abspos-in-offset-relpos.html new file mode 100644 index 0000000000..b996c36586 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-offset-relpos.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:0;"> + <div style="height:100px;"></div> + <!-- Fill the second column, in a parallel flow (overflow): --> + <div style="height:100px; background:green;"></div> + </div> + <div style="position:relative; top:25px; height:75px; background:red;"> + <!-- Fill the first column: --> + <div style="position:absolute; top:-25px; width:100%; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-000-ref.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-000-ref.html new file mode 100644 index 0000000000..b7013a90ab --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-000-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a purple square below.</p> +<div style="width:100px; height:100px; background:blue;"> + <div style="opacity:0.5;"> + <div style="width:100px; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-000.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-000.html new file mode 100644 index 0000000000..f41c035363 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-000.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="abspos-in-opacity-000-ref.html"> +<p>There should be a purple square below.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;"> + <div style="opacity:0.5;"> + <div style="position:absolute; width:100px; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-001-ref.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-001-ref.html new file mode 100644 index 0000000000..b7013a90ab --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-001-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a purple square below.</p> +<div style="width:100px; height:100px; background:blue;"> + <div style="opacity:0.5;"> + <div style="width:100px; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-001.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-001.html new file mode 100644 index 0000000000..e81c558321 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="abspos-in-opacity-001-ref.html"> +<p>There should be a purple square below.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;"> + <div style="position:relative;"> + <div style="opacity:0.5; height:200px;"> + <div style="position:absolute; width:50px; height:200px; background:red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-002.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-002.html new file mode 100644 index 0000000000..e6d61eacd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-002.html @@ -0,0 +1,12 @@ +<!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=1371426"> +<link rel="match" href="../reference/ref-filled-greenish-100px-square.html"> +<p>Test passes if there is a filled green-ish square and <strong>no red</strong>.</p> +<div style="columns:5; column-fill:auto; gap:0; width:100px; height:100px; background:green;"> + <div style="position:relative; opacity:0.1;"> + <div style="position:absolute; width:100%;"> + <div style="height:500px; background:red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-in-opacity-003.html b/testing/web-platform/tests/css/css-break/abspos-in-opacity-003.html new file mode 100644 index 0000000000..13a1b31add --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-in-opacity-003.html @@ -0,0 +1,13 @@ +<!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=1371426"> +<link rel="match" href="../reference/ref-filled-greenish-100px-square.html"> +<p>Test passes if there is a filled green-ish square and <strong>no red</strong>.</p> +<div style="columns:5; column-fill:auto; gap:0; width:100px; height:100px; background:green;"> + <div style="height:300px;"></div> + <div style="position:relative; opacity:0.1;"> + <div style="position:absolute; top:-300px; width:100%;"> + <div style="height:500px; background:red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-inside-relpos-inside-monolithic.html b/testing/web-platform/tests/css/css-break/abspos-inside-relpos-inside-monolithic.html new file mode 100644 index 0000000000..879097f3fc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-inside-relpos-inside-monolithic.html @@ -0,0 +1,13 @@ +<!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=1336634"> +<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:1; width:100px; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="overflow:hidden;"> + <div style="position:relative; height:60px;"> + <div style="position:absolute; width:100%; height:60px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print-ref.html b/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print-ref.html new file mode 100644 index 0000000000..08f69ef6a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <title>Absolute position frame inside 'overflow: hidden' immediately after a forced page break</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <style> + .inner { + box-sizing: border-box; + width: 100%; + } + .outer { + break-after: page; + width: 100vw; + height: 100vh; + } + html, body { margin: 0; } + </style> + <body> + <div class="outer"> + <div class="inner" style="border: 3px solid blue">111</div> + </div> + <div class="outer"> + <div class="inner" style="border: 3px solid black">222</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print.html b/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print.html new file mode 100644 index 0000000000..12d8a679ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/abspos-overflow-hidden-001-print.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <title>Absolute position frame inside 'overflow: hidden' immediately after a forced page break</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="abspos-overflow-hidden-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#page-break-values"/> + <meta name="assert" content="An abspos box after a forced pagebreak and inside 'overflow:hidden' should be visible on the next page"/> + <style> + .inner { + position: absolute; + box-sizing: border-box; + width: 100%; + } + .outer { + overflow: hidden; + position: relative; + break-after: page; + width: 100vw; + height: 100vh; + } + html, body { margin: 0; } + </style> + <body> + <div class="outer"> + <div class="inner" style="border: 3px solid blue">111</div> + </div> + <div class="outer"> + <div class="inner" style="border: 3px solid black">222</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/animation/break-no-interpolation.html b/testing/web-platform/tests/css/css-break/animation/break-no-interpolation.html new file mode 100644 index 0000000000..8a7bf7a68a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/animation/break-no-interpolation.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'break-after', + from: 'initial', + to: 'avoid' +}); + +test_no_interpolation({ + property: 'break-before', + from: 'initial', + to: 'avoid' +}); + +test_no_interpolation({ + property: 'break-inside', + from: 'initial', + to: 'avoid' +}); +</script> diff --git a/testing/web-platform/tests/css/css-break/animation/orphans-interpolation.html b/testing/web-platform/tests/css/css-break/animation/orphans-interpolation.html new file mode 100644 index 0000000000..704c2737ce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/animation/orphans-interpolation.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>orphans interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans"> +<meta name="assert" content="orphans supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + orphans: 30; +} +.target { + orphans: 10; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'orphans', + from: neutralKeyframe, + to: '20', +}, [ + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.7, expect: '17'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'}, +]); + +test_interpolation({ + property: 'orphans', + from: 'initial', + to: '20', +}, [ + {at: -0.5, expect: '1'}, + {at: 0, expect: '2'}, + {at: 0.3, expect: '7'}, + {at: 0.7, expect: '15'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '29'}, +]); + +test_interpolation({ + property: 'orphans', + from: 'inherit', + to: '20', +}, [ + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.7, expect: '23'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'orphans', + from: 'unset', + to: '20', +}, [ + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.7, expect: '23'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'orphans', + from: '10', + to: '1' +}, [ + {at: -0.5, expect: '15'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '7'}, + {at: 0.7, expect: '4'}, + // Only positive integers are valid + {at: 1, expect: '1'}, + {at: 1.5, expect: '1'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-break/animation/widows-interpolation.html b/testing/web-platform/tests/css/css-break/animation/widows-interpolation.html new file mode 100644 index 0000000000..9db70b74a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/animation/widows-interpolation.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>widows interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans"> +<meta name="assert" content="widows supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + widows: 30; +} +.target { + widows: 10; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'widows', + from: neutralKeyframe, + to: '20', +}, [ + {at: -3, expect: '1'}, + {at: -2.5, expect: '1'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'}, +]); + +test_interpolation({ + property: 'widows', + from: 'initial', + to: '20', +}, [ + {at: -3, expect: '1'}, + {at: -2.5, expect: '1'}, + {at: -0.5, expect: '1'}, + {at: 0, expect: '2'}, + {at: 0.3, expect: '7'}, + {at: 0.6, expect: '13'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '29'}, +]); + +test_interpolation({ + property: 'widows', + from: 'inherit', + to: '20', +}, [ + {at: -3, expect: '60'}, + {at: -2.5, expect: '55'}, + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.6, expect: '24'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'widows', + from: 'unset', + to: '20', +}, [ + {at: -3, expect: '60'}, + {at: -2.5, expect: '55'}, + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.6, expect: '24'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'widows', + from: '10', + to: '20' +}, [ + {at: -3.0, expect: '1'}, + {at: -2.5, expect: '1'}, + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.6, expect: '16'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'} +]); + +test_interpolation({ + property: 'widows', + from: '2', + to: '4' +}, [ + {at: -3.0, expect: '1'}, + {at: -2.5, expect: '1'}, + {at: -0.5, expect: '1'}, + {at: 0, expect: '2'}, + {at: 0.3, expect: '3'}, + {at: 0.6, expect: '3'}, + {at: 1, expect: '4'}, + {at: 1.5, expect: '5'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-break/area-crash.html b/testing/web-platform/tests/css/css-break/area-crash.html new file mode 100644 index 0000000000..d47327cde3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/area-crash.html @@ -0,0 +1,6 @@ +<!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=1279525"> +<div style="columns:2;"> + <area></area> +</div> diff --git a/testing/web-platform/tests/css/css-break/area-in-inline-crash.html b/testing/web-platform/tests/css/css-break/area-in-inline-crash.html new file mode 100644 index 0000000000..d409457b21 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/area-in-inline-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308078"> +<div style="columns:10; column-fill:auto; line-height:20px; height:20px; orphans:1; widows:1;"> + <br> + <br> + <span> + <area></area> + <br> + <br> + <area></area> + <br> + <br> + <area></area> + </span> + <br> + <br> +</div> diff --git a/testing/web-platform/tests/css/css-break/auto-overflow-inside-second-abspos-fragment-crash.html b/testing/web-platform/tests/css/css-break/auto-overflow-inside-second-abspos-fragment-crash.html new file mode 100644 index 0000000000..c4ce36abac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/auto-overflow-inside-second-abspos-fragment-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1282508"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="height:90px;"></div> + <div style="position:relative;"> + <div style="position:absolute;"> + <div style="height:5px;"></div> + <div style="overflow-y:auto; width:10px; height:50px;"> + <div style="height:60px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/avoid-border-break.html b/testing/web-platform/tests/css/css-break/avoid-border-break.html new file mode 100644 index 0000000000..56f47e83c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/avoid-border-break.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="margin-left:-100px; columns:2; column-fill:auto; column-gap:0; width:200px; height:200px;"> + <div style="height:175px;"></div> + <div style="border:30px solid green; box-sizing:border-box; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-attachment-fixed-ref.html b/testing/web-platform/tests/css/css-break/background-attachment-fixed-ref.html new file mode 100644 index 0000000000..344c9d3164 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-attachment-fixed-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +.blue { + position: absolute; + top: 0; + width: 40px; + height: 100px; + background: blue; +} +.green { + position: absolute; + top: 100px; + width: 40px; + height: 100px; + background: green; +} +</style> +<div class="blue" style="left: 30px; top: 30px; height: 70px"></div> +<div class="green" style="left: 30px"></div> +<div class="blue" style="left: 140px"></div> +<div class="green" style="left: 140px"></div> +<div class="blue" style="left: 250px"></div> +<div class="green" style="left: 250px; height: 70px"></div> diff --git a/testing/web-platform/tests/css/css-break/background-attachment-fixed.html b/testing/web-platform/tests/css/css-break/background-attachment-fixed.html new file mode 100644 index 0000000000..003873228d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-attachment-fixed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> +<link rel="match" href="background-attachment-fixed-ref.html"> +<style> +body { + overflow: hidden; + margin: 0; +} +</style> +<div style="height: 300px"></div> +<div style="width: 320px; height: 200px; columns: 3; column-gap: 10px"> + <div style="height: 600px; + border: 20px solid transparent; + box-sizing: border-box; + padding: 10px; + background-size: 200px 200px; + background-image: linear-gradient(blue 50%, green 50%); + background-clip: content-box; + background-attachment: fixed"> + </div> +</div> +<div style="width: 2000px; height: 2000px"></div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + window.scrollTo(0, 300); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-break/background-image-000-ref.html b/testing/web-platform/tests/css/css-break/background-image-000-ref.html new file mode 100644 index 0000000000..bb63020d69 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-000-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + writing-mode: horizontal-tb; + inline-size: 472px; + } + .mc { + display: flow-root; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } + .column { + float: left; + inline-size: 150px; + block-size: 100%; + margin-inline-start: 10px; + } + .column:first-child { + margin-inline-start: 0; + } +</style> +<div class="container"> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left -120px;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) left -240px;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right -120px;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) right -240px;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left 350px;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left 230px;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) left bottom;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right 350px;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right 230px;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) right bottom;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-000.html b/testing/web-platform/tests/css/css-break/background-image-000.html new file mode 100644 index 0000000000..27e78dc21c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-000.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242"> +<link rel="match" href="background-image-000-ref.html"> +<style> + .container { + writing-mode: horizontal-tb; + inline-size: 472px; + } + .mc { + columns: 3; + column-gap: 10px; + column-fill: auto; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } +</style> +<div class="container"> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-001-ref.html b/testing/web-platform/tests/css/css-break/background-image-001-ref.html new file mode 100644 index 0000000000..08fdbfca49 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-001-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + writing-mode: vertical-rl; + inline-size: 472px; + } + .mc { + display: flow-root; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } + .column { + float: left; + inline-size: 150px; + block-size: 100%; + margin-inline-start: 10px; + } + .column:first-child { + margin-inline-start: 0; + } +</style> +<div class="container"> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -230px top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -110px top;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) left top;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 240px top;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) 350px top;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -230px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -110px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) left bottom;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) right bottom;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 240px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) 350px bottom;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-001.html b/testing/web-platform/tests/css/css-break/background-image-001.html new file mode 100644 index 0000000000..aec44ef759 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242"> +<link rel="match" href="background-image-001-ref.html"> +<style> + .container { + writing-mode: vertical-rl; + inline-size: 472px; + } + .mc { + columns: 3; + column-gap: 10px; + column-fill: auto; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } +</style> +<div class="container"> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-002-ref.html b/testing/web-platform/tests/css/css-break/background-image-002-ref.html new file mode 100644 index 0000000000..84853d4cf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-002-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + writing-mode: vertical-lr; + inline-size: 472px; + } + .mc { + display: flow-root; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } + .column { + float: left; + inline-size: 150px; + block-size: 100%; + margin-inline-start: 10px; + } + .column:first-child { + margin-inline-start: 0; + } +</style> +<div class="container"> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -120px top;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) -240px top;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 350px top;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 230px top;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) right top;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) left bottom;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) -120px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) -240px bottom;"></div> + </div> + </div> + <div class="mc"> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 350px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:100%; background:url(../support/cat.png) 230px bottom;"></div> + </div> + <div class="column"> + <div style="block-size:110px; background:url(../support/cat.png) right bottom;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-002.html b/testing/web-platform/tests/css/css-break/background-image-002.html new file mode 100644 index 0000000000..50bf40f8b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242"> +<link rel="match" href="background-image-002-ref.html"> +<style> + .container { + writing-mode: vertical-lr; + inline-size: 472px; + } + .mc { + columns: 3; + column-gap: 10px; + column-fill: auto; + block-size: 120px; + border: 1px solid; + margin-block-end: 20px; + background: yellow; + } +</style> +<div class="container"> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right top;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div> + </div> + <div class="mc"> + <div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/background-image-003.html b/testing/web-platform/tests/css/css-break/background-image-003.html new file mode 100644 index 0000000000..be36d998d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/background-image-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="container" style="columns:5; width:100px; gap:0; column-fill:auto; height:100px; background:red;"> + <div style="height:250px; background:linear-gradient(red 50%, green 50%);"> + <div style="height:500px;"> + <div style="height:125px; background:green;"></div> + <div style="height:125px;"></div> + <div style="height:250px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/become-unfragmented-001.html b/testing/web-platform/tests/css/css-break/become-unfragmented-001.html new file mode 100644 index 0000000000..df104fc494 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/become-unfragmented-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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 id="mc" style="columns:4; column-fill:auto; width:100px; height:25px;"> + <div> + <div style="width:100px; height:100px; background:green;"></div> + </div> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + mc.style.columns = 'auto'; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html new file mode 100644 index 0000000000..6cd5ea07c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-print.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="block-001-wm-vlr-ref.html"> +<meta name="flags" content="paged"> +<meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-200"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-lr; +} +html { block-size: 40vw; } + +.b { + inline-size: 50vh; + block-size: 210vw; + box-sizing: border-box; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; + margin-block-end: -20px; +} +</style> +<body> + <div class="b"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html new file mode 100644 index 0000000000..b131b0e486 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-001-wm-vlr-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<meta name="flags" content="paged"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-lr; +} +html { block-size: 40vw; } + +.b { + box-sizing: border-box; + inline-size: 50vh; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} + +.b1 { + block-size: 100vw; + border-block-end-style: none; +} + +.b2 { + block-size: 100vw; + border-block-start-style: none; + border-block-end-style: none; +} + +.b3 { + block-size: 10vw; + border-block-start-style: none; + margin-block-end: -20px; +} +</style> +<body> + <div class="b b1"></div> + <div class="b b2"></div> + <div class="b b3"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html new file mode 100644 index 0000000000..6e073121c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-print.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="block-001-wm-vrl-ref.html"> +<meta name="flags" content="paged"> +<meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-200"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +html { block-size: 40vw; } + +.b { + inline-size: 50vh; + block-size: 210vw; + box-sizing: border-box; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} +</style> +<body> + <div class="b"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html new file mode 100644 index 0000000000..6fb7e7353c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-001-wm-vrl-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<meta name="flags" content="paged"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +html { block-size: 40vw; } + +.b { + box-sizing: border-box; + inline-size: 50vh; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} + +.b1 { + block-size: 100vw; + border-block-end-style: none; +} + +.b2 { + block-size: 100vw; + border-block-start-style: none; + border-block-end-style: none; +} + +.b3 { + block-size: 10vw; + border-block-start-style: none; + margin-block-end: -20px; +} +</style> +<body> + <div class="b b1"></div> + <div class="b b2"></div> + <div class="b b3"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html new file mode 100644 index 0000000000..99949623c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-print.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="block-002-wm-vlr-ref.html"> +<meta name="flags" content="paged"> +<meta name="fuzzy" content="maxDifference=0-35;totalPixels=0-220"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-lr; +} +html { margin-block-start: 80vw; } +* { box-sizing: border-box; } + +.b { + inline-size: 50vh; + block-size: 130vw; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} + +.b > div { + inline-size: 50vh; + block-size: 150vw; + border: 5px solid grey; + margin-inline-start: 20px; + margin-block-start: -5px; +} + +.after { + inline-size: 60vh; + block-size: 30vw; + margin-block-start: 5vw; + border: 5px solid blue; +} +</style> +<body> + <div class="b"> + <div></div> + </div> + <div class="after"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html new file mode 100644 index 0000000000..d3193f20c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-002-wm-vlr-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<meta name="flags" content="paged"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-lr; +} +html { margin-block-start: 80vw; } +* { box-sizing: border-box; } + +.b { + inline-size: 50vh; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} +.b1 { + block-size: 20vw; + border-block-end-style: none; +} + +.b2 { + block-size: 100vw; + border-block-start-style: none; + border-block-end-style: none; +} + +.b3 { + block-size: 10vw; + border-block-start-style: none; +} + +.b > div { + inline-size: 50vh; + block-size: 100vw; + border: 5px solid grey; + margin-inline-start: 20px; +} +.b1 > div { + border-block-end-style: none; + margin-block-start: -5px; +} +.b2 > div { + border-block-start-style: none; + border-block-end-style: none; +} +.b3 > div { + block-size: 30vw; + border-block-start-style: none; +} + +.after { + inline-size: 60vh; + block-size: 30vw; + margin-block-start: 5vw; + border: 5px solid blue; +} +</style> +<body> + <div class="b b1"><div></div></div> + <div class="b b2"><div></div></div> + <div class="b b3"><div></div></div> + <div class="after"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html new file mode 100644 index 0000000000..084b5325b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-print.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="block-002-wm-vrl-ref.html"> +<meta name="flags" content="paged"> +<meta name="fuzzy" content="maxDifference=0-35;totalPixels=0-220"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +html { margin-block-start: 80vw; } +* { box-sizing: border-box; } + +.b { + inline-size: 50vh; + block-size: 130vw; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} + +.b > div { + inline-size: 50vh; + block-size: 150vw; + border: 5px solid grey; + margin-inline-start: 20px; + margin-block-start: -5px; +} + +.after { + inline-size: 60vh; + block-size: 30vw; + margin-block-start: 5vw; + border: 5px solid blue; +} +</style> +<body> + <div class="b"> + <div></div> + </div> + <div class="after"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html new file mode 100644 index 0000000000..8b5ea92af5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-002-wm-vrl-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<meta name="flags" content="paged"> +<html> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +html { margin-block-start: 80vw; } +* { box-sizing: border-box; } + +.b { + inline-size: 50vh; + border: 5px solid black; + border-block-start-color: blue; + border-inline-start-color: lime; + margin-inline-start: 20px; +} +.b1 { + block-size: 20vw; + border-block-end-style: none; +} + +.b2 { + block-size: 100vw; + border-block-start-style: none; + border-block-end-style: none; +} + +.b3 { + block-size: 10vw; + border-block-start-style: none; +} + +.b > div { + inline-size: 50vh; + block-size: 100vw; + border: 5px solid grey; + margin-inline-start: 20px; +} +.b1 > div { + border-block-end-style: none; + margin-block-start: -5px; +} +.b2 > div { + border-block-start-style: none; + border-block-end-style: none; +} +.b3 > div { + block-size: 30vw; + border-block-start-style: none; +} + +.after { + inline-size: 60vh; + block-size: 30vw; + margin-block-start: 5vw; + border: 5px solid blue; +} +</style> +<body> + <div class="b b1"><div></div></div> + <div class="b b2"><div></div></div> + <div class="b b3"><div></div></div> + <div class="after"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-nested.html b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-nested.html new file mode 100644 index 0000000000..b74a28e731 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-nested.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height"> +<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="position:relative;"> + <div style="position:absolute; top:50px; width:50px; height:50px; background:red;"></div> +</div> +<div id="multicol" style="columns:2; column-fill:auto; column-gap:0; width:101px; height:100px; background:green;"> + <div style="position:relative; height:100px;"> + <div style="position:absolute; bottom:0;"> + <div style="position:absolute; bottom:0;"> + <div style="width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById("multicol").style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow-ref.html b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow-ref.html new file mode 100644 index 0000000000..a8470b09a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { overflow:scroll; } /* Auto scrollbars may hide bugs. */ +</style> +<p>There should be a green square below, and a smaller hotpink square.</p> +<div style="float:left; width:20px; height:20px; margin-top:80px; margin-right:30px; background:hotpink;"></div> +<div style="float:left; width:50px; height:50px; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow.html b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow.html new file mode 100644 index 0000000000..9000c63513 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos-with-overflow.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height"> +<link rel="match" href="block-end-aligned-abspos-with-overflow-ref.html"> +<meta name="assert" content="Check that content that overflows a tall bottom-aligned abspos fragments properly"> +<style> + body { overflow:scroll; } /* Auto scrollbars may hide bugs. */ +</style> +<p>There should be a green square below, and a smaller hotpink square.</p> +<div style="columns:2; width:100px; height:100px; column-fill:auto; column-gap:0; background:white;"> + <div style="position:relative; height:100%;"> + <div style="position:absolute; width:20px; bottom:20px;"> + <div style="height:10px; background:white;"> + <div style="background:hotpink;"> + <div style="height:10px; background:white;"></div> + <div style="break-inside:avoid; width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-end-aligned-abspos.html b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos.html new file mode 100644 index 0000000000..c7acaa977b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-end-aligned-abspos.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height"> +<style> + body { overflow:scroll; } /* Auto scrollbars may hide bugs. */ + #container { columns:2; height:200px; column-fill:auto; background:white; } + #abspos { position:absolute; width:50px; bottom:0; background:blue; } + #abspos > div { height:10px; background:white; } +</style> +<p>There should be two identical blue squares below.</p> +<div id="container"> + <div style="position:relative; height:100%;"> + <div id="abspos" data-offset-y="80" data-expected-height="120"> + <div style="margin:50px 0;" data-offset-y="50"></div> + <div data-offset-y="110"></div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("[data-offset-y]"); +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-000.html b/testing/web-platform/tests/css/css-break/block-in-inline-000.html new file mode 100644 index 0000000000..ae9ee3421b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-000.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <span> + <!-- First column: --> + <div style="height:50px; background:green;"> + <br> + <!-- Second column: --> + <div style="break-before:column; height:100px; background:green;"></div> + </div> + <!-- First column (the preceding DIV is only 50px tall): --> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-001.html b/testing/web-platform/tests/css/css-break/block-in-inline-001.html new file mode 100644 index 0000000000..de967599fe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <span> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + <div style="height:100px; background:green;"> + <div style="height:150px;"></div> + <div style="height:200px; background:green;"></div> + </div> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-002.html b/testing/web-platform/tests/css/css-break/block-in-inline-002.html new file mode 100644 index 0000000000..c5e44c901c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <span> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + <div style="height:200px; background:green;"> + <div style="height:250px;"></div> + <div style="height:100px; background:green;"></div> + </div> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-003.html b/testing/web-platform/tests/css/css-break/block-in-inline-003.html new file mode 100644 index 0000000000..a276fde583 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <span> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + <div style="height:50px; background:green;"> + <div style="height:50px;"></div> + <div style="height:300px; background:green;"></div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-004-crash.html b/testing/web-platform/tests/css/css-break/block-in-inline-004-crash.html new file mode 100644 index 0000000000..41731a9865 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-004-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295183"> +<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;"> + <span id="elm"> + <div style="height:3px;"> + <div style="height:26px;"></div> + </div> + <br> + </span> +</div> +<script> + elm.getClientRects(); +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-004.html b/testing/web-platform/tests/css/css-break/block-in-inline-004.html new file mode 100644 index 0000000000..338f4ad52c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-004.html @@ -0,0 +1,13 @@ +<!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=1290809"> +<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; orphans:1; widows:1; background:red;"> + <div style="height:50px; background:green;"></div> + <span> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> + <div style="height:50px; background:green;"></div> + </span> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-005-crash.html b/testing/web-platform/tests/css/css-break/block-in-inline-005-crash.html new file mode 100644 index 0000000000..599ac2226f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-005-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295183"> +<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;"> + <span id="elm"> + <div style="height:3px;"> + <div style="height:126px;"></div> + </div> + <br> + </span> +</div> +<script> + elm.getClientRects(); +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-006-crash.html b/testing/web-platform/tests/css/css-break/block-in-inline-006-crash.html new file mode 100644 index 0000000000..5bc5276a31 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-006-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295183"> +<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;"> + <span id="elm"> + <div style="height:30px;"> + <div style="height:126px;"></div> + </div> + <br> + </span> +</div> +<script> + elm.getClientRects(); +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-007-crash.html b/testing/web-platform/tests/css/css-break/block-in-inline-007-crash.html new file mode 100644 index 0000000000..a8ab007842 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-007-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295183"> +<div style="columns:2; line-height:20px; column-fill:auto; height:25px; orphans:1; widows:1;"> + <span id="elm"> + <div style="height:30px;"> + <div style="height:51px;"></div> + </div> + <br> + </span> +</div> +<script> + elm.getClientRects(); +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-008.html b/testing/web-platform/tests/css/css-break/block-in-inline-008.html new file mode 100644 index 0000000000..013cb8447e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-008.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1457464"> +<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> +<!-- There are no valid breakpoints in this test. Blink will still place a break + between the end of #monolith and the bottom padding of #container, to + prevent fragmentainer overflow, whereas Gecko won't insert any breaks at + all. All we want to test here, though, is that no break is inserted between + the top border of #outer and #container. --> +<div style="columns:1; overflow:hidden; column-fill:auto; width:100px; height:100px; background:red;"> + <div id="outer" style="width:100px; border-top:10px solid green;"> + <span> + <div id="container" style="padding-bottom:50px;"> + <div id="monolith" style="contain:size; height:90px; background:green;"></div> + </div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-009.html b/testing/web-platform/tests/css/css-break/block-in-inline-009.html new file mode 100644 index 0000000000..0acb317464 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-009.html @@ -0,0 +1,16 @@ +<!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=1457464"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:200px; orphans:1; widows:1;"> + <div style="height:100px; background:green;"></div> + <div style="height:10px;"></div> + <div style="border-top:40px solid green;"> + <span> + <div style="contain:size; height:60px; background:green;"></div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-010-crash.html b/testing/web-platform/tests/css/css-break/block-in-inline-010-crash.html new file mode 100644 index 0000000000..7823399293 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-010-crash.html @@ -0,0 +1,16 @@ +<!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=1495515"> +<div style="columns:10; column-fill:auto; height:100px;"> + <div style="height:50px;"></div> + <span> + <div id="e58" style="float:left; width:70%;"> + <div style="float:left; width:100%; height:60px; contain:size;"></div> + </div> + <div style="height:10px;"></div> + </span> +</div> +<script> + document.body.offsetTop; + e58.style.cssFloat = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-break/block-in-inline-011.html b/testing/web-platform/tests/css/css-break/block-in-inline-011.html new file mode 100644 index 0000000000..1906feffdd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-in-inline-011.html @@ -0,0 +1,24 @@ +<!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=1495515"> +<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; columns:4; column-fill:auto; gap:0; height:70px; background:red;"> + <span> + <div style="height:50px; background:green;"></div> + <div id="e58" style="float:left;"> + <div style="float:left; width:100%;"> + <div style="height:100px; contain:size; background:green;"></div> + <div style="height:100px; contain:size; background:green;"></div> + <div style="height:100px; contain:size; background:green;"></div> + </div> + </div> + <div style="height:20px; contain:size;"> + <div style="height:50px; background:green;"></div> + </div> + </span> +</div> +<script> + document.body.offsetTop; + e58.style.cssFloat = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-001-ref.html b/testing/web-platform/tests/css/css-break/block-max-height-001-ref.html new file mode 100644 index 0000000000..6d514273ed --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-001-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { height:160px; background: yellow; } +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-001.html b/testing/web-platform/tests/css/css-break/block-max-height-001.html new file mode 100644 index 0000000000..acb4316d13 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { max-height:160px; background: yellow; } +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-001b-ref.html b/testing/web-platform/tests/css/css-break/block-max-height-001b-ref.html new file mode 100644 index 0000000000..40ecf750be --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-001b-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + height: 128px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-001b.html b/testing/web-platform/tests/css/css-break/block-max-height-001b.html new file mode 100644 index 0000000000..e24cea67b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-001b.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + max-height: 128px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-002.html b/testing/web-platform/tests/css/css-break/block-max-height-002.html new file mode 100644 index 0000000000..75aeb6229a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min/max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { min-height:120px; max-height:160px; background: yellow; } +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-002b.html b/testing/web-platform/tests/css/css-break/block-max-height-002b.html new file mode 100644 index 0000000000..cf8cc98eb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-002b.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min/max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + min-height: 112px; + max-height: 128px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-003.html b/testing/web-platform/tests/css/css-break/block-max-height-003.html new file mode 100644 index 0000000000..c58bad29ca --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-003.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min/max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { min-height:160px; max-height:110px; background: yellow; } +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-003b.html b/testing/web-platform/tests/css/css-break/block-max-height-003b.html new file mode 100644 index 0000000000..019c290d71 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-003b.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min/max-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-001b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + min-height: 128px; + max-height: 112px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:200px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-004-ref.html b/testing/web-platform/tests/css/css-break/block-max-height-004-ref.html new file mode 100644 index 0000000000..74a2ed73c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-004-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <title>CSS Reference: max-height block fragmentation</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <style> + .multicol { + height: 30px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + } + .block { + display: block; + background: teal; + border: 5px solid black; + border-top-width: 0; + height: 40px; + } + .child { + display: block; + width: 50%; + height: 80px; + } + img.child { background: salmon; } + div.child { background: purple; } + </style> + + <div class="multicol"> + <main class="block"> + <img src="" class="child"><div class="child"></div> + </main> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-max-height-004.html b/testing/web-platform/tests/css/css-break/block-max-height-004.html new file mode 100644 index 0000000000..4ceb23a80b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-max-height-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <title>CSS Test: max-height block fragmentation</title> + <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="> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-max-height-004-ref.html"> + + <style> + .multicol { + height: 30px; + width: 100px; + column-width: 30px; + column-fill: auto; + border: 2px solid orange; + } + .block { + display: block; + background: teal; + border: 5px solid black; + border-top-width: 0; + max-height: 40px; + } + .child { + display: block; + width: 50%; + height: 80px; + } + img.child { background: salmon; } + div.child { background: purple; } + </style> + + <div class="multicol"> + <main class="block"> + <img src="" class="child"><div class="child"></div> + </main> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-min-height-001-ref.html b/testing/web-platform/tests/css/css-break/block-min-height-001-ref.html new file mode 100644 index 0000000000..492a9a19ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-min-height-001-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: min-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { height:200px; background: yellow; } +.columns > div > div { height:160px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-min-height-001.html b/testing/web-platform/tests/css/css-break/block-min-height-001.html new file mode 100644 index 0000000000..47ceff7631 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-min-height-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-min-height-001-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { min-height:200px; background: yellow; } +.columns > div > div { height:160px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-min-height-001b-ref.html b/testing/web-platform/tests/css/css-break/block-min-height-001b-ref.html new file mode 100644 index 0000000000..46e6927a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-min-height-001b-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference: min-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + height: 172px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:150px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/block-min-height-001b.html b/testing/web-platform/tests/css/css-break/block-min-height-001b.html new file mode 100644 index 0000000000..8ed26c5952 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/block-min-height-001b.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: min-height block fragmentation</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1602430"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="block-min-height-001b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; + width: 300px; +} +.columns { + columns: 3; + background: grey; + margin-bottom: 1em; +} +.columns > div { + min-height: 172px; + background: yellow; + border: solid; + border-width:10px 0 6px 0; + padding: 5px 0 3px 0; +} +.columns > div > div { height:150px; width:50px; border:solid; } + </style> +</head> +<body> +<div class="columns"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:100px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:70px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +<div class="columns" style="height:50px"> + BEFORE + <div> + <div></div> + </div> + AFTER +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/border-image-000.html b/testing/web-platform/tests/css/css-break/border-image-000.html new file mode 100644 index 0000000000..a588830310 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/border-image-000.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>'box-decoration-break: clone' and 'border-image'</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="reference/border-image-000-ref.html"> +<style> + .border-image { + font: 81px/1 Ahem; + color: transparent; + border-image: radial-gradient(green 50%, transparent 50%) 27 fill / 27px; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + } +</style> +<p>There should be two green circles below.</p> +<div style="width: 81px"> + <span class="border-image">A A</span> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-000-ref.html b/testing/web-platform/tests/css/css-break/borders-000-ref.html new file mode 100644 index 0000000000..a7022ae575 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-000-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a yellow box with a hotpink border in the second column.</p> +<div style="float:left; margin-left:110px; border:10px solid hotpink; width:80px; height:80px; background:yellow;"></div> diff --git a/testing/web-platform/tests/css/css-break/borders-000.html b/testing/web-platform/tests/css/css-break/borders-000.html new file mode 100644 index 0000000000..7c79f4c0d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-000.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-000-ref.html"> +<p>There should be a yellow box with a hotpink border in the second column.</p> +<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;"> + <div style="height:95px;"></div> + <div style="border:10px solid hotpink; height:80px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-001-ref.html b/testing/web-platform/tests/css/css-break/borders-001-ref.html new file mode 100644 index 0000000000..30c472f937 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a yellow box that starts in the second column and ends in the + third. The top border should be in the second column, and the bottom border + should be in the third.</p> +<div style="float:left; margin-left:110px; border:10px solid hotpink; border-bottom:none; width:80px; height:90px; background:yellow;"></div> +<div style="float:left; margin-left:10px; border:10px solid hotpink; border-top:none; width:80px; height:10px; background:yellow;"></div> diff --git a/testing/web-platform/tests/css/css-break/borders-001.html b/testing/web-platform/tests/css/css-break/borders-001.html new file mode 100644 index 0000000000..2fa8c8c96f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-001-ref.html"> +<p>There should be a yellow box that starts in the second column and ends in the + third. The top border should be in the second column, and the bottom border + should be in the third.</p> +<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;"> + <div style="height:95px;"></div> + <div style="border:10px solid hotpink; height:100px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-002-ref.html b/testing/web-platform/tests/css/css-break/borders-002-ref.html new file mode 100644 index 0000000000..7abcf4ed61 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-002-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a yellow box that starts in the second column and ends in the + fourth. The top border should be in the second column, and the bottom border + should be in the fourth.</p> +<div style="float:left; margin-left:110px; border:10px solid hotpink; border-bottom:none; width:80px; height:90px; background:yellow;"></div> +<div style="float:left; margin-left:10px; border:10px solid hotpink; border-bottom:none; border-top:none; width:80px; height:100px; background:yellow;"></div> +<div style="float:left; margin-left:10px; border:10px solid hotpink; border-top:none; width:80px; height:60px; background:yellow;"></div> diff --git a/testing/web-platform/tests/css/css-break/borders-002.html b/testing/web-platform/tests/css/css-break/borders-002.html new file mode 100644 index 0000000000..b8bc3a4848 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-002-ref.html"> +<p>There should be a yellow box that starts in the second column and ends in the + fourth. The top border should be in the second column, and the bottom border + should be in the fourth.</p> +<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;"> + <div style="height:95px;"></div> + <div style="border:10px solid hotpink; height:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-003-ref.html b/testing/web-platform/tests/css/css-break/borders-003-ref.html new file mode 100644 index 0000000000..d8a576ea6f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-003-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + float: left; + width: 200px; + height: 100px; + margin-right: 10px; + } + .box { + border-radius: 15px; + border: 20px solid hotpink; + background: yellow; + } + .skip-start { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; + } + .skip-end { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + } +</style> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div class="container"> + <div class="box skip-end" style="height:80px;"></div> +</div> +<div class="container"> + <div class="box skip-start skip-end" style="height:100px;"></div> +</div> +<div class="container"> + <div class="box skip-start" style="height:70px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-003.html b/testing/web-platform/tests/css/css-break/borders-003.html new file mode 100644 index 0000000000..f3d9410d0c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-003-ref.html"> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;"> + <div style="border-radius:15px; border:20px solid hotpink; height:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-004-ref.html b/testing/web-platform/tests/css/css-break/borders-004-ref.html new file mode 100644 index 0000000000..8cbbf0ccc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-004-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + float: left; + width: 200px; + height: 100px; + margin-right: 10px; + } + .box { + border-radius: 40px; + border: 20px solid hotpink; + background: yellow; + } + .skip-start { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; + } + .skip-end { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + } +</style> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div class="container"> + <div class="box skip-end" style="height:80px;"></div> +</div> +<div class="container"> + <div class="box skip-start skip-end" style="height:100px;"></div> +</div> +<div class="container"> + <div class="box skip-start" style="height:70px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-004.html b/testing/web-platform/tests/css/css-break/borders-004.html new file mode 100644 index 0000000000..5ffca58757 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-004-ref.html"> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;"> + <div style="border-radius:40px; border:20px solid hotpink; height:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-005-ref.html b/testing/web-platform/tests/css/css-break/borders-005-ref.html new file mode 100644 index 0000000000..20a0431510 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-005-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .container { + float: left; + width: 200px; + height: 100px; + margin-right: 10px; + } + .box { + border-radius: 80px; + border: 20px solid hotpink; + background: yellow; + } + .skip-start { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-top: none; + } + .skip-end { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + } +</style> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div class="container"> + <div class="box skip-end" style="height:80px;"></div> +</div> +<div class="container"> + <div class="box skip-start skip-end" style="height:100px;"></div> +</div> +<div class="container"> + <div class="box skip-start" style="height:70px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-005.html b/testing/web-platform/tests/css/css-break/borders-005.html new file mode 100644 index 0000000000..a96c4e42ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-005-ref.html"> +<p>There should be a yellow box that starts in the first column and ends in the + third. The border should be rounded at the start (first column) and at the end + (last column).</p> +<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;"> + <div style="border-radius:80px; border:20px solid hotpink; height:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-006-ref.html b/testing/web-platform/tests/css/css-break/borders-006-ref.html new file mode 100644 index 0000000000..292c0f9c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-006-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .box { + height: 80px; + margin-bottom: 10px; + border: 10px solid hotpink; + background: yellow; + } + .skip-start { + border-left: none; + } + .skip-end { + border-right: none; + } +</style> +<p>There should be a yellow box that starts in the first column and ends in the + third. The block-start border should be in the first column, and the block-end + border should be in the third.</p> +<div class="box skip-end" style="width:90px;"></div> +<div class="box skip-start skip-end" style="width:100px;"></div> +<div class="box skip-start" style="width:60px;"></div> diff --git a/testing/web-platform/tests/css/css-break/borders-006.html b/testing/web-platform/tests/css/css-break/borders-006.html new file mode 100644 index 0000000000..a2c59f7b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-006.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-006-ref.html"> +<p>There should be a yellow box that starts in the first column and ends in the + third. The block-start border should be in the first column, and the block-end + border should be in the third.</p> +<div style="columns:3; column-gap:10px; column-fill:auto; writing-mode:vertical-lr; inline-size:320px; block-size:100px;"> + <div style="border:10px solid hotpink; block-size:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/borders-007-ref.html b/testing/web-platform/tests/css/css-break/borders-007-ref.html new file mode 100644 index 0000000000..3b9e23678d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-007-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .box { + height: 80px; + margin-bottom: 10px; + border: 10px solid hotpink; + background: yellow; + } + .skip-start { + border-right: none; + } + .skip-end { + border-left: none; + } +</style> +<p>There should be a yellow box that starts in the first column and ends in the + third. The block-start border should be in the first column, and the block-end + border should be in the third.</p> +<div class="box skip-end" style="width:90px;"></div> +<div class="box skip-start skip-end" style="width:100px;"></div> +<div class="box skip-start" style="margin-left:30px; width:60px;"></div> diff --git a/testing/web-platform/tests/css/css-break/borders-007.html b/testing/web-platform/tests/css/css-break/borders-007.html new file mode 100644 index 0000000000..d7c5f0568a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/borders-007.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="borders-007-ref.html"> +<p>There should be a yellow box that starts in the first column and ends in the + third. The block-start border should be in the first column, and the block-end + border should be in the third.</p> +<div style="columns:3; column-gap:10px; column-fill:auto; writing-mode:vertical-rl; inline-size:320px; block-size:100px;"> + <div style="border:10px solid hotpink; block-size:250px; background:yellow;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-decoration-break-clone-001.html b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-001.html new file mode 100644 index 0000000000..c247c9dbe0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-001.html @@ -0,0 +1,40 @@ +<!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/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 100px; + block-size: 100px; + background: red; +} + +.container { + padding: 5px 0; + border-block: 10px solid green; + box-decoration-break: clone; + background: green; +} + +.child { + block-size: calc(70px + 70px); /* 1st column + 2nd column */ + background: green; +} +</style> + +<!-- The container's block-size is auto, so the available column block-size + reserved for the child is 70px in every column. --> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="container"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-decoration-break-clone-002.html b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-002.html new file mode 100644 index 0000000000..8aff0d4a94 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-002.html @@ -0,0 +1,40 @@ +<!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/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 100px; + block-size: 100px; + background: red; +} + +.container { + border-block: 15px solid green; + box-decoration-break: clone; + block-size: calc(70px + 30px); /* 1st column + 2nd column */ +} + +.child { + block-size: calc(70px + 85px); /* 1st column + 2nd column */ + background: green; +} +</style> + +<!-- The container's content-box block-size is 100px, occupying part of the + second column. The child overflows the container, and get painted over the + container's block-end border in the second column. --> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="container"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-decoration-break-clone-003.html b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-003.html new file mode 100644 index 0000000000..702f01b4cb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-003.html @@ -0,0 +1,41 @@ +<!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/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 100px; + block-size: 100px; + background: red; +} + +.container { + border-block-start: 15px solid green; + border-block-end: 15px solid pink; + box-decoration-break: clone; + block-size: 70px; +} + +.child { + block-size: calc(85px + 100px); /* 1st column + 2nd column */ + background: green; +} +</style> + +<!-- The container's content-box block-size is 70px, fitting exactly into the + first column. The child overflows the container, and get painted over the + container's block-end border in the first column. --> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="container"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-decoration-break-clone-004.html b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-004.html new file mode 100644 index 0000000000..d1840bfe96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-decoration-break-clone-004.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://drafts.csswg.org/css-break/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1564726"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 100px; + block-size: 100px; + background: red; +} + +.container { + padding: 5px 0; + border-block: 10px solid green; + box-decoration-break: clone; + block-size: calc(70px + 10px); /* 1st column + 2nd column */ + background: green; +} +</style> + +<!-- The container's content-box block-size is 80px, making its border-box + block-size in the second column be 40px. The remaining 60px block-size in + the second column should be filled completely by the later sibling green + block. --> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="container"></div> + <div style="block-size: 60px; background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-001-ref.html b/testing/web-platform/tests/css/css-break/box-shadow-001-ref.html new file mode 100644 index 0000000000..f87e16aded --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be 6 identical cyan rectangles below, all with a box shadow.</p> +<style> + #mc > div { + float: left; + margin-bottom: 50px; + margin-right: 50px; + width: 100px; + height: 50px; + box-shadow: 20px 20px 20px; + background: cyan; + } +</style> +<div id="mc" style="width:400px; height:150px; background:yellow;"> + <div></div> + <div></div> + <div style="margin-right:0;"></div> + <div></div> + <div></div> + <div style="margin-right:0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-001.html b/testing/web-platform/tests/css/css-break/box-shadow-001.html new file mode 100644 index 0000000000..d35aeb682d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-001.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=269061"> +<link rel="match" href="box-shadow-001-ref.html"> +<p>There should be 6 identical cyan rectangles below, all with a box shadow.</p> +<style> + #mc > div { + margin-bottom: 50px; + height: 50px; + box-shadow: 20px 20px 20px; + background: cyan; + } +</style> +<div id="mc" style="columns:3; column-gap:50px; column-fill:auto; width:400px; height:150px; background:yellow;"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-002-ref.html b/testing/web-platform/tests/css/css-break/box-shadow-002-ref.html new file mode 100644 index 0000000000..a55abfbb99 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + #mc > div { + position: absolute; + inline-size: 50px; + border: 10px solid; + } +</style> +<p>Box shadows should not be painted at column breaks.</p> +<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow;"> + <div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div> + <div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div> + <div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-002.html b/testing/web-platform/tests/css/css-break/box-shadow-002.html new file mode 100644 index 0000000000..d26bb8c72e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173"> +<link rel="match" href="box-shadow-002-ref.html"> +<p>Box shadows should not be painted at column breaks.</p> +<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow;"> + <div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-003-ref.html b/testing/web-platform/tests/css/css-break/box-shadow-003-ref.html new file mode 100644 index 0000000000..1c9451d807 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-003-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + #mc > div { + position: absolute; + inline-size: 50px; + border: 10px solid; + } +</style> +<p>Box shadows should not be painted at column breaks.</p> +<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-rl;"> + <div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div> + <div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div> + <div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-003.html b/testing/web-platform/tests/css/css-break/box-shadow-003.html new file mode 100644 index 0000000000..ba8fedfe1b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-003.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173"> +<link rel="match" href="box-shadow-003-ref.html"> +<p>Box shadows should not be painted at column breaks.</p> +<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-rl;"> + <div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-004-ref.html b/testing/web-platform/tests/css/css-break/box-shadow-004-ref.html new file mode 100644 index 0000000000..29156878c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-004-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> + #mc > div { + position: absolute; + inline-size: 50px; + border: 10px solid; + } +</style> +<p>Box shadows should not be painted at column breaks.</p> +<div id="mc" style="position:relative; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-lr;"> + <div style="inset-inline-start:-10px; inset-block-start:-10px; block-size:100px; border-block-end:none;"></div> + <div style="inset-inline-start: 140px; block-size:100px; border-block-start:none; border-block-end:none;"></div> + <div style="inset-inline-start: 290px; block-size:50px; border-block-start:none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/box-shadow-004.html b/testing/web-platform/tests/css/css-break/box-shadow-004.html new file mode 100644 index 0000000000..bdf66fcddd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/box-shadow-004.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=682173"> +<link rel="match" href="box-shadow-004-ref.html"> +<p>Box shadows should not be painted at column breaks.</p> +<div style="columns:3; column-gap:50px; column-fill:auto; margin:50px; inline-size:400px; block-size:100px; background:yellow; writing-mode:vertical-lr;"> + <div style="box-shadow:0px 0px 0px 10px; inline-size:50px; block-size:250px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/br-clear-all.html b/testing/web-platform/tests/css/css-break/br-clear-all.html new file mode 100644 index 0000000000..ac3a67ffd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/br-clear-all.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="float:left; width:50%; height:350px; background:green;"></div> + <div style="background:green;"> + <br clear="all"> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-after-in-parallel-flow-crash.html b/testing/web-platform/tests/css/css-break/break-after-in-parallel-flow-crash.html new file mode 100644 index 0000000000..b595632950 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-after-in-parallel-flow-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305732"> +<div style="columns:3; column-fill:auto; height:40px;"> + <div style="height:20px;"> + <div style="height:50px;"></div> + <div style="break-after:column;"></div> + </div> + <div style="height:40px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-after-oof-before-preceding-pushed-float-crash.html b/testing/web-platform/tests/css/css-break/break-after-oof-before-preceding-pushed-float-crash.html new file mode 100644 index 0000000000..8c4355c22d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-after-oof-before-preceding-pushed-float-crash.html @@ -0,0 +1,16 @@ +<!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=1318455"> +<div style="columns:2; column-fill:auto; height:50px;"> + <div style="position:relative; height:31px;"> + <div style="position:absolute;"></div> + </div> + <span style="contain:size; float:left; width:100%; height:20px;"></span> + <div> + <div style="height:10px;"></div> + <div style="position:relative; float:left; width:100%;"> + <div style="height:1px;"></div> + <div style="position:absolute;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-at-end-container-edge-000.html b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-000.html new file mode 100644 index 0000000000..4836f399de --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-000.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="We should break between the two lines (class B breakpoint), rather than between the last line and the container padding"> +<style> + .child { display:inline-block; vertical-align:top; width:100%; height:50px; line-height:50px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="padding-bottom:50px; background:green;"> + <div class="child"></div> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-at-end-container-edge-001.html b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-001.html new file mode 100644 index 0000000000..d6d3374bc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="We should break between the last two lines (class B breakpoint), rather than inside the container padding"> +<style> + .child { display:inline-block; vertical-align:top; width:100%; height:30px; line-height:30px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="padding-bottom:70px; background:green;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-at-end-container-edge-002.html b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-002.html new file mode 100644 index 0000000000..0002a558a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="We should break between the first two lines (class B breakpoint, also honoring widows), rather than inside the container padding"> +<style> + .child { display:inline-block; vertical-align:top; width:100%; height:30px; line-height:30px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:1; widows:2; background:red;"> + <div style="padding-bottom:40px; background:green;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-at-end-container-edge-003.html b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-003.html new file mode 100644 index 0000000000..aafe3975ee --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The block with padding should be pushed to the second column, so that we won't have to break between the line and the padding edge"> +<style> + .child { display:inline-block; vertical-align:top; width:100%; height:90px; line-height:90px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="float:left; width:100%; height:100px; background:green;"></div> + <div style="height:10px;"></div> + <div style="padding-bottom:10px; background:green;"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-at-end-container-edge-004.html b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-004.html new file mode 100644 index 0000000000..c9d8b8fad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-at-end-container-edge-004.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The last line could fit in the third column, but will be pushed to the fourth, so that we won't have to break between the last line and the container padding"> +<style> + .child { display:inline-block; vertical-align:top; width:100%; height:40px; line-height:40px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="padding-bottom:60px; background:green;"> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-before-always-001.xht b/testing/web-platform/tests/css/css-break/break-before-always-001.xht new file mode 100644 index 0000000000..e2e7297d15 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-before-always-001.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: 'break-before: always' and paginated multi-column elements</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="https://drafts.csswg.org/css-break/#break-between"/> + <meta name="flags" content="page" /> + <meta name="assert" content="A forced break of type 'always' will break through both the multi-column context and the pagination context."/> + <style type="text/css"><![CDATA[ + .multicol { + columns: 2; + color: blue; + font-weight: bold; + } + .break { + break-before: always; + } + .control { + break-before: column; + } + ]]></style> + </head> + <body> + <p>Test passes if:</p> + <ul> + <li>"FIRST LEFT" appears below</li> + <li>"SECOND LEFT" appears on the left half of the second page</li> + <li>"SECOND RIGHT" appears on the right half of the second page</li> + </ul> + <div class="multicol"> + FIRST LEFT + <div class="break">SECOND LEFT</div> + <div class="control">SECOND RIGHT</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-before-float-after-line-after-floats-crash.html b/testing/web-platform/tests/css/css-break/break-before-float-after-line-after-floats-crash.html new file mode 100644 index 0000000000..9066cd77ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-before-float-after-line-after-floats-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=1306811"> +<div style="columns:3; column-fill:auto; width:320px; height:100px; orphans:1; widows:1;"> + <div style="float:left; width:50px; height:10px;"></div> + <div style="float:left; width:100px; height:10px;"></div> + <div style="display:inline-block; width:20px; height:20px;"></div> + <div style="float:left; width:10px; height:200px; contain:size;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-before-with-no-fragmentation-crash.html b/testing/web-platform/tests/css/css-break/break-before-with-no-fragmentation-crash.html new file mode 100644 index 0000000000..fb80ec45bc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-before-with-no-fragmentation-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-break/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=966369"> +<div id="container" style="height:100px";> + <div style="height:100%;"> + <div style="break-before:page;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + document.body.offsetTop; + container.style.height = "101px"; + }, "no crash"); +</script> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-000.html b/testing/web-platform/tests/css/css-break/break-between-avoid-000.html new file mode 100644 index 0000000000..4816be7ae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-000.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Three blocks could fit in the first fragmentainer, but there's a break-before:avoid between the third and fourth block, so we should break between the second and third"> +<style> + .square { + height: 50px; + break-inside: avoid; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:160px;"> + <div class="square"></div> + <div class="square"></div> + <div class="square"></div> + <div class="square" style="break-before:avoid;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-001.html b/testing/web-platform/tests/css/css-break/break-between-avoid-001.html new file mode 100644 index 0000000000..b26f04abaf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Three blocks could fit in the first fragmentainer, but there's a break-after:avoid between the third and fourth block, so we should break between the second and third"> +<style> + .square { + height: 50px; + break-inside: avoid; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:160px;"> + <div class="square"></div> + <div class="square"></div> + <div class="square" style="break-after:avoid;"></div> + <div class="square"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-002.html b/testing/web-platform/tests/css/css-break/break-between-avoid-002.html new file mode 100644 index 0000000000..14fa2c3832 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Need to violate break-before:avoid and break-after:avoid if there are no better breakpoints"> +<style> + .container { + break-before: avoid; + break-after: avoid; + } + .square { + display: inline-block; + vertical-align: top; + width: 100%; + height: 50px; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:120px;"> + <div class="container"> + <div class="square"></div> + </div> + <div class="container"> + <div class="square"></div> + </div> + <div class="container"> + <div class="square"></div> + </div> + <div class="container"> + <div class="square"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-003.html b/testing/web-platform/tests/css/css-break/break-between-avoid-003.html new file mode 100644 index 0000000000..de738d145f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="The best breakpoint may be inside content we're already past when running out of space"> +<style> + .square { + height: 50px; + break-inside: avoid; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:160px;"> + <div> + <div class="square"></div> + <div> + <div> + <div class="square"></div> + <div class="square"></div> + </div> + </div> + </div> + <div class="square" style="break-before:avoid;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-004.html b/testing/web-platform/tests/css/css-break/break-between-avoid-004.html new file mode 100644 index 0000000000..71545b76c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Violate orphans/widows requirements rather than break-before:avoid and break-after:avoid"> +<style> + .container { + break-before: avoid; + break-after: avoid; + } + .square { + display: inline-block; + vertical-align: top; + width: 100%; + height: 50px; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:120px; orphans:2; widows:2;"> + <div class="container"> + <div class="square"></div> + </div> + <div class="container"> + <div class="square"></div> + <div class="square"></div> + </div> + <div class="container"> + <div class="square"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-005.html b/testing/web-platform/tests/css/css-break/break-between-avoid-005.html new file mode 100644 index 0000000000..f42110a6c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-005.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A forced break trumps break avoidance preferences"> +<style> + .square { + height: 50px; + break-inside: avoid; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:110px;"> + <div class="square"></div> + <div class="square" style="break-after:column;"></div> + <div class="square" style="break-before:avoid;"></div> + <div class="square"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-006.html b/testing/web-platform/tests/css/css-break/break-between-avoid-006.html new file mode 100644 index 0000000000..91e05b5a92 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A forced break trumps break avoidance preferences"> +<style> + .square { + height: 50px; + break-inside: avoid; + background:green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:110px;"> + <div class="square"></div> + <div> + <div> + <div class="square" style="break-after:column;"></div> + </div> + </div> + <div> + <div> + <div class="square" style="break-before:avoid;"></div> + </div> + </div> + <div class="square"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-007.html b/testing/web-platform/tests/css/css-break/break-between-avoid-007.html new file mode 100644 index 0000000000..b39ea5e949 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-007.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; width:250px; column-gap:50px; margin-left:-150px; height:110px;"> + <div style="height:2px; background:red;"></div> + <div id="wrapper1"> + <div id="wrapper2"> + <div id="wrapper3"> + <div id="a" style="contain:size; height:50px; background:red;"></div> + <div id="b" style="contain:size; height:50px; background:green;"></div> + </div> + </div> + <div id="c" style="break-before:avoid; contain:size; height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-008.html b/testing/web-platform/tests/css/css-break/break-between-avoid-008.html new file mode 100644 index 0000000000..5fae4e10cb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-008.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-break-3/#unforced-breaks"> +<meta name="assert" content="Prefer violating a later break-before:avoid instead of violating an earlier break-inside:avoid"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="break-inside:avoid;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:50px; background:green;"></div> + </div> + <div style="break-before:avoid; contain:size; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-009.html b/testing/web-platform/tests/css/css-break/break-between-avoid-009.html new file mode 100644 index 0000000000..d2e84f210a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-009.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:250px;"> + <div style="height:100px; background:green;"></div> + <div style="height:100px; background:green;"></div> + <div style="break-inside:avoid;"> + <div> + <div style="break-before:avoid; height:100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-010.html b/testing/web-platform/tests/css/css-break/break-between-avoid-010.html new file mode 100644 index 0000000000..f07017a64c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-010.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + column-fill: auto; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="width: 25px; height: 50px; background: green;"></div> + <div style="width: 25px; height: 50px; background: green;"></div> + <div> + <div style="height: 50px; break-before: avoid; background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-011.html b/testing/web-platform/tests/css/css-break/break-between-avoid-011.html new file mode 100644 index 0000000000..201677a2ea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-011.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1337586"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px; background:green;"></div> + <div style="height:10px;"> + <div style="height:20px; contain:size; background:green;"></div> + <div style="height:20px; contain:size; background:green;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid; height:90px;"> + <div style="height:30px;"></div> + <div style="height:60px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-012.html b/testing/web-platform/tests/css/css-break/break-between-avoid-012.html new file mode 100644 index 0000000000..e92f6a9864 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-012.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:30px; background:green;"></div> + <div style="float:left; width:50%;"> + <div style="height:10px; contain:size; background:green;"></div> + <div style="height:10px; contain:size; background:green;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid;"> + <div style="margin-left:auto; width:50%; height:20px; background:green;"></div> + <div style="height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-013.html b/testing/web-platform/tests/css/css-break/break-between-avoid-013.html new file mode 100644 index 0000000000..236b99e94e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-013.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px; background:green;"></div> + <div style="height:10px;"> + <div style="height:20px; contain:size; background:green;"></div> + <div style="height:40px; contain:size; background:green;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid; height:90px;"> + <div style="height:50px;"></div> + <div style="height:40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-avoid-014.html b/testing/web-platform/tests/css/css-break/break-between-avoid-014.html new file mode 100644 index 0000000000..91da764483 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-avoid-014.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:20px; background:green;"></div> + <div style="break-before:avoid; height:10px;"> + <div style="height:20px; contain:size; background:green;"></div> + <div style="height:20px; contain:size; background:green;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid; height:90px;"> + <div style="height:30px;"></div> + <div style="height:40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-force-000.html b/testing/web-platform/tests/css/css-break/break-between-force-000.html new file mode 100644 index 0000000000..9bccf7395e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-force-000.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:250px;"> + <div style="height:100px; background:green;"></div> + <div style="break-inside:avoid;"> + <div> + <div style="break-before:column; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-force-001.html b/testing/web-platform/tests/css/css-break/break-between-force-001.html new file mode 100644 index 0000000000..8ea340b122 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-force-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:250px;"> + <div style="height:100px; background:green;"></div> + <div> + <div style="break-before:column;"></div> + </div> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-between-force-002.html b/testing/web-platform/tests/css/css-break/break-between-force-002.html new file mode 100644 index 0000000000..7e3b79e4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-between-force-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:250px;"> + <div style="height:100px; background:green;"></div> + <div> + <div style="break-after:column;"></div> + </div> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/break-float-dynamic-001.html b/testing/web-platform/tests/css/css-break/break-float-dynamic-001.html new file mode 100644 index 0000000000..f849b148fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-float-dynamic-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>Test for dynamic re-pagination of a nested float element</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <style> + #multicol { + columns: 2; + column-fill: auto; + column-gap: 0; + height: 400px; /* Must be large enough so that .target doesn't break initially. */ + width: 100px; + background: red; + } + .block { + width: 50px; + background: green; + } + .target { + float: left; + height: 160px; /* Expected to be broken into 2 columns after runTest() */ + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + document.getElementById("multicol").style.height = "100px"; + } + </script> + + <body onload="runTest()"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="multicol"> + <div> + <div class="block" style="height: 40px"></div> + <div class="block target"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-float-dynamic-002.html b/testing/web-platform/tests/css/css-break/break-float-dynamic-002.html new file mode 100644 index 0000000000..93e30ff04e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-float-dynamic-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>Test for dynamic re-pagination of a nested float element with clearance</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <style> + #multicol { + columns: 2; + column-fill: auto; + column-gap: 0; + height: 400px; /* Must be large enough so that .target doesn't break initially. */ + width: 100px; + background: red; + } + .block { + width: 50px; + background: green; + } + .target { + float: left; + height: 160px; /* Expected to be broken into 2 columns after runTest() */ + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + document.getElementById("multicol").style.height = "100px"; + } + </script> + + <body onload="runTest()"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="multicol"> + <div> + <div class="block" style="height: 40px"></div> + <div class="block target"></div> + <div style="clear: both"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1-ref.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1-ref.html new file mode 100644 index 0000000000..56789f62cb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: break-inside:avoid min-block-size block</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} +.columns { + columns: 3; + background: grey; + margin-block-end: 1px; + inline-size: 500px; +} +.fill { + column-fill: auto; +} +.short { + block-size: 30px; +} +.tall { + block-size: 60px; +} +.columns > div { + block-size: 40px; + background: blue; +} +.columns > div:nth-child(2n) { background: lightblue; } + </style> +</head> +<body> +<div class="columns fill" style="block-size:40px"> + <div></div> + <div></div> +</div> +<div class="columns fill" style="block-size:40px"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns short"> + <div style="margin-block-end:20px"></div> + <div></div> +</div> +<div class="columns short"> + <div style="margin-block-end:20px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns tall"> + <div style="margin-block-end:40px"></div> + <div></div> +</div> +<div class="columns tall"> + <div style="margin-block-end:40px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill short"> + <div style="margin-block-end:20px"></div> + <div></div> +</div> +<div class="columns fill short"> + <div style="margin-block-end:20px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill tall"> + <div style="margin-block-end:40px"></div> + <div></div> +</div> +<div class="columns fill tall"> + <div style="margin-block-end:40px"> <br> </div> + <div> <br> </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1.html new file mode 100644 index 0000000000..733aae58d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-1.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: break-inside:avoid min-block-size block</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1711630"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="break-inside-avoid-min-block-size-1-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} +.columns { + columns: 3; + background: grey; + margin-block-end: 1px; + inline-size: 500px; +} +.fill { + column-fill: auto; +} +.short { + block-size: 30px; +} +.tall { + block-size: 60px; +} +.columns > div { + break-inside: avoid; + min-block-size: 40px; + background: blue; +} +.columns > div:nth-child(2n) { background: lightblue; } + </style> +</head> +<body> +<div class="columns"> + <div></div> + <div></div> +</div> +<div class="columns"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns short"> + <div></div> + <div></div> +</div> +<div class="columns short"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns tall"> + <div></div> + <div></div> +</div> +<div class="columns tall"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill short"> + <div></div> + <div></div> +</div> +<div class="columns fill short"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill tall"> + <div></div> + <div></div> +</div> +<div class="columns fill tall"> + <div> <br> </div> + <div> <br> </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2-ref.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2-ref.html new file mode 100644 index 0000000000..70c4049131 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: break-inside:avoid min-block-size block</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +.columns { + columns: 3; + background: grey; + margin-block-end: 1px; + inline-size: 500px; +} +.fill { + column-fill: auto; +} +.short { + block-size: 30px; +} +.tall { + block-size: 60px; +} +.columns > div { + block-size: 40px; + background: blue; +} +.columns > div:nth-child(2n) { background: lightblue; } + </style> +</head> +<body> +<div class="columns fill" style="block-size:40px"> + <div></div> + <div></div> +</div> +<div class="columns fill" style="block-size:40px"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns short"> + <div style="margin-block-end:20px"></div> + <div></div> +</div> +<div class="columns short"> + <div style="margin-block-end:20px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns tall"> + <div style="margin-block-end:40px"></div> + <div></div> +</div> +<div class="columns tall"> + <div style="margin-block-end:40px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill short"> + <div style="margin-block-end:20px"></div> + <div></div> +</div> +<div class="columns fill short"> + <div style="margin-block-end:20px"> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill tall"> + <div style="margin-block-end:40px"></div> + <div></div> +</div> +<div class="columns fill tall"> + <div style="margin-block-end:40px"> <br> </div> + <div> <br> </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2.html new file mode 100644 index 0000000000..e7669d8ebe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-min-block-size-2.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: break-inside:avoid min-block-size block</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1711630"> + <link rel="help" href="https://drafts.csswg.org/css-break"> + <link rel="match" href="break-inside-avoid-min-block-size-2-ref.html"> + <style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; + writing-mode: vertical-rl; +} +.columns { + columns: 3; + background: grey; + margin-block-end: 1px; + inline-size: 500px; +} +.fill { + column-fill: auto; +} +.short { + block-size: 30px; +} +.tall { + block-size: 60px; +} +.columns > div { + break-inside: avoid; + min-block-size: 40px; + background: blue; +} +.columns > div:nth-child(2n) { background: lightblue; } + </style> +</head> +<body> +<div class="columns"> + <div></div> + <div></div> +</div> +<div class="columns"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns short"> + <div></div> + <div></div> +</div> +<div class="columns short"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns tall"> + <div></div> + <div></div> +</div> +<div class="columns tall"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill short"> + <div></div> + <div></div> +</div> +<div class="columns fill short"> + <div> <br> </div> + <div> <br> </div> +</div> +<div class="columns fill tall"> + <div></div> + <div></div> +</div> +<div class="columns fill tall"> + <div> <br> </div> + <div> <br> </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print-ref.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print-ref.html new file mode 100644 index 0000000000..baf114d35c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Fragmentation Reference: Print a multi-column container containing break-inside:avoid elements</title> + <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; + } + div { + width: 100%; + height: 1in; + background: green; + } + </style> + + <article> + <!-- page 1 --> + <div style="width: 100%"></div> + <div style="width:50%"></div> + + <!-- page 2 --> + <div style="width: 100%"></div> + <div style="width: 50%"></div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print.html b/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print.html new file mode 100644 index 0000000000..a97ac9f5cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-inside-avoid-multicol-001-print.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Fragmentation Test: Print a multi-column container containing break-inside:avoid elements</title> + <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/#break-within"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1831829"> + <link rel="match" href="break-inside-avoid-multicol-001-print-ref.html"> + + <style> + @page { + size: 5in 3in; + margin: 0.5in; + } + body { + margin: 0; + } + article { + column-count: 2; + column-gap: 0; + } + article > div { + width: 100%; + height: 3in; + background: green; + break-inside: avoid; + } + </style> + + <article> + <!-- page 1 --> + <div></div> + + <!-- page 2 --> + <div></div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print-ref.html b/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print-ref.html new file mode 100644 index 0000000000..3459e25edd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Fragmentation Test Reference: Test for pagination of a nested float element in a table in a printing context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + margin: 0; + } + #target { + background: green; + width: 2in; + height: 6in; /* Expected to cover 3 pages. */ + } + </style> + + <body> + <div id="target"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print.html b/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print.html new file mode 100644 index 0000000000..e4e0a578e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-nested-float-in-table-001-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Fragmentation Test: Test for pagination of a nested float element in a table in a printing context</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1412687"> + <link rel="match" href="break-nested-float-in-table-001-print-ref.html"> + + <style> + @page { size:5in 3in; margin:0.5in; } + + html, body { + margin: 0; + } + table { + border-spacing: 0; + } + td { + padding: 0; + } + #target { + float: left; + background: green; + width: 2in; + height: 6in; /* Expected to cover 3 pages. */ + } + </style> + + <body> + <table> + <tr> + <td> + <div> + <!-- target needs to be nested under <td> --> + <div id="target"></div> + </div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/break-overflowed-block-dynamic-001.html b/testing/web-platform/tests/css/css-break/break-overflowed-block-dynamic-001.html new file mode 100644 index 0000000000..9afdab1d8b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/break-overflowed-block-dynamic-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>Test for dynamic re-pagination of a overflowed block element</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559961"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <style> + #multicol { + columns: 2; + column-fill: auto; + column-gap: 0; + height: 400px; /* Must be large enough so that .target doesn't break initially. */ + width: 100px; + background: red; + } + #block { + height: 25px; + } + #target { + background: green; + width: 50px; + height: 200px; /* Expected to be broken into 2 columns after runTest() */ + } + </style> + + <script> + function runTest() { + document.body.offsetHeight; + document.getElementById("multicol").style.height = "100px"; + } + </script> + + <body onload="runTest()"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="multicol"> + <div id="block"> + <div id="target"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/change-block-background.html b/testing/web-platform/tests/css/css-break/change-block-background.html new file mode 100644 index 0000000000..48d33e39b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-block-background.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278652"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div style="columns:5; column-gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="height:200px; background:green;"></div> + <div id="elm" style="height:300px; background:red;"></div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + elm.style.background = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/change-break-after.html b/testing/web-platform/tests/css/css-break/change-break-after.html new file mode 100644 index 0000000000..752a84ae7b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-break-after.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div id="elm" style="height:100px; background:green;"></div> + <div style="height:100px; background:green;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.breakAfter = "column"; +</script> diff --git a/testing/web-platform/tests/css/css-break/change-break-after2.html b/testing/web-platform/tests/css/css-break/change-break-after2.html new file mode 100644 index 0000000000..b35a187a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-break-after2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:100px;"> + <div id="elm" style="break-after:column; height:50px; background:green;"></div> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:green;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.breakAfter = "auto"; +</script> diff --git a/testing/web-platform/tests/css/css-break/change-break-before.html b/testing/web-platform/tests/css/css-break/change-break-before.html new file mode 100644 index 0000000000..303a1fb00d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-break-before.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div id="elm" style="height:100px; background:green;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.breakBefore = "column"; +</script> diff --git a/testing/web-platform/tests/css/css-break/change-break-inside.html b/testing/web-platform/tests/css/css-break/change-break-inside.html new file mode 100644 index 0000000000..e7b7047984 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-break-inside.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-within"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=948828"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div id="elm" style="height:100px; background:green;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.breakInside = "avoid"; +</script> diff --git a/testing/web-platform/tests/css/css-break/change-inline-color-ref.html b/testing/web-platform/tests/css/css-break/change-inline-color-ref.html new file mode 100644 index 0000000000..7f99f57a67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-inline-color-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<style> + .fakecolumn { + width: 1em; + text-align: center; + } +</style> +<p>The word PASS should be seen below.</p> +<div style="display:flex; color:green;"> + <div class="fakecolumn">P</div> + <div class="fakecolumn">A</div> + <div class="fakecolumn">S</div> + <div class="fakecolumn">S</div> +</div> diff --git a/testing/web-platform/tests/css/css-break/change-inline-color.html b/testing/web-platform/tests/css/css-break/change-inline-color.html new file mode 100644 index 0000000000..9da2c8e8f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/change-inline-color.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/"> + <link rel="match" href="change-inline-color-ref.html"> + <p>The word PASS should be seen below.</p> + <div style="columns:4; width:4em; text-align:center; column-gap:0; orphans:1; widows:1; color:white;"> + <span id="span"> + P A S S + </span> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + span.style.color = "green"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1283776-000-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1283776-000-crash.html new file mode 100644 index 0000000000..6df83b5e63 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1283776-000-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=1283776"> +<span style="columns:1;"> + <div></div> + <div style="display:flex;"></div> + <div style="display:table;"></div> + <div style="display:grid;"></div> +</span> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1283776-001-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1283776-001-crash.html new file mode 100644 index 0000000000..1c242a99c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1283776-001-crash.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=1283776"> +<ruby style="columns:1;"> + <div style="display:flex;"></div> + <div style="display:table-row-group;"></div> + <div id="wedge" style="display:none;"></div> + <div style="display:table-row-group;"></div> +</ruby> +<script> + document.body.offsetTop; + // Insert something non-tabley between the two table row groups, + // forcing us to split the anonymous table into two. + wedge.style.display = "block"; +</script> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1285596-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1285596-crash.html new file mode 100644 index 0000000000..756db89b0e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1285596-crash.html @@ -0,0 +1,13 @@ +<!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=1285596"> +<div id="elm" style="columns:2;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> +</div> +<div style="display:table-row-group;"></div> +<script> + document.body.offsetTop; + elm.style.display = "table-row-group"; +</script> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1287342-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1287342-crash.html new file mode 100644 index 0000000000..fcd21f8a26 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1287342-crash.html @@ -0,0 +1,12 @@ +<!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=1287342"> +<div> + <div id="a" style="columns:2; display:table;"></div> + <div id="b" style="columns:2; display:inline-table;"></div> +</div> +<script> + document.body.offsetTop; + a.style.display = "table-row-group"; + b.appendChild(a); +</script> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1288769-000-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1288769-000-crash.html new file mode 100644 index 0000000000..884c92f085 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1288769-000-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<div id="container"> + <div id="child" style="columns:2;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.columns = "2"; + container.style.display = "inline-table"; + child.style.display = "table-footer-group"; +</script> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1288769-001-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1288769-001-crash.html new file mode 100644 index 0000000000..bf7ab3b7e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1288769-001-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<div id="container"> + <div id="child" style="columns:2;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.columns = "2"; +</script> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1289999-crash.https.html b/testing/web-platform/tests/css/css-break/chrome-bug-1289999-crash.https.html new file mode 100644 index 0000000000..fab89f06d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1289999-crash.https.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=1289999"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + <div style="position:relative; display:layout(foo); height:150px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/chrome-bug-1318455-crash.html b/testing/web-platform/tests/css/css-break/chrome-bug-1318455-crash.html new file mode 100644 index 0000000000..f18a166e8c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/chrome-bug-1318455-crash.html @@ -0,0 +1,30 @@ +<!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=1318455"> +<ul id="multicol" style="columns:34; column-fill:auto; height:50px; line-height:20px;"> + <div style="float:left; padding:3px;"> + <br><br><br> + </div> + <div style="float:left; position:relative; padding:3px;"> + <br><br><br> + <div style="position:absolute;"></div> + </div> + <li style="float:left;"> + <div></div> + <a style="float:left;"> + <li style="position:relative;"> + <br> + <div style="position:absolute;"></div> + </li> + </a> + </li> + <div id="surprise" style="display:none; height:150px;"></div> +</ul> +<script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + surprise.style.display = "inline-block"; + multicol.style.height = "150px"; + }); + }); +</script> diff --git a/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-000.html b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-000.html new file mode 100644 index 0000000000..46880977bb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-000.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div> + <div style="float:left; width:100%; height:50px; background:green;"></div> + <div style="break-inside:avoid; clear:left;"> + <div style="float:left; width:100%; height:10px; background:green;"></div> + <div style="height:10px;"></div> + <div style="height:90px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-001.html b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-001.html new file mode 100644 index 0000000000..be675ccf48 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="float:left; width:100%; height:50px;"></div> + <div style="background:green;"> + <div style="clear:both; height:10px;"> + <div style="float:left; width:100%; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-002.html b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-002.html new file mode 100644 index 0000000000..110b4e7e1a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="There should be a class C breakpoint after the float, since the flow-root sibling is cleared past the float (but note that it would otherwise fit beside it), so that there'll be a gap to establish a class C break opportunity"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="width:200%;"> + <div style="width:50%; height:50px; background:green;"></div> + <div style="float:left; width:50%; height:40px; background:green;"></div> + <div style="clear:both; width:50%; background:green;"> + <div style="float:left; width:10px; height:10px;"></div> + <div style="clear:both; display:flow-root; break-inside:avoid; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-003.html b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-003.html new file mode 100644 index 0000000000..0923e1ac9e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<meta name="assert" content="There should be a class C breakpoint after the float, since the flow-root sibling doesn't fit beside the float, so that there'll be a gap to establish a class C break opportunity"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="width:200%;"> + <div style="width:50%; height:50px; background:green;"></div> + <div style="float:left; width:50%; height:40px; background:green;"></div> + <div style="clear:both; width:50%; background:green;"> + <div style="float:left; width:100%; height:5px;"></div> + <div style="display:flow-root; break-inside:avoid; width:50px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-004.html b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-004.html new file mode 100644 index 0000000000..30cdc56db7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/class-c-breakpoint-after-float-004.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<meta name="assert" content="Note that this test tests that there'll be *no* class C breakpoint after the float, since the flow-root sibling can fit beside the float, so that there'll be no gap to establish a class C break opportunity"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="width:200%;"> + <div style="width:50%; height:50px;"></div> + <div style="float:left; width:50%; height:40px;"></div> + <div style="clear:both; width:50%; background:red;"> + <div style="float:left; width:10px; height:100px; background:green;"></div> + <div style="display:flow-root; break-inside:avoid; width:40px; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clear-br-in-size-containment-crash.html b/testing/web-platform/tests/css/css-break/clear-br-in-size-containment-crash.html new file mode 100644 index 0000000000..118e9a7901 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clear-br-in-size-containment-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308247"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="height:90px;"></div> + <div style="float:left; width:10px; height:20px;"></div> + <div style="contain:size"> + <br clear="left"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clear-float-in-size-containment-crash.html b/testing/web-platform/tests/css/css-break/clear-float-in-size-containment-crash.html new file mode 100644 index 0000000000..13d0200ec5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clear-float-in-size-containment-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=1308247"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="float:left; width:10px; height:150px;"></div> + <div style="contain:size;"> + <div style="float:left; clear:left; width:10px; height:10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clear-past-float-with-oof-twice-crash.html b/testing/web-platform/tests/css/css-break/clear-past-float-with-oof-twice-crash.html new file mode 100644 index 0000000000..82317ca85b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clear-past-float-with-oof-twice-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318455"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="position:relative; float:left; width:100%;"> + <div style="height:141px;"></div> + <div style="position:absolute;"></div> + </div> + <p style="clear:left; contain:size; width:100%; height:80px;"></p> +</div> diff --git a/testing/web-platform/tests/css/css-break/clearance-parallel-flow-001.html b/testing/web-platform/tests/css/css-break/clearance-parallel-flow-001.html new file mode 100644 index 0000000000..f7acd7f4f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clearance-parallel-flow-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1370969"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; width:100%; height:10px; background:green;"></div> + <div style="height:50px;"></div> + <div style="float:left; width:100%; height:20px; background:green;"></div> + </div> + <div style="clear:left;"> + <div style="height:20px; background:green;"></div> + <div style="height:10px; background:green;"></div> + <div style="height:10px; background:green;"></div> + <div style="clear:left; height:60px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clearance-parallel-flow-002.html b/testing/web-platform/tests/css/css-break/clearance-parallel-flow-002.html new file mode 100644 index 0000000000..a2367e0dde --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clearance-parallel-flow-002.html @@ -0,0 +1,28 @@ +<!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=1370969"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; width:100%; height:10px; background:green;"></div> + <div style="height:50px;"></div> + <div style="float:left; width:20px; height:20px; background:green;"></div> + </div> + <!-- We start layout of the flex container in the first column. We'll clear + past the first float, but the second float will end up in the second + column, in a parallel flow (due to overflow caused by the restricted + block-size of the container). When we resume the flex container in the + second container, we shouldn't apply any additional clearance, since + that's something that's placed *before* the block-start margin box, and + we're way past that in the second column. Being a well-behaved formatting + context root, though, means that the flex container shouldn't overlap + with the float in the second column. --> + <div style="display:flex; flex-flow:column; clear:left;"> + <div style="height:20px; background:green;"></div> + <div style="margin-left:-20px; width:50px; height:20px; background:green;"></div> + <div style="width:30px; height:20px; background:green;"></div> + <div style="margin-left:-20px; width:50px; height:60px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clearance-self-collapsing-past-fragmented-float.html b/testing/web-platform/tests/css/css-break/clearance-self-collapsing-past-fragmented-float.html new file mode 100644 index 0000000000..14445edc46 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clearance-self-collapsing-past-fragmented-float.html @@ -0,0 +1,12 @@ +<!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=1379809"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:20px; background:green;"></div> + <div style="background:green;"> + <div style="float:left; width:10px; height:180px;"></div> + <div style="clear:both;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clipping-001.html b/testing/web-platform/tests/css/css-break/clipping-001.html new file mode 100644 index 0000000000..da15ec7a2e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clipping-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:25px; background:green;"></div> + <div style="position:relative; overflow:clip; height:150px;"> + <div> + <div style="position:absolute; top:-25px; width:100%;"> + <div style="height:25px; background:red;"></div> + <div style="height:150px; background:green;"></div> + <div style="height:25px; background:red;"></div> + </div> + </div> + </div> + <div style="height:25px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/clipping-002.html b/testing/web-platform/tests/css/css-break/clipping-002.html new file mode 100644 index 0000000000..e1f2c4e1c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/clipping-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211"> +<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="height:25px; background:green;"></div> + <div style="position:relative; overflow:clip; height:350px;"> + <div> + <div style="position:absolute; top:-25px; width:100%;"> + <div style="height:25px; background:red;"></div> + <div style="height:350px; background:green;"></div> + <div style="height:25px; background:red;"></div> + </div> + </div> + </div> + <div style="height:25px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/column-balancing-with-oofs-crash.html b/testing/web-platform/tests/css/css-break/column-balancing-with-oofs-crash.html new file mode 100644 index 0000000000..a74e651dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/column-balancing-with-oofs-crash.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1362550"> +<style> + .multicol { + column-count: 2; + width: 200px; + } + .relpos { + position: relative; + } + .abspos { + height: 25%; + position: absolute; + } +</style> +<div class="multicol"> + <div class="relpos"> + <div class="abspos"> + <p> + text + </p> + </div> + </div> + <figure class="relpos"> + <div class="abspos"> + <p> + text + </p> + </div> + </figure> +</div> diff --git a/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof-ref.html b/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof-ref.html new file mode 100644 index 0000000000..a9c82c4f3e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a (pale) green square below, and no (pale) red.</p> +<div style="will-change:transform; contain:strict; width:100px; height:100px;"> + <div style="opacity:0.2; width:100px; height:100px;"> + <div style="width:100px; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof.html b/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof.html new file mode 100644 index 0000000000..b3323a60c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof.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-break-3/"> +<link rel="match" href="contain-strict-with-opacity-and-oof-ref.html"> +<p>There should be a (pale) green square below, and no (pale) red.</p> +<div style="columns:3; margin-top:-50px; column-fill:auto; height:200px;"> + <div style="height:50px;"></div> + <div style="will-change:transform; contain:strict; width:100px; height:100px;"> + <div style="opacity:0.2; width:100px; height:100px; background:red;"> + <div style="position:absolute; width:100px; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/empty-fieldset-tall-bottom-padding-crash.html b/testing/web-platform/tests/css/css-break/empty-fieldset-tall-bottom-padding-crash.html new file mode 100644 index 0000000000..170a744b28 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/empty-fieldset-tall-bottom-padding-crash.html @@ -0,0 +1,6 @@ +<!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=1322426"> +<div style="columns:2; height:100px; column-fill:auto;"> + <fieldset style="margin:0; border:none; padding:0; border-bottom:1px solid; padding-bottom:200px;"></fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/empty-multicol-at-scrollport-edge.html b/testing/web-platform/tests/css/css-break/empty-multicol-at-scrollport-edge.html new file mode 100644 index 0000000000..b8813ed9cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/empty-multicol-at-scrollport-edge.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<meta name="assert" content="When flowing into fragmentainers, we require them to accept at least 1px of content in the block direction, in order to guarantee progress. But the block-size of the fragmentainer itself shouldn't be stretched to 1px, as that would lead to overflow contibution"> +<div id="container" style="width:100px; height:100px; overflow:auto;"> + <div style="height:100px;"></div> + <div style="columns:3;"><div></div></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(container.scrollHeight, 100); + }, "empty multicol doesn't add layout overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-break/fieldset-001-ref.html b/testing/web-platform/tests/css/css-break/fieldset-001-ref.html new file mode 100644 index 0000000000..1422086da7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-001-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html><head> +<title>Reference: fragmenting a fieldset in multicol layout</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + * { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + body { width:600px; height:600px; } + + .cols { columns:3; background:grey; margin-bottom: 10px; height:80px; column-fill:auto; } + .c2 { column-count:2; height:120px; } + legend { background:black; width:100px; height:19px; } + p { + position: relative; + border: solid; + border-width: 6px 3px 10px 7px; + margin: 3px 10px 7px 5px; + background-color: lightgrey; + } + p, legend { + background-clip: content-box; + padding: 10px 7px 20px 3px; + } + p { margin-top: 25px; } + legend { + position: absolute; + padding: 0; + border: 0 solid grey; + border-left-width: 3px; + border-right-width: 7px; + top: -18px; left: 3px; + } + p.sized { + height: 86px; + } + c { display:block; background:blue; opacity:.5; height:108px; } + pad { display:block; height: 21px; background-color: lightgrey;} +</style> +</head> +<body> + <div class="cols"> + <p><legend></legend><pad></pad><c></c></p> + </div> + <div class="cols c2"> + <p><legend></legend><pad></pad><c></c></p> + </div> + <div class="cols"> + <p class="sized"><legend></legend><pad></pad><c style="height:98px"></c><c style="width:154px;height:10px"></c></p> + </div> + <div class="cols c2"> + <p class="sized"><legend></legend><pad></pad><c></c></p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/fieldset-001.html b/testing/web-platform/tests/css/css-break/fieldset-001.html new file mode 100644 index 0000000000..d320fe15be --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html><head> +<title>CSS Test: fragmenting a fieldset in multicol layout</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-break/#valdef-box-decoration-break-slice"> +<link rel="match" href="fieldset-001-ref.html"> +<style> + * { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; + } + body { width:600px; height:600px; } + + .cols { columns:3; background:grey; margin-bottom: 10px; height:80px; column-fill:auto; } + .c2 { column-count:2; height:120px; } + legend { background:black; width:100px; height:19px; } + fieldset { + background-color: lightgrey; + border: solid; + border-width: 6px 3px 10px 7px; + margin: 3px 10px 7px 5px; + } + fieldset, legend { + background-clip: content-box; + padding: 10px 7px 20px 3px; + } + fieldset.sized { + height: 108px; + } + c { display:block; background:blue; opacity:.5; height:108px; } +</style> +</head> +<body> + <div class="cols"> + <fieldset><legend></legend><c></c></fieldset> + </div> + <div class="cols c2"> + <fieldset><legend></legend><c></c></fieldset> + </div> + <div class="cols"> + <fieldset class="sized"><legend></legend><c></c></fieldset> + </div> + <div class="cols c2"> + <fieldset class="sized"><legend></legend><c></c></fieldset> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/fieldset-002-ref.html b/testing/web-platform/tests/css/css-break/fieldset-002-ref.html new file mode 100644 index 0000000000..be5e1b0e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-002-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. The top border should only be in the first column, and + the bottom border should only be in the third.</p> +<div style="float:left; border:10px solid pink; border-bottom:none; width:140px; height:190px; background:lightblue;"></div> +<div style="float:left; margin-left:10px; border:10px solid pink; border-top:none; border-bottom:none; width:140px; height:200px; background:lightblue;"></div> +<div style="float:left; margin-left:10px; border:10px solid pink; border-top:none; width:140px; height:110px; background:lightblue;"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/fieldset-002.html b/testing/web-platform/tests/css/css-break/fieldset-002.html new file mode 100644 index 0000000000..9331b81b11 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="fieldset-002-ref.html"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. The top border should only be in the first column, and + the bottom border should only be in the third.</p> +<div style="column-count:3; column-fill:auto; column-gap:10px; width:500px; height:200px;"> + <fieldset style="border:10px solid pink; margin:0; padding:0; height:500px; background:lightblue;"></fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset-003-ref.html b/testing/web-platform/tests/css/css-break/fieldset-003-ref.html new file mode 100644 index 0000000000..e8b323dff2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-003-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. Its blue violet legend should only be in the first column, + consuming the top border. The bottom border should only be in the third column. +</p> +<div style="float:left; border:60px solid pink; border-bottom:none; width:100px; height:0;"> + <div style="margin-top:-60px; background:lightblue; height:60px"></div> + <div style="margin-top:-55px; background:blueviolet; height:50px"></div> +</div> +<div style="float:left; margin-left:10px; border:60px solid pink; border-top:none; border-bottom:none; width:100px; height:10px; background:lightblue;"></div> +<div style="float:left; margin-left:10px; border:60px solid pink; border-top:none; width:100px; height:0; background:lightblue;"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/fieldset-003.html b/testing/web-platform/tests/css/css-break/fieldset-003.html new file mode 100644 index 0000000000..dbf69a4034 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="fieldset-003-ref.html"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. Its blue violet legend should only be in the first column, + consuming the top border. The bottom border should only be in the third column. +</p> +<div style="column-count:3; column-fill:auto; column-gap:10px; width: 680px; height:40px;"> + <fieldset style="margin:0; border:60px solid pink; padding:0; width:100px; background:lightblue; height:10px;"> + <legend style="padding:0; width:100px; height:50px; background:blueviolet;"></legend> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset-004-ref.html b/testing/web-platform/tests/css/css-break/fieldset-004-ref.html new file mode 100644 index 0000000000..5c96f31a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-004-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. Its blue violet legend should only be in the first column, + and past the fragmentation line. The bottom border should only be in the third + column. +</p> +<div style="float:left; margin-top:145px; border:10px solid pink; border-bottom:none; width:140px; height:145px; background:lightblue;"> + <div style="margin-top:-155px; background:blueviolet; width:50px; height:300px"></div> +</div> +<div style="float:left; margin-left:10px; border:10px solid pink; border-top:none; border-bottom:none; width:140px; height:200px; background:lightblue;"></div> +<div style="float:left; margin-left:10px; border:10px solid pink; border-top:none; width:140px; height:100px; background:lightblue;"></div> + diff --git a/testing/web-platform/tests/css/css-break/fieldset-004.html b/testing/web-platform/tests/css/css-break/fieldset-004.html new file mode 100644 index 0000000000..4b49e6a594 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Ana Sollano Kim" href="mailto:ansollan@microsoft.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="fieldset-004-ref.html"> +<p>There should be a light blue fieldset that starts in the first column and + ends in the third. Its blue violet legend should only be in the first column, + and past the fragmentation line. The bottom border should only be in the third + column. +</p> +<div style="column-count:3; column-fill:auto; column-gap:10px; width:500px; height:200px;"> + <fieldset style="border:10px solid pink; margin:0; padding:0; height:590px; background:lightblue;"> + <legend style="padding:0; margin:0; width:50px; height:300px; background:blueviolet;"></legend> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset-005.html b/testing/web-platform/tests/css/css-break/fieldset-005.html new file mode 100644 index 0000000000..814e4d33c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:160px;"> + <div style="height:40px; background:green;"></div> + <fieldset style="border:none; border-bottom:40px solid green; padding:0; margin:0;"> + <div style="break-inside:avoid; height:60px; background:green;"></div> + <div style="break-inside:avoid; height:60px; background:green;"></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset-006.html b/testing/web-platform/tests/css/css-break/fieldset-006.html new file mode 100644 index 0000000000..b642a870e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-006.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + columns:2; + column-gap:0; + column-fill:auto; + width:100px; + height:100px; + margin-left:-50px; + } + fieldset { + border:none; + margin:0; + padding:0px; + width:50px; + } + legend { + padding:0px; + margin:0px; + width:50px; + height:100px; + background: green; + } + #abs { + position:absolute; + width:100px; + height:100px; + background:red; + z-index:-1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="abs"></div> +<div id="multicol"> + <div style="height:50px;"></div> + <fieldset> + <legend></legend> + <div style="height:100px; background:green;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset-007.html b/testing/web-platform/tests/css/css-break/fieldset-007.html new file mode 100644 index 0000000000..37bd1ac2e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset-007.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + fieldset { margin:0; border:none; padding:0; } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <fieldset style="max-height:100px;"> + <div style="height:300px; background:green;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/fieldset.html b/testing/web-platform/tests/css/css-break/fieldset.html new file mode 100644 index 0000000000..fe76988293 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fieldset.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + fieldset { margin:0; border:none; padding:0; } + .block { break-inside:avoid; height:50px; background:green; } + .fail { background:red; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; width:100px; height:140px; column-gap:0; overflow:hidden;"> + <fieldset> + <div class="block"></div> + <div class="block"></div> + <div class="block"></div> + <div class="block"></div> + + <!-- No room for this - should be clipped: --> + <div class="block fail"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/firefox-bug1693616-001-crash.html b/testing/web-platform/tests/css/css-break/firefox-bug1693616-001-crash.html new file mode 100644 index 0000000000..5aadb70037 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/firefox-bug1693616-001-crash.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<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/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616"> +<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone, whose block-start border and padding exceed the multicol's height, can make progress when fragmenting without hanging the browser."> + +<style> +#a { + column-count: 2; +} +#b { + box-decoration-break: clone; + padding: 4px 0px; + border: 1px dotted black; +} +* { + height: 19%; +} +</style> +Hopefully this doesn't hang. +<div id="a"> +<div id="b"> diff --git a/testing/web-platform/tests/css/css-break/firefox-bug1693616-002-crash.html b/testing/web-platform/tests/css/css-break/firefox-bug1693616-002-crash.html new file mode 100644 index 0000000000..01f836c805 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/firefox-bug1693616-002-crash.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<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/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616"> +<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone, whose block-start border and padding exceed the multicol's height, can make progress when fragmenting without hanging the browser."> + +<style> +#a { + column-count: 2; + height: 5px; +} +#b { + box-decoration-break: clone; + padding: 4px 0px; + border: 1px dotted black; + height: 10px; +} +</style> +Hopefully this doesn't hang. +<div id="a"> +<div id="b"> diff --git a/testing/web-platform/tests/css/css-break/flex-item-padding-block-in-inline-crash.html b/testing/web-platform/tests/css/css-break/flex-item-padding-block-in-inline-crash.html new file mode 100644 index 0000000000..4341877115 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flex-item-padding-block-in-inline-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1453643"> +<p>Pass if no freeze or crash.</p> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="display:flex;"> + <div> + <span> + <div style="display:flex; margin-top:10px;"> + <div style="padding-bottom:100px;"></div> + <div> + <div style="height:50px;"></div> + </div> + </div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/button-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/button-in-multicol-crash.html new file mode 100644 index 0000000000..30e373542a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/button-in-multicol-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1277724"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:2;"> + x + <button style="display:block;"></button> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/fixed-flex-item-inside-abs-flex-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/fixed-flex-item-inside-abs-flex-in-multicol-crash.html new file mode 100644 index 0000000000..29ba56748f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/fixed-flex-item-inside-abs-flex-in-multicol-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1269228"> +<div id="elm" style="contain:layout; width:200px;"> + <div style="columns:2;"> + <div style="display:flex; padding:10%; position:absolute;"> + <div style="position:fixed;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.width = "199px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-001.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-001.html new file mode 100644 index 0000000000..2076de1e0b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation (with no items). +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + background: green; + border: 3px solid green; + display: flex; + padding: 5px; + width: 9px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex" style="height: 134px;"></div> + <div class="flex" style="height: 234px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-002.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-002.html new file mode 100644 index 0000000000..91ebe6d6cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + position: relative; + width: 100px; + } + .flex { + background: green; + break-inside: avoid; + display: flex; + width: 25px; + } + .abs { + background: green; + height: 50px; + position: absolute; + width: 25px; + top: 50px; + left: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex" style="height: 250px;"></div> + <div class="flex" style="height: 100px;"></div> + <div class="abs"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-003.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-003.html new file mode 100644 index 0000000000..d1d192f9c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation with break-before: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + position: relative; + width: 100px; + } + .flex { + background: green; + display: flex; + width: 25px; + } + .abs { + height: 50px; + position: absolute; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex" style="height: 50px;"></div> + <div class="flex" style="height: 50px;"></div> + <div class="flex" style="height: 300px; break-before: avoid;"></div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-004.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-004.html new file mode 100644 index 0000000000..dffce5a19c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation with break-after: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + position: relative; + width: 100px; + } + .flex { + background: green; + display: flex; + width: 25px; + } + .abs { + height: 50px; + position: absolute; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex" style="height: 50px;"></div> + <div class="flex" style="height: 50px; break-after: avoid;"></div> + <div class="flex" style="height: 300px;"></div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-005.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-005.html new file mode 100644 index 0000000000..d8b1e30934 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation with break-before: column. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + position: relative; + width: 100px; + } + .flex { + background: green; + display: flex; + width: 25px; + } + .abs { + height: 50px; + position: absolute; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex" style="height: 50px;"></div> + <div class="flex" style="height: 50px; break-before: column;"></div> + <div class="flex" style="height: 300px;"></div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-006.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-006.html new file mode 100644 index 0000000000..171c981c24 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Flex container fragmentation with tall margin. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + height: 100px; + margin-left: -25px; + width: 100px; + } + .flex { + background: green; + display: flex; + height: 400px; + margin-top: 200px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div class="multicol"> + <div class="flex"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-007.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-007.tentative.html new file mode 100644 index 0000000000..62bcf82bb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-007.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Contenteditable flex container fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 50px; + width: 100px; + } + .flexbox { + display: flex; + padding-top: 20px; + padding-bottom: 100px; + line-height: 80px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div class="multicol"> + <div class="flexbox" contenteditable="true"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-008.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-008.html new file mode 100644 index 0000000000..b9fd1aa2ff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + OOF in fragmented flex container with viewport CB. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 2; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + height: 200px; + width: 50px; + } + .abs { + background: green; + position: absolute; + height: 100px; + width: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-009.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-009.html new file mode 100644 index 0000000000..f4032458c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-009.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + OOF static pos in fragmented flex container with multicol CB. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 2; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + } + .flex { + display: flex; + height: 200px; + width: 50px; + } + .abs { + background: green; + position: absolute; + height: 100px; + width: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-010.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-010.html new file mode 100644 index 0000000000..9a1f4026ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-010.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + OOF static pos in fragmented flex container with multicol CB, with align end. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + } + .flex { + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 400px; + width: 50px; + } + .flex > div { + background: green; + height: 100px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="position:absolute;"></div> + <div></div> + <div></div> + <div></div> + <div style="background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-011.html b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-011.html new file mode 100644 index 0000000000..b4058558ff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-container-fragmentation-011.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + OOF static pos in fragmented flex container with multicol CB, with align center. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + } + .flex { + display: flex; + flex-direction: column; + justify-content: center; + height: 400px; + width: 50px; + } + .flex > div { + background: green; + height: 100px; + width: 25px; + } + .flex > div > div { + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="position:absolute; height:100px;"> + <div></div> + <div style="background:white;"></div> + </div> + <div></div> + <div> + <div></div> + <div style="background:red;"></div> + </div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001-ref.html b/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001-ref.html new file mode 100644 index 0000000000..ead53ad704 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference Case</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .multicol { + width: 300px; + columns: 100px auto; + max-height: 160px; + border: 3px solid pink; + } + .container { + display: flex; + } + .weird-flex-item { + border: 4px solid teal; + outline: 4px solid blue; + } + .tallFloat { + float: left; + border: 3px solid black; + height: 500px; + width: 100px; + background: yellow; + } + .float { + /* In this reference case, this is not actually a float. */ + background: cyan; + width: 100px; + } + .inside-float { + height: 30px; + width: 30px; + background: purple; + display: inline-block; + } + </style> +</head> +<body> + <div class="multicol"> + <div class="container"> + <div class="weird-flex-item"> + <div class="tallFloat"></div> + <br> + <div class="float"> + <div class="inside-float"> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001.html b/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001.html new file mode 100644 index 0000000000..f4cb7a8424 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-fragmented-with-float-descendant-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Floats in fragmented flex container shouldn't improperly inflate overflow areas</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695509"> + <link rel="match" href="flex-fragmented-with-float-descendant-001-ref.html"> + <!-- This is a regression test for a Firefox bug where Firefox was improperly + contributing a float's stale position (at an intermediate point in + layout where it's pushed off the bottom of one column) to the overflow + areas. This test checks for this by using "outline" to visualize the + overflow areas, to ensure they're not unexpectedly large. --> + <style> + .multicol { + width: 300px; + columns: 100px auto; + max-height: 160px; + border: 3px solid pink; + } + .container { + display: flex; + } + .weird-flex-item { + border: 4px solid teal; + outline: 4px solid blue; + } + .tallFloat { + float: left; + border: 3px solid black; + height: 500px; + width: 100px; + background: yellow; + } + .float { + float: left; + background: cyan; + width: 100px; + } + .inside-float { + height: 30px; + width: 30px; + background: purple; + display: inline-block; + } + </style> +</head> +<body> + <div class="multicol"> + <div class="container"> + <div class="weird-flex-item"> + <div class="tallFloat"></div> + <br> + <div class="float"> + <div class="inside-float"> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001-ref.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001-ref.html new file mode 100644 index 0000000000..f4caedc110 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<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=1811548"> + + <style> + div { + box-sizing: border-box; + } + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 300px; + block-size: 100px; + border: 10px solid purple; + } + .flexbox { + display: block; + inline-size: 130px; + block-size: 70px; + border: 10px solid black; + } + .item { + block-size: 50px; + border: 10px solid teal; + } + .grandchild { + border: 10px solid orange; + block-size: 140px; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div class="item"> + <div class="grandchild"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001a.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001a.html new file mode 100644 index 0000000000..0b8074e03b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001a.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests that a flex item's overflow content in the second column has the same inline-size as its previous fragment in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> + <link rel="match" href="flex-item-content-overflow-001-ref.html"> + + <style> + div { + box-sizing: border-box; + } + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 300px; + block-size: 100px; + border: 10px solid purple; + } + .flexbox { + display: flex; + inline-size: 130px; + block-size: 70px; + border: 10px solid black; + } + .item { + flex: 1; + border: 10px solid teal; + } + .grandchild { + border: 10px solid orange; + block-size: 140px; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div class="item"> + <div class="grandchild"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001b.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001b.html new file mode 100644 index 0000000000..50f958614c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-001b.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests that a flex item's overflow content in the second column has the same inline-size as its previous fragment in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> + <link rel="match" href="flex-item-content-overflow-001-ref.html"> + + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 280px; + block-size: 80px; + border: 10px solid purple; + } + .flexbox { + display: flex; + inline-size: 110px; + block-size: 50px; + border: 10px solid black; + } + .item { + flex: 1; + border: 10px solid teal; + } + .grandchild { + border: 10px solid orange; + block-size: 120px; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div class="item"> + <div class="grandchild"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002a.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002a.html new file mode 100644 index 0000000000..18e659dd3e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002a.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests that a flex item's overflow content in the second column has the same inline-size as its previous fragment in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> + <link rel="match" href="flex-item-content-overflow-001-ref.html"> + + <style> + div { + box-sizing: border-box; + } + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 300px; + block-size: 100px; + border: 10px solid purple; + } + .flexbox { + display: flex; + flex-direction: column; + inline-size: 130px; + block-size: 70px; + border: 10px solid black; + } + .item { + flex: 1; + min-height: 0; + border: 10px solid teal; + } + .grandchild { + border: 10px solid orange; + block-size: 140px; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div class="item"> + <div class="grandchild"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002b.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002b.html new file mode 100644 index 0000000000..af985b2aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-002b.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests that a flex item's overflow content in the second column has the same inline-size as its previous fragment in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> + <link rel="match" href="flex-item-content-overflow-001-ref.html"> + + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + inline-size: 280px; + block-size: 80px; + border: 10px solid purple; + } + .flexbox { + display: flex; + flex-direction: column; + inline-size: 110px; + block-size: 50px; + border: 10px solid black; + } + .item { + flex: 1; + min-height: 0; + border: 10px solid teal; + } + .grandchild { + border: 10px solid orange; + block-size: 120px; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div class="item"> + <div class="grandchild"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-003.html b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-003.html new file mode 100644 index 0000000000..d3a5b976cc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flex-item-content-overflow-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1417976"> +<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;"> + <div style="display:flex;"> + <div style="width:100px; max-height:50px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px; background:red;"></div> + </div> + </div> + <div style="position:relative; width:100px; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/flexbox-fragmentation-layout-001-crash.html b/testing/web-platform/tests/css/css-break/flexbox/flexbox-fragmentation-layout-001-crash.html new file mode 100644 index 0000000000..3577b42cf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/flexbox-fragmentation-layout-001-crash.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Flexbox: flexbox fragmentation</title> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708007"> + <style> + * { + display: inline-flex; + border-left-style: ridge; + border-top: green ridge 3289332275.907055mm; + box-sizing: border-box; + white-space: pre; + max-block-size: 2307181333.664816mm; + float: inline-end; + columns: 2800509010 1630715400.2851658ex; + </style> + <script> + window.addEventListener('load', () => { + const details = document.createElement('details') + details.setAttribute('open', true) + const span = document.createElement('span') + const small = document.createElement('small') + small.innerText = '𧄚۹㏬1q/\n\rI퐆҆徢۹𠹅𝅧۹٠𖩡zc\r\naB-=^�辴x?>>>=𝅯🨸-銒㿎٩𢂷+=\bᣰ&\b\r0A۹' + span.appendChild(small) + details.appendChild(span) + document.documentElement.appendChild(details) + }) + </script> +</head> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/float-in-webkit-box-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/float-in-webkit-box-in-multicol-crash.html new file mode 100644 index 0000000000..e93974994b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/float-in-webkit-box-in-multicol-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318035"> +<div style="column-count:2;"> + <div style="display:-webkit-box;"> + <div style="float:left;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-001.html b/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-001.html new file mode 100644 index 0000000000..3c8a6c5294 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1315004"> +<div style="height: 10px; column-count: 2;"> + <div style="display: flex; height: 8px;"> + <img src="somelink" height="20" width="156"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-002.html b/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-002.html new file mode 100644 index 0000000000..a63c5be6c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/image-in-fragmented-flexbox-crash-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1370404"> +<div style="column-width:50px;"> + <div style="display:flex; flex-wrap:wrap-reverse;"> + text text + <image src="" width="2" height="2"></image> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/increase-fragmentainer-size-flex-item-trailing-margin.html b/testing/web-platform/tests/css/css-break/flexbox/increase-fragmentainer-size-flex-item-trailing-margin.html new file mode 100644 index 0000000000..94845449fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/increase-fragmentainer-size-flex-item-trailing-margin.html @@ -0,0 +1,16 @@ +<!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=1395408"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399449"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="columns:1; width:100px; column-fill:auto; height:90px; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="display:flex; background:green;"> + <div style="margin-bottom:10px; height:50px; width:100px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + mc.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/flexbox/monolithic-item-in-fragmented-flexbox-crash.html b/testing/web-platform/tests/css/css-break/flexbox/monolithic-item-in-fragmented-flexbox-crash.html new file mode 100644 index 0000000000..edf13244e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/monolithic-item-in-fragmented-flexbox-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1315004"> +<div style="height: 10px; column-count: 2; column-fill: auto;"> + <div style="display: flex;"> + <div style="height: 20px; contain: size;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-001.tentative.html new file mode 100644 index 0000000000..1171485181 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-001.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:flex; flex-flow:column; height:100px; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-002.tentative.html new file mode 100644 index 0000000000..298f749a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-002.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:flex; flex-flow:column; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-003.tentative.html new file mode 100644 index 0000000000..ed223e809f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-003.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:flex; flex-flow:column; height:200px; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-004.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-004.tentative.html new file mode 100644 index 0000000000..ed7fea725c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/monolithic-overflow-004.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:flex; flex-flow:column; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-001.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-001.html new file mode 100644 index 0000000000..9f064d4ae4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Simple multi-line column flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + width: 50px; + } + .flex > div { + background: green; + height: 200px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-002.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-002.html new file mode 100644 index 0000000000..ea8190173f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-002.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with item overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + width: 50px; + } + .flex > div { + height: 100px; + width: 25px; + } + .flex > div > div { + height: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div style="height: 100px;"></div> + <div style="background: red;"></div> + <div></div> + </div> + <div> + <div></div> + </div> + <div> + <div style="height: 100px;"></div> + <div style="background: red;"></div> + <div></div> + </div> + <div> + <div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-003.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-003.html new file mode 100644 index 0000000000..eb00937ea4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation intrinsic block size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 20px; + background: green; + } + .flex > div { + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 150px;"></div> + <div style="height: 300px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-004.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-004.html new file mode 100644 index 0000000000..71e29df7f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + width: 50px; + } + .flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 150px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-005.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-005.html new file mode 100644 index 0000000000..a713943ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-005.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with nested OOFs. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + position: relative; + height: 500px; + width: 20px; + } + .flex > div { + height: 500px; + width: 10px; + } + .abs { + background: green; + position: absolute; + width: 10px; + top: 0; + bottom: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div class="abs"></div> + </div> + <div style="position: relative;"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-006.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-006.html new file mode 100644 index 0000000000..f3936040bb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with items that stretch. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + position: relative; + height: 500px; + width: 20px; + } + .flex > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 250px;"></div> + <div style="height: 250px;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-007.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-007.html new file mode 100644 index 0000000000..e5602f0bb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with items that stretch. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + position: relative; + height: 500px; + width: 20px; + } + .flex > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 250px;;"></div> + <div style="height: 250px;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-008.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-008.html new file mode 100644 index 0000000000..9d4f0a6f61 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-008.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + width: 50px; + position: relative; + } + .flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="position: absolute; top: 50px; left: 25px; height: 150px;"></div> + <div style="height: 150px;"></div> + <div style="height: 25px;"></div> + <div style="height: 25px;"></div> + <div style="height: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-009.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-009.html new file mode 100644 index 0000000000..8e4ae4e196 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-009.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap;"> + <div style="width: 50px; line-height: 0; background: green;"> + <div style="contain: size; height: 20px;"></div> + <div style="contain: size; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-010.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-010.html new file mode 100644 index 0000000000..98008eec4e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-010.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with a fixed block-size container grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 100px;"> + <div style="width: 25px; line-height: 0; background: green;"> + <div style="contain: size; height: 20px;"></div> + <div style="contain: size; height: 100px;"></div> + </div> + <div style="width: 25px; line-height: 0; background: green;"> + <div style="contain: size; height: 20px;"></div> + <div style="contain: size; height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-011.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-011.html new file mode 100644 index 0000000000..c3fbd41fca --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-011.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: Percentage height decendant. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-flow: column; flex-wrap: wrap; height: 200px;"> + <div style="height: 100%; background: green;"></div> + <div style="min-height: 100px;"> + <div style="height: 200%; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-012.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-012.html new file mode 100644 index 0000000000..7552a74185 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flexbox expands its intrinsic block-size, due to a + flex item fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; background: green;"> + <div style="display: flex; flex-wrap: wrap; flex-direction: column;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-013.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-013.html new file mode 100644 index 0000000000..ed739947e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-013.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="line-height: 0; background: green; width: 25px;"> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="background: green; width: 25px; height: 50px;"></div> + <div style="background: green; width: 25px; height: 20px;"></div> + <div style="line-height: 0; background: green; width: 25px;"> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + </div> + <div style="background: green; width: 25px; height: 10px;"></div> + <div style="background: green; width: 25px; height: 10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-014.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-014.html new file mode 100644 index 0000000000..bcc32dd9ba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-014.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Tests that flex-items *don't* get pushed down when there is no expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="line-height: 0; background: green; height: 110px; width: 25px;"> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="background: green; height: 90px; width: 25px;"></div> + <div style="line-height: 0; background: green; height: 110px; width: 25px;"> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + </div> + <div style="background: green; height: 90px; width: 25px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-015.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-015.html new file mode 100644 index 0000000000..563f3663c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-015.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 500px;"> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 10px; height: 60px;"></div> + <div style="contain: size; width: 25px; height: 50px;"></div> + </div> + <div style="background: green; order: -1; width: 10px;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + </div> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 10px; height: 20px;"></div> + <div style="contain: size; width: 10px; height: 100px; background: white;"></div> + </div> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 25px; height: 50px;"></div> + <div style="contain: size; width: 10px; height: 60px;"></div> + </div> + <div style="background: green; order: -1; width: 10px;"> + <div style="contain: size; width: 10px; height: 30px;"></div> + <div style="contain: size; width: 10px; height: 100px;"></div> + </div> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 10px; height: 20px;"></div> + <div style="contain: size; width: 10px; height: 100px;"></div> + </div> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="contain: size; width: 10px; height: 20px;"></div> + </div> + <div style="background: green; width: 10px;"> + <div style="contain: size; width: 10px; height: 20px;"></div> + <div style="contain: size; width: 10px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-016.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-016.html new file mode 100644 index 0000000000..e81ad10e03 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-016.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex row expanding as + a result of fragmentation with margin-top. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + </div> + <div style="position: relative;"> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="position: absolute; width: 10px; height: 60px; background: green;"></div> + </div> + <div style="margin-top: 10px;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div style="height: 100px;"></div> + <div style="height: 60px;"></div> + <div style="margin-top: 10px; position: relative;"> + <div style="position: absolute; top: -10px; width: 10px; height: 10px; background: green;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="position: absolute; width: 10px; height: 20px; background: green;"></div> + </div> + <div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="contain: size; width: 10px; height: 70px;"></div> + </div> + <div style="position: relative;"> + <div style="contain: size; width: 10px; height: 30px;"></div> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="position: absolute; bottom: 0px; left: -10px; width: 20px; height: 40px; background: white;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-017.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-017.html new file mode 100644 index 0000000000..070b0d6e85 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-017.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 10px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div id="flex"> + <div style="height: 250px; break-inside: avoid;"></div> + <div style="height: 200px; break-inside: avoid;"></div> + <div style="height: 120px; break-inside: avoid;"></div> + <div style="height: 180px; break-inside: avoid;"></div> + <div style="height: 100px; break-inside: avoid;"></div> + </div> + <div class="abs" style="top: 20px; left: 30px; height: 80px;"></div> + <div class="abs" style="top: 50px; left: 40px; height: 50px;"></div> + <div class="abs" style="top: 80px; left: 70px; height: 20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-018.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-018.html new file mode 100644 index 0000000000..a491dfac81 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-018.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-before: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 5px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 5px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="top: 50px; left: 25px; height: 50px;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 350px; break-before: avoid;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 250px; break-before: avoid;"></div> + <div style="height: 350px; break-before: avoid;"></div> + <div style="height: 150px; break-before: avoid;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-019.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-019.html new file mode 100644 index 0000000000..414326a581 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-019.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-before: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 5px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 5px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="top: 50px; left: 25px; height: 50px;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 350px; break-before: avoid;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 250px; break-before: avoid;"></div> + <div style="height: 400px;"></div> + <div style="height: 100px; break-before: avoid;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-020.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-020.html new file mode 100644 index 0000000000..18030dd002 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-020.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-after: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 5px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 5px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="top: 50px; left: 25px; height: 50px;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px; break-after: avoid;"></div> + <div style="height: 350px;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px; break-after: avoid;"></div> + <div style="height: 250px;"></div> + <div style="height: 400px; break-after: avoid;"></div> + <div style="height: 100px; break-after: avoid;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-021.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-021.html new file mode 100644 index 0000000000..833da1afce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-021.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-before: column. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 10px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="top: 50px; left: 30px; height: 50px;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px; break-before: column;"></div> + <div style="height: 350px;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px; break-before: column;"></div> + <div style="height: 250px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-022.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-022.html new file mode 100644 index 0000000000..60f543b5d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-022.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-after: column. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 10px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="top: 50px; left: 30px; height: 50px;"></div> + <div id="flex"> + <div style="height: 50px; break-after: column;"></div> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + <div style="height: 100px;"></div> + <div style="height: 50px; break-after: column;"></div> + <div style="height: 50px;"></div> + <div style="height: 250px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-023.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-023.html new file mode 100644 index 0000000000..626d2679ea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-023.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: break-before values on the first item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 20px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 400px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div style="width: 20px; height: 50px; background: green;"></div> + <div style="width: 20px; height: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 250px;"></div> + <div style="height: 100px; break-before: avoid;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-024.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-024.html new file mode 100644 index 0000000000..4cd53adf6d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-024.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: break-after values on the first item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 50px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 50px; + } + #flex > div { + background: green; + width: 25x; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div style="width: 50px; height: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 25px; break-after: avoid;"></div> + <div style="height: 50px;"></div> + </div> + <div style="width: 50px; height: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-025.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-025.html new file mode 100644 index 0000000000..93dd9b4a62 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-025.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: break-before values on the first item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 20px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 350px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div style="width: 20px; height: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 50px; break-before: avoid;"></div> + <div style="height: 50px;"></div> + <div style="height: 250px;"></div> + <div style="height: 100px; break-before: column;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 150px;"></div> + </div> + <div style="width: 20px; height: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-026.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-026.html new file mode 100644 index 0000000000..204cc15a2d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-026.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: break-after values on the first item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 50px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 50px; + } + #flex > div { + background: green; + width: 25x; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 25px; break-after: column;"></div> + <div style="height: 50px; break-after: avoid;"></div> + </div> + <div style="width: 50px; height: 50px; background: green;"></div> + <div style="width: 50px; height: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-027.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-027.html new file mode 100644 index 0000000000..95b73907b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-027.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: early break inside columns. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 50px; + background: green; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + } + #flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="top: 50px; height: 50px;"></div> + <div class="abs" style="left: 100px; height: 50px; background: white;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px;"></div> + <div style="height: 100px; break-before: avoid;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px; break-after: avoid;"></div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-028.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-028.html new file mode 100644 index 0000000000..d96cd56d69 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-028.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: early break inside columns. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + width: 50px; + background: white; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + } + #flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="abs" style="left: 100px; height: 50px;"></div> + <div id="flex"> + <div> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px;"></div> + </div> + <div style="height: 100px; break-before: avoid;"></div> + <div> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; break-after: avoid;"></div> + </div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-029.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-029.html new file mode 100644 index 0000000000..ec47c9f3af --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-029.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: we shouldn't insert a forced break if + there's no preceding content at the start of a fragmentainer. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 200px;"> + <div style="height: 100px; width: 25px; break-before: column; background: green;"></div> + <div style="height: 100px; width: 25px; break-before: column; background: green;"></div> + <div style="height: 50px; width: 25px; break-before: column; background: green;"></div> + <div style="height: 150px; width: 25px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-030.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-030.html new file mode 100644 index 0000000000..443984588b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-030.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: the flex container consumes the + remaining fragmentainer space if an item breaks before. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 50px; height: 200px; background: green;"> + <div style="height: 10px; width: 25px;"></div> + <div style="height: 100px; width: 25px; break-before: column;"></div> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 100px; width: 25px; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-031.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-031.html new file mode 100644 index 0000000000..fc88e70a9c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-031.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + position: relative; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div id="flex"> + <div> + <div style="contain: size; width: 10px; height: 90px;"></div> + <div style="contain: size; width: 10px; height: 80px;"></div> + </div> + <div style="height: 30px; break-inside: avoid;"></div> + <div style="height: 170px;"></div> + <div style="height: 100px;"></div> + <div> + <div style="contain: size; width: 10px; height: 90px;"></div> + <div style="contain: size; width: 10px; height: 80px;"></div> + </div> + <div style="height: 30px; break-inside: avoid;"></div> + <div style="height: 170px;"></div> + <div style="height: 100px;"></div> + <div style="position: absolute; height: 20px; width: 20px; top: 180px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-032.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-032.html new file mode 100644 index 0000000000..978dbd1fa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-032.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation with forced break and negative margin. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + z-index: -1; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + position: relative; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div id="flex"> + <div style="height: 150px;"></div> + <div style="height: 350px; break-before: column; margin-top: -50px;"></div> + <div style="height: 150px;"></div> + <div style="height: 300px; break-before: column;"></div> + </div> + <div style="position: absolute; top: 50px; left: 20px; width: 20px; height: 50px; background: green;"></div> + <div style="position: absolute; top: -50px; left: 40px; width: 10px; height: 50px; background: white;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-033.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-033.html new file mode 100644 index 0000000000..5e511bdf55 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-033.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: column balancing with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: green; + height: 100px; + } + #flex > div { + width: 10px; + background: green; + flex: none; + } +</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="width: 100px; columns: 5; column-gap: 0;"> + <div id="flex"> + <!-- flex column 1 --> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + <div style="height: 5px;break-before: column;"> + <div style="height: 100px; width: 20px; background: green;"></div> + </div> + <!-- flex column 2 --> + <div style="height: 50px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 10px; background: green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-034.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-034.html new file mode 100644 index 0000000000..0a2e0367f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-034.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: break-before:avoid/break-inside:avoid + and column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 200px; + } + #flex > div { + width: 25px; + background: green; + flex: none; + } +</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="width: 100px; columns: 2; column-gap: 0; position: relative;"> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 25px;"></div> + <div style="height: 50px;"></div> + <div style="height: 25px; break-before: avoid;"></div> + <div style="height: 75px;"></div> + <div style="height: 25px;"></div> + <div style="height: 25px;"></div> + <div style="height: 50px;"></div> + <div style="height: 50px; break-before: avoid; break-inside: avoid;"></div> + <div style="height: 50px;"></div> + </div> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; left: 0px; height: 50px; width: 50px; background: white;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-035.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-035.html new file mode 100644 index 0000000000..c26d055c34 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-035.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: nested column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 250px; + } + #flex > div { + width: 50%; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;"> + <div style="height: 50px; background: green;"></div> + <div style="columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 200px; break-inside: avoid;"></div> + <div style="height: 50px; width: 150%;"></div> + <div style="height: 200px; break-inside: avoid;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-036.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-036.tentative.html new file mode 100644 index 0000000000..7c6a55feee --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-036.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: tall content inside constrained block. +</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 75px; + } + #flex > div { + width: 50%; + } +</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: 2; column-fill: auto; column-gap: 0; height: 75px;"> + <div id="flex"> + <div style="height: 50px; background: green;"></div> + <div style="height: 25px; background: red;"> + <div style="contain: size; height: 50px; background: green;"></div> + <div style="contain: size; height: 100px; background: green;"></div> + </div> + <div style="height: 50px; background: green;"></div> + <div style="height: 25px; background: red;"> + <div style="contain: size; height: 50px; background: green;"></div> + <div style="contain: size; height: 100px; background: green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-037.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-037.html new file mode 100644 index 0000000000..5fd1fa283b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-037.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex row expanding as + a result of fragmentation with margin-top. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div style="margin-top: 10px; position: relative;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="position: absolute; top: -60px; width: 10px; height: 60px; background: green;"></div> + </div> + <div style="height: 100px;"></div> + <div style="height: 60px;"></div> + <div> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div style="margin-top: 60px; position: relative;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="position: absolute; top: -60px; width: 10px; height: 60px; background: green;"></div> + </div> + <div style="height: 100px;"></div> + <div style="height: 60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-038.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-038.html new file mode 100644 index 0000000000..c970d4a69b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-038.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: Tall margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + position: relative; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div style="height: 50px; width: 20px; background: green;"></div> + <div id="flex"> + <div style="height: 100px; margin-top: 50px;"></div> + <div style="height: 150px; margin-top: 150px;"></div> + <div style="height: 100px; margin-top: 50px;"></div> + <div style="height: 150px; margin-top: 150px;"></div> + <div style="position: absolute; height: 50px; width: 20px;"></div> + <div style="position: absolute; height: 150px; width: 20px; top: 150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-039.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-039.html new file mode 100644 index 0000000000..30c8983d20 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-039.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: Tall margins with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + position: relative; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px; margin-top: 100px; break-before: column;"></div> + <div style="height: 200px; margin-top: 50px;"></div> + <div style="height: 50px; background: white;"></div> + <div style="height: 50px; margin-top: 100px; break-before: column;"></div> + <div style="height: 200px; margin-top: 50px;"></div> + <div style="position: absolute; height: 150px; top: 50px;"></div> + <div style="position: absolute; height: 200px; left: 10px;"></div> + <div style="position: absolute; height: 50px; width: 20px; top: 250px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-040.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-040.html new file mode 100644 index 0000000000..ce99ab6889 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-040.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: Negative margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 500px; + } + #flex > div { + height: 100px; + width: 10px; + } + #flex > div:nth-child(odd) { + background: green; + margin-top: -100px; + break-before: column; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height: 100px; width: 100px; background: red; position: absolute"> + <div style="position: absolute; left: 10px; width: 10px; height: 100px; background: green;"></div> + <div style="margin-top: 100px; width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto;"> + <div id="flex"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="background: white;"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041-ref.html new file mode 100644 index 0000000000..4924a792b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: yellow;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: orange;"></div> + + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: pink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041.html new file mode 100644 index 0000000000..e81a37429d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-041.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: column-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-column-flex-fragmentation-041-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column-reverse; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: orange;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042-ref.html new file mode 100644 index 0000000000..ad7d3c78ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + + <div style="height: 50px; width: 25px; background: orange;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042.html new file mode 100644 index 0000000000..90c93834e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-042.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: wrap-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-column-flex-fragmentation-042-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 50px; width: 25px; background: orange;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043-ref.html new file mode 100644 index 0000000000..f6f933a9c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: pink;"></div> + + <div style="height: 50px; width: 25px; background: yellow;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043.html new file mode 100644 index 0000000000..37b3069136 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-043.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: wrap-reverse and column-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-column-flex-fragmentation-043-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 50px; width: 25px; background: orange;"></div> + <div style="height: 50px; width: 25px; background: blue;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: mediumaquamarine;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044-ref.html new file mode 100644 index 0000000000..20710e8c29 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: mediumaquamarine; break-before: column;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: maroon; break-before: avoid;"></div> + <div style="height: 50px; width: 25px; background: pink;"></div> + + <div style="height: 50px; width: 25px; background: yellow;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: blue; break-before: avoid;"></div> + <div style="height: 50px; width: 25px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044.html new file mode 100644 index 0000000000..676cb28c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-044.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: wrap-reverse and column-reverse with break-rules. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-column-flex-fragmentation-044-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 50px; width: 25px; background: orange;"></div> + <div style="height: 50px; width: 25px; background: blue; break-before: avoid;"></div> + <div style="height: 50px; width: 25px; background: purple;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon; break-before: avoid;"></div> + <div style="height: 50px; width: 25px; background: magenta;"></div> + <div style="height: 50px; width: 25px; background: mediumaquamarine; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-045.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-045.html new file mode 100644 index 0000000000..b445a15113 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-045.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + height: 190px; + position: relative; + justify-content: center; + padding-top: 10px; + } + #flex > div { + width: 25px; + height: 100px; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: absolute; height: 10px; width: 50px; background: green;"></div> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; width: 50px;"></div> + <div style="height: 45px;"></div> + <div style="background: red;"></div> + <div style="height: 45px;"></div> + <div style="height: 45px;"></div> + <div style="background: red;"></div> + <div style="height: 45px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html new file mode 100644 index 0000000000..f009b1a3e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-046.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: early break inside columns w/ vertical + writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + block-size: 100px; + inline-size: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + inline-size: 50px; + background: white; + } + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + block-size: 200px; + } + #flex > div { + background: green; + inline-size: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-lr;"> + <div class="multicol"> + <div class="abs" style="top: 100px; block-size: 50px;"></div> + <div id="flex"> + <div> + <div style="block-size: 50px; inline-size: 25px;"></div> + <div style="block-size: 50px; inline-size: 25px;"></div> + </div> + <div style="block-size: 100px; break-before: avoid;"></div> + <div> + <div style="block-size: 50px; inline-size: 25px;"></div> + <div style="block-size: 50px; inline-size: 25px; break-after: avoid;"></div> + </div> + <div style="block-size: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html new file mode 100644 index 0000000000..a09eaea6b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-047.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line column flex fragmentation: Tall margins with forced break and + vertical writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + block-size: 500px; + position: relative; + } + #flex > div { + background: green; + inline-size: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-rl;"> + <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="block-size: 50px;"></div> + <div style="block-size: 50px; margin-right: 100px; break-before: column;"></div> + <div style="block-size: 200px; margin-right: 50px;"></div> + <div style="block-size: 50px; background: white;"></div> + <div style="block-size: 50px; margin-right: 100px; break-before: column;"></div> + <div style="block-size: 200px; margin-right: 50px;"></div> + <div style="position: absolute; block-size: 150px; right: 50px;"></div> + <div style="position: absolute; block-size: 200px; top: 10px;"></div> + <div style="position: absolute; block-size: 50px; inline-size: 20px; right: 250px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-048.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-048.html new file mode 100644 index 0000000000..8280041395 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-048.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item that shrinks *doesn't* expand. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;"> + <div style="background: green; flex-basis: fit-content; height: 10px; width: 25px;"> + <div style="contain: size; width: 25px; height: 50px;"></div> + <div style="contain: size; width: 25px; height: 100px;"></div> + </div> + <div style="background: green; width: 25px; height: 50px;"></div> + <div style="background: green; flex-basis: min-content; height: 10px; width: 25px;"> + <div style="contain: size; width: 25px; height: 50px;"></div> + <div style="contain: size; width: 25px; height: 100px;"></div> + </div> + <div style="background: green; width: 25px; height: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-049.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-049.html new file mode 100644 index 0000000000..ae683e938c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-049.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with an indefinite flex-basis expands if the + container height is auto. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: content; height: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-050.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-050.html new file mode 100644 index 0000000000..b0467d5b80 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-050.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 1; width: 100px;"> + <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 50px;"> + <div style="margin-bottom: 50px;"> + <div style="height: 25px; width: 50px; background: green;"></div> + </div> + <div style="margin-bottom: 50px;"> + <div style="height: 25px; width: 50px; background: green;"></div> + </div> + </div> + <div style="margin-top: -25px; height: 75px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-051.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-051.html new file mode 100644 index 0000000000..f886bcc7be --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-051.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=1381465"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; gap:0; height:150px;"> + <div style="display:flex; flex-direction:column; flex-wrap:wrap; height:250px;"> + <div style="width:50px; height:100px; background:green;"></div> + <div style="width:50px; height:25px; background:green;"></div> + <div style="break-before:avoid; break-inside:avoid; width:50px; height:75px; background:green;"></div> + <div style="height:200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-052.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-052.html new file mode 100644 index 0000000000..9496418e85 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-052.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; gap:0; height:150px;"> + <div style="display:flex; flex-direction:column; flex-wrap:wrap; height:250px;"> + <div style="width:50px; height:75px; background:green;"></div> + <div style="width:50px; height:25px; background:green;"></div> + <div style="width:50px; height:25px; background:green;"> + <div style="height:100px;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid; height:55px; background:green;"></div> + <div style="width:50px; height:20px; background:green;"></div> + <div style="height:200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-053.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-053.html new file mode 100644 index 0000000000..aa1f1debce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-column-flex-fragmentation-053.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381118"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; gap:0; height:150px;"> + <div style="display:flex; flex-direction:column; flex-wrap:wrap; height:250px;"> + <div style="width:50px; height:100px; background:green;"></div> + <div style="width:50px; height:25px; background:green;"></div> + <div style="break-before:avoid; height:25px;"> + <div style="height:75px; background:green;"></div> + </div> + <div style="break-before:avoid; break-inside:avoid; height:55px;"></div> + <div style="height:200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html new file mode 100644 index 0000000000..ba6b0103e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Simple multi-line row flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + height: 500px; + width: 20px; + } + .flex > div { + background: green; + height: 250px; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html new file mode 100644 index 0000000000..62c1e313bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with item overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + height: 200px; + width: 50px; + } + .flex > div { + height: 100px; + width: 50px; + } + .flex > div > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div style="height: 100px;"></div> + <div style="height: 100px; background: red;"></div> + </div> + <div> + <div style="height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html new file mode 100644 index 0000000000..4d1b7e1c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation intrinsic block size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + width: 25px; + background: green; + } + .flex > div { + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html new file mode 100644 index 0000000000..a00469746e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + width: 20px; + } + .flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 150px;"></div> + <div style="height: 150px;"></div> + <div style="height: 350px;"></div> + <div style="height: 350px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html new file mode 100644 index 0000000000..d1e4f97c27 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-005.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with nested OOF. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + position: relative; + height: 400px; + width: 25px; + } + .abs { + background: green; + position: absolute; + width: 25px; + top: 0; + bottom: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html new file mode 100644 index 0000000000..1b93be60e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-006.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Simple multi-line row flex fragmentation with items that stretch. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-wrap: wrap; + height: 400px; + width: 25px; + } + .flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-007.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-007.html new file mode 100644 index 0000000000..968f3dd2d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="height: 20px; width: 50px; background: green;"></div> + <div style="width: 50px; line-height: 0; background: green;"> + <div style="contain: size; height: 20px;"></div> + <div style="contain: size; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-008.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-008.html new file mode 100644 index 0000000000..1f0abea629 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with a fixed block-size container grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-wrap: wrap; height: 100px;"> + <div style="height: 20px; width: 50px; background: green;"></div> + <div style="width: 50px; line-height: 0; background: green;"> + <div style="contain: size; height: 20px;"></div> + <div style="contain: size; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-009.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-009.html new file mode 100644 index 0000000000..b9283be27b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-009.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flexbox expands its intrinsic block-size, due to a + flex item fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-wrap: wrap; background: green;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-010.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-010.html new file mode 100644 index 0000000000..18cd9d7ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex row expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="position: relative;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + <div style="position: absolute; width: 10px; height: 10px; background: green;"></div> + </div> + <div> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div> + <div style="contain: size; width: 10px; height: 40px;"></div> + <div style="contain: size; width: 10px; height: 80px;"></div> + </div> + <div style="position: relative;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + <div style="position: absolute; width: 10px; height: 50px; background: green;"></div> + </div> + <div style="height: 100px; width: 20px;"></div> + <div style="height: 20px; width: 20px;"></div> + </div> + <div style="position: absolute; width: 20px; height: 60px; background: green; top: 40px; left: 20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-011.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-011.html new file mode 100644 index 0000000000..e2e3624c0e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-011.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Tests that flex-items *don't* get pushed down when there is no expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="line-height: 0; background: green; height: 110px;"> + <div style="display: inline-block; width: 50px; height: 80px;"></div> + <div style="display: inline-block; width: 50px; height: 30px;"></div> + </div> + <div style="background: green; width: 25px; height: 50px;"></div> + <div style="background: green; width: 25px; height: 50px;"></div> + <div style="background: green; width: 25px; height: 40px;"></div> + <div style="background: green; width: 25px; height: 40px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-012.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-012.html new file mode 100644 index 0000000000..bb5af26610 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous multicol flex-item + expanding as a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="width: 50px; columns: 2; column-gap: 0; column-fill: auto; background: green;"> + <div style="width: 50px; height: 160px;"></div> + <div style="column-span: all; height: 30px; break-inside: avoid;"></div> + </div> + <div style="background: green; height: 50px; width: 50px;"></div> + <div style="background: green; height: 20px; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-013.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-013.html new file mode 100644 index 0000000000..f85ac0be87 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-013.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item + expanding as a result of its floated child. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="background: green;"> + <div style="float: left; width: 50px;"> + <div style="contain: size; width: 50px; height: 80px;"></div> + <div style="contain: size; width: 50px; height: 30px;"></div> + </div> + </div> + <div style="background: green; height: 50px; width: 50px;"></div> + <div style="background: green; height: 20px; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-014.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-014.html new file mode 100644 index 0000000000..ac48296e88 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-014.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-wrap: wrap;"> + <div style="background: green; width: 25px;"> + <div style="contain: size; width: 25px; height: 60px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + </div> + <div style="background: green; width: 25px; order: -1;"> + <div style="contain: size; width: 25px; height: 80px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + </div> + <div style="background: green; width: 25px;"> + <div style="contain: size; width: 25px; height: 20px;"></div> + <div style="contain: size; width: 25px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-016.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-016.html new file mode 100644 index 0000000000..f723663ac8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-016.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex row expanding as + a result of fragmentation with margin-top. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 20px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 40px; left: 20px; width: 20px; height: 60px; background: green;"></div> + <div id="flex"> + <div style="width: 10px;"> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + </div> + <div style="width: 10px;"> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div style="margin-top: 10px;"> + <div style="contain: size; width: 20px; height: 80px;"></div> + <div style="contain: size; width: 20px; height: 40px;"></div> + </div> + <div style="height: 100px;"></div> + <div style="height: 60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-017.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-017.html new file mode 100644 index 0000000000..037f55bace --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-017.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with items in the same row ending layout + in different fragmentainers. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 10px; + } + .abs { + position: absolute; + width: 10px; + height: 100px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 300px;"></div> + <div style="position: relative; height: 200px;"> + <div style="width: 10px; height: 200px;"></div> + <div class="abs"></div> + </div> + <div style="height: 200px;"></div> + <div style="position: relative; height: 100px;"> + <div style="width: 10px; height: 100px;"></div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-018.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-018.html new file mode 100644 index 0000000000..f12e6519a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-018.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + background: green; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 20px;"></div> + <div style="height: 100px; break-inside: avoid;"></div> + <div style="position: absolute; height: 80px; top: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-019.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-019.html new file mode 100644 index 0000000000..3c85a703f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-019.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 10px; + } + .abs { + position: absolute; + width: 20px; + height: 70px; + top: 30px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div class="abs"></div> + <div id="flex"> + <div style="height: 30px;"></div> + <div></div> + <div style="height: 80px;"></div> + <div style="break-inside: avoid;"></div> + <div style="height: 320px; width: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-020.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-020.html new file mode 100644 index 0000000000..334e53468e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-020.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div> + <div style="contain: size; width: 25px; height: 90px;"></div> + <div style="contain: size; width: 25px; height: 80px;"></div> + </div> + <div style="height: 30px; break-inside: avoid;"></div> + <div style="height: 170px;"></div> + <div style="position: absolute; height: 20px; top: 180px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-021.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-021.html new file mode 100644 index 0000000000..74890bea91 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-021.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="width: 50px; height: 30px; background: green;"></div> + <div style="position: absolute; height: 70px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 80px; break-inside: avoid;"></div> + <div style="height: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-022.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-022.html new file mode 100644 index 0000000000..2122609a0e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-022.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-before. A forced break should + trump break-before:avoid and break-after:avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; height: 20px; width: 50px; background: green; top: 80px;"></div> + <div id="flex"> + <div style="height: 80px; break-after: avoid;"></div> + <div style="width: 25px; break-before: avoid;"></div> + <div style="height: 100px; width: 25px;"> + <div> + <div style="break-before: column;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-023.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-023.html new file mode 100644 index 0000000000..32f7d31c18 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-023.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with break-after. A forced break should + trump break-before:avoid and break-after:avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; height: 20px; width: 50px; background: green; top: 80px;"></div> + <div id="flex"> + <div style="height: 80px; width: 25px;"> + <div style="break-after: column;"></div> + </div> + <div style="width: 25px; break-after: avoid;"></div> + <div style="height: 100px; break-before: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-024.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-024.html new file mode 100644 index 0000000000..372b3e170d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-024.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: the flex container consumes the + remaining fragmentainer space if a row breaks before. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="height: 50px; width: 50px;"></div> + <div style="height: 100px; width: 50px; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-025.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-025.html new file mode 100644 index 0000000000..8ea8803651 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-025.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before values on the first row + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div> + <div style="height: 50px; width: 50px; break-before: column;"></div> + </div> + <div style="height: 50px; width: 50px; break-before: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-026.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-026.html new file mode 100644 index 0000000000..b83375e249 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-026.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-after values on the last row + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 25px; width: 50px; break-after: avoid;"></div> + <div> + <div style="height: 25px; width: 50px; break-after: column;"></div> + </div> + </div> + <div style="height: 100px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-027.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-027.html new file mode 100644 index 0000000000..45e4a1452f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-027.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before values on the first row + are propagated to the nested flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + break-before: avoid; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div id="flex" style="background: green;"> + <div style="height: 25px; width: 25px;"></div> + <div style="height: 25px; width: 25px; break-before: column;"></div> + <div style="height: 25px; width: 50px;"></div> + </div> + <div style="height: 50px; width: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-028.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-028.html new file mode 100644 index 0000000000..5abb90c9a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-028.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-after values on the last row + are propagated to the nested flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + break-after: avoid; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div id="flex" style="background: green;"> + <div style="height: 25px; width: 50px;"></div> + <div style="height: 25px; width: 25px;"></div> + <div style="height: 25px; width: 25px; break-after: column;"></div> + </div> + <div style="height: 100px; width: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-029.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-029.html new file mode 100644 index 0000000000..23f9defb55 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-029.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row offset with break-before and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 150px; + background: green; + align-content: space-between; + } + .abs { + position: absolute; + height: 25px; + width: 50%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div class="abs" style="left: 100px; background: white;"></div> + <div id="flex"> + <div style="height: 25px; width: 50px;"></div> + <div style="height: 10px; width: 25px; align-self: center;"></div> + <div style="height: 25px; width: 25px; break-before: column;"></div> + <div style="height: 50px; width: 50px; background: green;"></div> + </div> + <div class="abs" style="background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-030.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-030.html new file mode 100644 index 0000000000..52ac3bf216 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-030.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row offset with break-inside:avoid + and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 150px; + background: green; + align-content: space-between; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="height: 50px; width: 50px;"></div> + <div style="height: 10px; width: 25px; align-self: center;"></div> + <div style="height: 50px; width: 25px; break-inside: avoid;"></div> + <div style="height: 25px; width: 50px; background: green;"></div> + </div> + <div style="position: absolute; height: 13px; width: 50px; background: green;"></div> + <div style="position: absolute; bottom: 0px; height: 13px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-031.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-031.html new file mode 100644 index 0000000000..e5780d254e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-031.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: column balancing with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 50px; + align-content: space-between; + background: green; + } + #flex > div { + width: 50px; + background: green; + } + .abs { + position: absolute; + width: 50px; + background: green; + } +</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="width: 100px; columns: 2; column-gap: 0; position: relative;"> + <div class="abs" style="height: 15px; left: 50px;"></div> + <div class="abs" style="height: 15px; top: 25px; left: 50px;"></div> + <div id="flex"> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 60px; width: 50px; background: green;"></div> + </div> + </div> + <div class="abs" style="height: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-032.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-032.html new file mode 100644 index 0000000000..274f88a794 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-032.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before:avoid on the first + row is propagated to the container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50px; width: 50px; background: green;"></div> + <div style="height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div> + <div style="height: 25px; break-before: avoid;"></div> + </div> + <div style="height: 25px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-033.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-033.html new file mode 100644 index 0000000000..eaf1aefc4a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-033.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before:avoid between rows. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; top: 75px; height: 25px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 25px;"></div> + <div> + <div style="height: 75px; break-before: avoid;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-034.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-034.html new file mode 100644 index 0000000000..0fb8103468 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-034.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-after:avoid on the last + row is propagated to the container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; top: 75px; height: 25px; width: 100px; background: green;"></div> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 25px; break-after: avoid;"></div> + </div> + <div style="height: 50px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-035.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-035.html new file mode 100644 index 0000000000..43653071ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-035.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-after:avoid between rows. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; top: 75px; height: 25px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 25px;"></div> + <div> + <div style="height: 25px; break-after: avoid;"></div> + </div> + <div style="height: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-036.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-036.html new file mode 100644 index 0000000000..013c9e2013 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-036.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: empty rows with alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 200px; + align-content: flex-end; + background: green; + } + #flex > div { + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; position: relative;"> + <div id="flex"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-037.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-037.html new file mode 100644 index 0000000000..62bf337d85 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-037.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before:avoid and column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + } +</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="width: 100px; columns: 2; column-gap: 0;position: relative; background: green;"> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 50px;"></div> + <div style="height: 5px; width: 25px;"></div> + <div style="height: 25px; width: 25px; break-before: avoid;"></div> + <div style="height: 50px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-038.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-038.html new file mode 100644 index 0000000000..e745987aec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-038.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: break-before:avoid and column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 50px; + } +</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="width: 100px; columns: 2; column-gap: 0;position: relative; background: green;"> + <div id="flex"> + <div style="height: 25px;"></div> + <div style="height: 50px; break-before:avoid;"></div> + <div style="height: 5px; width: 25px;"></div> + <div style="height: 25px; width: 25px; break-before: avoid;"></div> + <div style="height: 50px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html new file mode 100644 index 0000000000..6ef65db744 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: nested column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + width: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;"> + <div style="height: 50px; background: green;"></div> + <div style="columns: 5; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; left: 45px; height: 50px; width: 50%"></div> + <div style="height: 200px;"></div> + <div style="width: 50%; height: 250px;"></div> + <div style="width: 50%; height: 200px; break-inside: avoid;"></div> + <div style="height: 300px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-040.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-040.html new file mode 100644 index 0000000000..0eaff879c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-040.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: nested column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + height: 50px; + width: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;"> + <div style="height: 50px; background: green;"></div> + <div style="columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; left: 25px;"></div> + <div></div> + <div style="width: 50%;"></div> + <div style="width: 50%; break-after: avoid;"></div> + <div style="height: 150px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-041.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-041.tentative.html new file mode 100644 index 0000000000..028051c059 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-041.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: tall content inside constrained block. +</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + width: 100%; + } +</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: 2; column-fill: auto; column-gap: 0; height: 75px;"> + <div id="flex"> + <div style="height: 50px; background: green;"></div> + <div style="height: 25px; background: red;"> + <div style="contain: size; height: 50px; background: green;"></div> + <div style="contain: size; height: 100px; background: green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-042.tentative.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-042.tentative.html new file mode 100644 index 0000000000..725d1f97f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-042.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: tall content inside constrained block. +</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 25px; + background: red; + } + #flex > div { + width: 100%; + } +</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: 2; column-fill: auto; column-gap: 0; height: 75px;"> + <div style="height: 50px; background: green;"></div> + <div id="flex"> + <div style="contain: size; height: 50px; 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/flexbox/multi-line-row-flex-fragmentation-043.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-043.html new file mode 100644 index 0000000000..7d0500ad05 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-043.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Tall margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + width: 10px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="margin-top: 50px; height: 100px;"></div> + <div style="margin-top: 100px; height: 50px;"></div> + <div style="margin-top: 100px; height: 250px;"></div> + <div style="margin-top: 50px; height: 300px;"></div> + <div style="position: absolute; height: 50px; width: 20px;"></div> + <div style="position: absolute; height: 50px; width: 30px; top: 50px; left: 10px;"></div> + <div style="position: absolute; height: 50px; left: 40px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-044.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-044.html new file mode 100644 index 0000000000..8262b0e32f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-044.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Tall margins with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + width: 10px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="margin-top: 50px; height: 100px;"></div> + <div style="margin-top: 100px; height: 50px; break-after: avoid;"></div> + <div style="margin-top: 50px; height: 250px;"></div> + <div style="margin-top: 100px; height: 200px; break-before: column;"></div> + <div style="position: absolute; height: 50px; width: 20px;"></div> + <div style="position: absolute; height: 50px; width: 30px; top: 50px; left: 10px;"></div> + <div style="position: absolute; height: 50px; top: 200px;"></div> + <div style="position: absolute; height: 100px; top: 200px; left: 10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-045.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-045.html new file mode 100644 index 0000000000..f5a4333947 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-045.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Negative margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + margin-top: -100px; + height: 100px; + width: 20px; + break-before: column; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height: 100px; width: 100px; background: red; position: absolute"> + <div style="margin-top: 100px; width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto;"> + <div id="flex"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-046.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-046.html new file mode 100644 index 0000000000..99e2533792 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-046.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Percentage height decendant. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-wrap: wrap; min-height: 200px;"> + <div style="flex: 0.5; width: 50px; background: green;"></div> + <div style="flex: 0.5; background: green;"> + <div style="height: 200%; width: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047-ref.html new file mode 100644 index 0000000000..d669603858 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-wrap: wrap; height: 200px;"> + <div style="height: 100px; width: 25px; background: blue;"></div> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: yellow;"></div> + <div style="height: 100px; width: 25px; background: purple;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047.html new file mode 100644 index 0000000000..f594728785 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-047.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-047-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-flow: row-reverse; flex-wrap: wrap; height: 200px;"> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: blue;"></div> + <div style="height: 100px; width: 25px; background: purple;"></div> + <div style="height: 100px; width: 25px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048-ref.html new file mode 100644 index 0000000000..1ffc07387d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-wrap: wrap; height: 200px;"> + <div style="height: 100px; width: 25px; background: purple;"></div> + <div style="height: 100px; width: 25px; background: yellow;"></div> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: blue;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048.html new file mode 100644 index 0000000000..5c32606312 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-048.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: wrap-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-048-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: blue;"></div> + <div style="height: 100px; width: 25px; background: purple;"></div> + <div style="height: 100px; width: 25px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049-ref.html new file mode 100644 index 0000000000..ffbedaada1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-wrap: wrap; height: 200px;"> + <div style="height: 100px; width: 25px; background: yellow;"></div> + <div style="height: 100px; width: 25px; background: purple;"></div> + <div style="height: 100px; width: 25px; background: blue;"></div> + <div style="height: 100px; width: 25px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049.html new file mode 100644 index 0000000000..e36c48c159 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-049.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: wrap-reverse and row-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-049-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-flow: row-reverse; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: blue;"></div> + <div style="height: 100px; width: 25px; background: purple;"></div> + <div style="height: 100px; width: 25px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050-ref.html new file mode 100644 index 0000000000..d0e574022b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="display: flex; flex-wrap: wrap; height: 200px;"> + <div style="height: 50px; width: 25px; background: yellow;"></div> + <div style="height: 50px; width: 25px; background: purple; break-before: column;"></div> + + <div style="height: 50px; width: 25px; background: maroon;"></div> + <div style="height: 50px; width: 25px; background: pink;"></div> + + <div style="height: 100px; width: 25px; background: blue; break-before: avoid;"></div> + <div style="height: 100px; width: 25px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050.html new file mode 100644 index 0000000000..a96268df0f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-050.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: wrap-reverse and row-reverse with break-rules. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-050-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="display: flex; flex-flow: row-reverse; flex-wrap: wrap-reverse; height: 200px;"> + <div style="height: 100px; width: 25px; background: orange;"></div> + <div style="height: 100px; width: 25px; background: blue; break-before: avoid;"></div> + + <div style="height: 50px; width: 25px; background: pink;"></div> + <div style="height: 50px; width: 25px; background: maroon;"></div> + + <div style="height: 50px; width: 25px; background: purple; break-before: column;"></div> + <div style="height: 50px; width: 25px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-051.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-051.html new file mode 100644 index 0000000000..0f826cf3c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-051.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 190px; + position: relative; + align-items: center; + padding-top: 10px; + } + #flex > div { + width: 50px; + height: 100px; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: absolute; height: 10px; width: 50px; background: green;"></div> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute;"></div> + <div style="height: 45px;"></div> + <div style="background: red;"></div> + <div style="height: 45px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-052.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-052.html new file mode 100644 index 0000000000..8f5a612f5d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-052.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Row expansion and stretching. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; width: 10px; height: 50px; background: green;"></div> + <div style="position: absolute; top: 50px; left: 40px; width: 20px; height: 50px; background: green;"></div> + <div style="position: absolute; left: 70px; width: 10px; height: 50px; background: green;"></div> + <div style="position: absolute; top: 70px; left: 60px; width: 10px; height: 30px; background: green;"></div> + <div id="flex"> + <div style="width: 20px; height: 50px;"></div> + <div style="margin-top: 40px; height: 60px; contain: size;"></div> + <div></div> + <div style="width: 20px; height: 90px;"></div> + <div style="margin-top: 40px; height: 70px; contain: size;"></div> + <div style="margin-top: 100px; height: 50px; contain: size;"></div> + <div style="height: 100px; break-before: column;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-053.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-053.html new file mode 100644 index 0000000000..f42d578483 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-053.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Row expansion and stretching with item overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 50%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div> + <div style="height: 30px;"></div> + <div style="height: 50px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div></div> + <div> + <div style="height: 30px;"></div> + <div style="height: 10px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div></div> + <div></div> + <div style="height: 100px;"> + <div style="height: 200px;"></div> + </div> + <div style="height: 190px;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-054.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-054.html new file mode 100644 index 0000000000..9752217ba4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-054.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Row expansion and stretching. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 40px; left: 20px; width: 20px; height: 60px; background: green;"></div> + <div id="flex"> + <div> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + </div> + <div> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 40px;"></div> + </div> + <div style="width: 20px; height: 100px; break-inside: avoid;"></div> + <div style="height: 200px; width: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-055.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-055.html new file mode 100644 index 0000000000..39d2c6434d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-055.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Item overflow and stretching. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + width: 50%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="height: 100px;"> + <div style="height: 200px;"></div> + </div> + <div></div> + <div style="height: 400px;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html new file mode 100644 index 0000000000..0b71c13cce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-056.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: Item overflow and stretching w/ vertical + writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + inline-size: 50%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-lr;"> + <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="block-size: 100px;"> + <div style="block-size: 200px;"></div> + </div> + <div></div> + <div style="block-size: 400px;"></div> + <div></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html new file mode 100644 index 0000000000..c20e684b45 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-057.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation with items in the same row ending layout + in different fragmentainers w/ vertical writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + } + #flex > div { + background: green; + inline-size: 10px; + } + .abs { + position: absolute; + inline-size: 10px; + block-size: 100px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-rl;"> + <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="block-size: 300px;"></div> + <div style="position: relative; block-size: 200px;"> + <div style="inline-size: 10px; block-size: 200px;"></div> + <div class="abs"></div> + </div> + <div style="block-size: 200px;"></div> + <div style="position: relative; block-size: 100px;"> + <div style="inline-size: 10px; block-size: 100px;"></div> + <div class="abs"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-058.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-058.html new file mode 100644 index 0000000000..4746c8f93d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-058.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + align-items: center; + width: 50px; + } + #flex > div { + width: 50px; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; height: 100px; background: green;"></div> + <div style="height: 50px;"> + <div style="contain: size; height: 50px;"></div> + <div style="contain: size; height: 50px; background: red;"></div> + </div> + <div style="height: 50px; break-before: column; background: red;"></div> + <div style="height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-059.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-059.html new file mode 100644 index 0000000000..fd77f0fd44 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-059.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: nested multicols and break-inside:avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + position: relative; + } + #flex > div { + width: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;"> + <div style="height: 50px; background: green;"></div> + <div style="columns: 5; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; top: 50px; height: 200px; width: 50%;"></div> + <div style="height: 50px;"></div> + <div style="width: 50%; height: 100px; margin-top: 50px; break-inside: avoid;"></div> + <div style="width: 50%; height: 300px;"></div> + <div style="height: 200px;"></div> + <div style="height: 200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-060.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-060.html new file mode 100644 index 0000000000..3dcf3c888c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-060.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row-gap and item expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + row-gap: 10px; + } + #flex > div { + width: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;"> + <div style="height: 50px; background: green;"></div> + <div id="flex"> + <div> + <div style="height: 25px;"></div> + <div style="height: 25px; break-before: column;"></div> + <div style="position: absolute; width: 50px; height: 10px; background: green;"></div> + </div> + <div style="height: 65px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-061.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-061.html new file mode 100644 index 0000000000..10f8a666e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-061.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 1; width: 100px;"> + <div style="display: flex; flex-wrap: wrap; width: 100px;"> + <div style="height: 25px; width: 100px; background: green;"></div> + <div style="margin-bottom: 20px;"> + <div style="height: 25px; width: 50px; background: green;"></div> + </div> + <div style="margin-bottom: 10px;"> + <div style="height: 25px; width: 50px; background: green;"></div> + </div> + </div> + <div style="margin-top: -20px; height: 50px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-062.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-062.html new file mode 100644 index 0000000000..1d9d8739a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-062.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom is taken into account when fragmenting with expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red; position: relative;"> + <div style="display: flex; flex-wrap: wrap; width: 50px;"> + <div style="width:50px; margin-bottom: 20px; background: green;"> + <div style="height: 50px;"> + <div style="height: 100px;"></div> + </div> + <div style="height: 60px; break-inside: avoid;"></div> + </div> + <div style="width: 50px; height: 20px; background: green;"></div> <!-- should still be 20px below after expansion --> + </div> + <div style="position: absolute; top: 60px; height: 20px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print-ref.html new file mode 100644 index 0000000000..4eeea8dcb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + height: 0.5in; + } + .gap { + height: 0.2in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1</div> + <div class="gap"></div> + <div class="item">2</div> + <div class="gap"></div> + <div class="item">3</div> + <div class="gap"></div> + <div class="item">4</div> + <div class="gap"></div> + <div class="item">5</div> + <div class="gap"></div> + <div class="item">6</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print.html new file mode 100644 index 0000000000..1225792aba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-063-print.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="match" href="multi-line-row-flex-fragmentation-063-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + flex-wrap: wrap; + border: 0.25in solid black; + font-size: 0.25in; + row-gap: 0.2in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + height: 0.5in; + flex: 0 0 100%; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item">3</div> + <div class="item">4</div> + <div class="item">5</div> + <div class="item">6</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print-ref.html new file mode 100644 index 0000000000..bc659553ed --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + } + .item { + position: relative; + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 50%; + height: 0.5in; + } + .gap { + height: 0.25in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item" style="width: 100%;">1-1</div> + <div class="gap"></div> + <div class="item">2-1</div> + <div class="gap"></div> + <div class="item" style="left: 1.75in;">2-2</div> + <div class="gap"></div> + <div class="item" style="left: 1.75in;">3-2</div> + <div class="gap" style="height: 1.25in;"></div> + <div class="item">3-1</div> + <div class="gap" style="height: 0.75in;"></div> + <div class="item">4-1</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print.html new file mode 100644 index 0000000000..969c3a3010 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-064-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="match" href="multi-line-row-flex-fragmentation-064-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + flex-wrap: wrap; + border: 0.25in solid black; + font-size: 0.25in; + row-gap: 0.25in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + flex: 0 0 50%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <!-- In each item's N-M label, N is the flex line number, and M is the index + of the item in the line. For example, 3-1 is the first item in line + three. --> + <div class="flexbox"> + <div class="item" style="flex-basis: 100%">1-1</div> + <div class="item">2-1</div> + <div class="item" style="margin-top: 0.5in;">2-2</div> + <div class="item" style="margin-top: 1.75in; margin-bottom: 0.5in;">3-1</div> + <div class="item">3-2</div> + <div class="item">4-1</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065-ref.html new file mode 100644 index 0000000000..50cf3c34c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div style="margin-top:100px;"></div> + <div style="margin-top:100px;"></div> + <div style="margin-top:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065.html new file mode 100644 index 0000000000..10ae8ca41d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-065.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-065-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex" style="row-gap:100px;"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-066.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-066.html new file mode 100644 index 0000000000..b4c7fcd12f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-066.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: tall content inside constrained block. +</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-wrap: wrap; + height: 25px; + background: red; + } + #flex > div { + width: 100%; + background: green; + contain: size; + } +</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:2; column-fill:auto; column-gap:0; height:100px;"> + <div style="height:50px; background:green;"></div> + <div id="flex"> + <div style="height:150px; position:relative;"> + <div style="position:absolute; top:50px; height:100px; width:100%; background:white;"></div> + </div> + <div style="height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067-ref.html new file mode 100644 index 0000000000..4d230d12d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Test with forced breaks. +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + break-before: always; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div style="margin-top:100px; break-after:avoid;"></div> + <div style="margin-top:100px;"></div> + <div style="margin-top:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067.html new file mode 100644 index 0000000000..797089cabe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-067.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Test with forced breaks. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-067-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + break-before: always; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex" style="row-gap:100px;"> + <div></div> + <div style="break-after:avoid;"></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068-ref.html new file mode 100644 index 0000000000..04263fb775 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Test with content overflow. +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div style="height:25px;"></div> + <div class="flex" style="height:25px;"> + <div style="height:150px;"></div> + <div style="margin-top:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068.html new file mode 100644 index 0000000000..809f0c9a3a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-068.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Test with content overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-068-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div style="height:25px;"></div> + <div class="flex" style="row-gap:100px; height:25px;"> + <div style="height:150px;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069-ref.html new file mode 100644 index 0000000000..723b3dbc95 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div style="height:25px;"></div> + <div class="flex"> + <div></div> + <div style="margin-top:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069.html new file mode 100644 index 0000000000..3c3ee17bb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-069.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-069-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div style="height:25px;"></div> + <div class="flex" style="row-gap:100px;"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070-ref.html new file mode 100644 index 0000000000..ee511d287e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Tests row gap that + is larger than the fragmentainer block-size. +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div style="margin-top:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070.html new file mode 100644 index 0000000000..ea301c33b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-070.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Tests row gap that + is larger than the fragmentainer block-size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-070-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex" style="row-gap:150px;"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071-ref.html new file mode 100644 index 0000000000..cd7ca53190 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Tests row gap that + is larger than the fragmentainer block-size. +</title> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div style="margin-top:400px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071.html new file mode 100644 index 0000000000..4a855f7fce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-071.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Multi-line row flex fragmentation: row gaps should not be truncated by + fragmentainer breaks (similar to flex-item margins). Tests row gap that + is larger than the fragmentainer block-size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="multi-line-row-flex-fragmentation-071-ref.html"> +<style> + .multicol { + columns: 2; + column-fill: auto; + width: 300px; + height: 100px; + margin: 20px; + background: yellow; + } + .flex { + display: flex; + flex-wrap: wrap; + background: gray; + } + .flex > div { + contain: size; + width: 100%; + height: 50px; + background: cyan; + } +</style> +<p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> +<div class="multicol"> + <div class="flex" style="row-gap:400px;"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-072.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-072.html new file mode 100644 index 0000000000..4964c14c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-072.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + background: red; + inline-size: 100px; + block-size: 100px; + } + + .flexbox { + display: flex; + flex-wrap: wrap; + row-gap: 5px; + font: 40px/1 Ahem; + background: green; + color: green; + border: solid green; + border-width: 15px 5px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 50px; height: 20px; background: green;"></div> + + <div class="flexbox"> + <div>X</div> + <div>X</div> <!-- The second item should be at the top of the second column. --> + <div>X</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-073.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-073.html new file mode 100644 index 0000000000..6afeb6d558 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-073.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + background: red; + inline-size: 100px; + block-size: 100px; + } + + .flexbox { + display: flex; + flex-wrap: wrap-reverse; + row-gap: 5px; + font: 40px/1 Ahem; + background: green; + color: green; + border: solid green; + border-width: 15px 5px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 50px; height: 20px; background: green;"></div> + + <div class="flexbox"> + <div>X</div> + <div>X</div> <!-- The second item should be at the top of the second column. --> + <div>X</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-074.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-074.html new file mode 100644 index 0000000000..321f8f7988 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-074.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <style> + .multicol { + column-count: 4; + column-gap: 0; + column-fill: auto; + background: red; + width: 100px; + height: 100px; + } + + .multicol > div { + background: green; + } + + .flexbox { + display: flex; + flex-wrap: wrap; + height: 280px; + border: 5px solid green; + align-content: space-between; + } + + .flexbox > div { + contain: size; + width: 95%; /* one flex item per line */ + height: 40px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 100%; height: 50px; background: green;"></div> + + <div class="flexbox"> + <div></div> + <div></div> + </div> + + <div style="width: 100%; height: 60px; background: green;"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print-ref.html new file mode 100644 index 0000000000..65b68b27e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + height: 3in; + } + .flexbox > div { + position: relative; + } + .item { + position: absolute; + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div style="height: 1.5in;"> + <div class="item" style="top: 1in">1</div> + <div class="item" style="left: 25%;">2</div> + </div> + <div style="height: 1in;"> + <div class="item" style="left: 50%; height: 1in;">3</div> + <div class="item" style="left: 75%;">4</div> + </div> + <div> + <div class="item">5</div> + <div class="item" style="left: 25%">6</div> + <div class="item" style="left: 50%">7</div> + <div class="item" style="left: 75%">8</div> + </div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print.html new file mode 100644 index 0000000000..f1f3c79377 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-075-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- This is a multi-line extension of: single-line-row-flex-fragmentation-042-print.html --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="multi-line-row-flex-fragmentation-075-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + border: 0.25in solid black; + font-size: 0.25in; + flex-flow: row wrap; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item" style="margin-top: 1in;">1</div> + <div class="item">2</div> + <div class="item" style="margin-top: 1in; height: 1in;">3</div> + <div class="item" style="align-self: flex-end;">4</div> + <div class="item">5</div> + <div class="item">6</div> + <div class="item">7</div> + <div class="item">8</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print-ref.html new file mode 100644 index 0000000000..a14e3ed016 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + height: 3in; + } + .flexbox > div { + position: relative; + } + .item { + position: absolute; + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div style="height: 1.5in;"> + <div class="item" style="top: 0.5in">1</div> + <div class="item" style="left: 25%;">2</div> + </div> + <div style="height: 1in;"> + <div class="item" style="left: 50%; height: 1in;">3</div> + <div class="item" style="left: 75%; top: 0.5in">4</div> + </div> + <div> + <div class="item">5</div> + <div class="item" style="left: 25%">6</div> + <div class="item" style="left: 50%">7</div> + <div class="item" style="left: 75%">8</div> + </div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print.html new file mode 100644 index 0000000000..a6caab736b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-076-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- This is a multi-line extension of: single-line-row-flex-fragmentation-042-print.html --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="multi-line-row-flex-fragmentation-076-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + border: 0.25in solid black; + font-size: 0.25in; + flex-flow: row wrap; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item" style="margin-top: 0.5in;">1</div> + <div class="item">2</div> + <div class="item" style="margin-top: 1in; height: 1in;">3</div> + <div class="item" style="margin-top: 2in;">4</div> + <div class="item">5</div> + <div class="item">6</div> + <div class="item">7</div> + <div class="item">8</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-077.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-077.html new file mode 100644 index 0000000000..4a0b056113 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-077.html @@ -0,0 +1,31 @@ +<!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=1500947"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + flex-flow: row wrap; + } + .flex > div { + flex: 0 0 100%; + background: green; + } + .flex > div > div { + contain:size; + height: 50px; + } +</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:2; gap:0; column-fill:auto; height:110px;"> + <div style="height:10px;"> + <div style="height:50px; background:green;"></div> + <div class="flex"> + <div><div></div></div> + <div><div></div></div> + <div><div></div></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-078.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-078.html new file mode 100644 index 0000000000..1427d5770d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-078.html @@ -0,0 +1,29 @@ +<!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=1500947"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + flex-flow: row wrap; + } + .flex > div { + flex: 0 0 100%; + contain: size; + height: 50px; + background: green; + } +</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:2; gap:0; column-fill:auto; height:120px;"> + <div style="height:10px;"> + <div style="height:50px; contain:size; background:green;"></div> + <div class="flex"> + <div></div> + <div></div> + <div></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-079.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-079.html new file mode 100644 index 0000000000..57c094d586 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-079.html @@ -0,0 +1,29 @@ +<!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=1500947"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .flex { + display: flex; + flex-flow: row wrap; + } + .flex > div { + flex: 0 0 100%; + contain: size; + height: 50px; + background: green; + } +</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:2; gap:0; column-fill:auto; height:120px;"> + <div style="height:10px;"> + <div class="flex"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print-ref.html new file mode 100644 index 0000000000..de6bd49c92 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: block; + border: 0.25in solid black; + font-size: 0.25in; + } + .item { + width: 100%; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 1in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1<br>2<br>3<br>4</div> + <div class="item">5</div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print.html new file mode 100644 index 0000000000..4fd577cc42 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-080-print.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- This test is adapted from https://bugzilla.mozilla.org/show_bug.cgi?id=1677339#c0 --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="multi-line-row-flex-fragmentation-080-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + border: 0.25in solid black; + font-size: 0.25in; + flex-flow: row wrap; + } + .item { + width: 100%; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 1in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1<br>2<br>3<br>4</div> + <div class="item">5</div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/nested-flex-item-expansion-in-mulicol.html b/testing/web-platform/tests/css/css-break/flexbox/nested-flex-item-expansion-in-mulicol.html new file mode 100644 index 0000000000..56aa3ec5c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/nested-flex-item-expansion-in-mulicol.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:flex;"> + <div style="display:flex;"> + <div style="width:50px;"> + <div style="height:30px;"></div> + <div style="height:50px; contain:size; background:green;"></div> + </div> + </div> + </div> + <div style="height:50px; margin-left:-100%; width:200%; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/quirks-flex-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/quirks-flex-in-multicol-crash.html new file mode 100644 index 0000000000..6b6f250568 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/quirks-flex-in-multicol-crash.html @@ -0,0 +1,8 @@ +<!-- quirks mode required --> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1321393"> +<style> + :root { columns:0; } +</style> +<body style="display:flex;"> + <div>two words<div></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-001.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-001.html new file mode 100644 index 0000000000..d1411f9a16 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Simple single-line column flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + height: 400px; + width: 25px; + } + .flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-002.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-002.html new file mode 100644 index 0000000000..0f19e3ad32 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with item overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + height: 200px; + width: 50px; + } + .flex > div { + height: 10px; + width: 50px; + } + .flex > div > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div style="height: 10px;"></div> + <div style="height: 10px; background: red;"></div> + <div style="height: 180px;"></div> + </div> + <div> + <div style="height: 10px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-003.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-003.html new file mode 100644 index 0000000000..7520448292 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation intrinsic block size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + width: 25px; + background: green; + } + .flex > div { + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-004.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-004.html new file mode 100644 index 0000000000..fd1e258994 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + width: 25px; + } + .flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 150px;"></div> + <div style="height: 150px;"></div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-005.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-005.html new file mode 100644 index 0000000000..311582248a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-005.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with nested OOF. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + position: relative; + height: 400px; + width: 25px; + } + .abs { + background: green; + position: absolute; + width: 25px; + top: 0; + bottom: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-006.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-006.html new file mode 100644 index 0000000000..5d1982d4ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Simple single-line column flex fragmentation with items that stretch. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + flex-direction: column; + height: 400px; + width: 25px; + } + .flex > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 350px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-007.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-007.html new file mode 100644 index 0000000000..4450dd06d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-008.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-008.html new file mode 100644 index 0000000000..5c83abec7f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-008.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with a fixed block-size container grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column; height: 100px;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-009.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-009.html new file mode 100644 index 0000000000..e36c4f0781 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-009.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flexbox expands its intrinsic block-size, due to a + flex item fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; background: green;"> + <div style="display: flex; flex-direction: column;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-010.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-010.html new file mode 100644 index 0000000000..398ba30212 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-010.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 80px;"></div> + <div style="display: inline-block; width: 50px; height: 30px;"></div> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-011.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-011.html new file mode 100644 index 0000000000..546bf2b1ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-011.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that flex-items *don't* get pushed down when there is no expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="line-height: 0; background: green; height:110px;"> + <div style="display: inline-block; width: 50px; height: 80px;"></div> + <div style="display: inline-block; width: 50px; height: 30px;"></div> + </div> + <div style="background: green; height: 90px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-012.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-012.html new file mode 100644 index 0000000000..8cae4cd43e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous multicol flex-item + expanding as a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="width: 50px; columns: 2; column-gap: 0; column-fill: auto; background: green;"> + <div style="width: 50px; height: 160px;"></div> + <div style="column-span: all; height: 30px; break-inside: avoid;"></div> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-013.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-013.html new file mode 100644 index 0000000000..4582388dc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-013.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item + expanding as a result of its floated child. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green;"> + <div style="float: left;"> + <div style="contain: size; width: 50px; height: 80px;"></div> + <div style="contain: size; width: 50px; height: 30px;"></div> + </div> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-014.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-014.html new file mode 100644 index 0000000000..92fe81100c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-014.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex-item expanding as + a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green;"> + <div style="contain: size; width: 25px; height: 60px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + </div> + <div style="background: green; order: -1;"> + <div style="contain: size; width: 25px; height: 80px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + </div> + <div style="background: green;"> + <div style="contain: size; width: 25px; height: 20px;"></div> + <div style="contain: size; width: 25px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-015.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-015.html new file mode 100644 index 0000000000..b8e9133537 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-015.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + top: 50px; + left: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 250px; break-inside: avoid; background: green;"></div> + <div style="height: 100px; break-inside: avoid; background: green;"></div> + </div> + <div class="abs"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-016.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-016.html new file mode 100644 index 0000000000..f079e1140e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-016.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with break-before: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 50px; background: green;"></div> + <div style="height: 300px; break-before: avoid; background: green;"></div> + </div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-017.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-017.html new file mode 100644 index 0000000000..4c4dad3103 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-017.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with break-after: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 50px; break-after: avoid; background: green;"></div> + <div style="height: 300px; background: green;"></div> + </div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-018.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-018.html new file mode 100644 index 0000000000..d06e1bf914 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-018.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with break-before: column. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 50px; break-before: column; background: green;"></div> + <div style="height: 300px; background: green;"></div> + </div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> + <div class="abs" style="background: white; top: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-019.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-019.html new file mode 100644 index 0000000000..74f7caa0d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-019.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: break-before values on the first item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + column-fill: auto; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="width: 25px; height: 50px; background: green;"></div> + <div style="width: 25px; height: 50px; background: green;"></div> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 50px; break-before: avoid; background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> + <div class="abs" style="background: green; top: 50px; left: 0px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-020.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-020.html new file mode 100644 index 0000000000..8b230270ce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-020.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: break-after values on the last item + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + column-fill: auto; + height: 100px; + width: 100px; + position: relative; + background: red; + } + .abs { + position: absolute; + height: 50px; + width: 25px; + top: 50px; + left: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="width: 25px; height: 50px; background: green;"></div> + <div style="width: 25px; height: 50px; background: green;"></div> + <div style="display: flex; flex-direction: column; width: 25px;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 50px; break-after: avoid; background: green;"></div> + </div> + <div style="width: 25px; height: 150px; background: green;"></div> + <div class="abs"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-021.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-021.html new file mode 100644 index 0000000000..6248205bc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-021.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: we shouldn't insert a forced break if + there's no preceding content at the start of a fragmentainer. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-gap: 0px; + column-fill: auto; + height: 100px; + width: 100px; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 50px;"> + <div style="height: 100px; break-before: column; background: green;"></div> + <div style="height: 100px; break-before: column; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-022.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-022.html new file mode 100644 index 0000000000..b0439bed67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-022.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: the flex container consumes the + remaining fragmentainer space if an item breaks before. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-gap: 0px; + column-fill: auto; + height: 100px; + width: 100px; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="display: flex; flex-direction: column; width: 50px; background: green;"> + <div style="height: 50px;"></div> + <div style="height: 100px; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-023.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-023.html new file mode 100644 index 0000000000..dd5c8a7c99 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-023.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation with break-inside: avoid and border-bottom. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:160px;"> + <div style="height:40px; background:green;"></div> + <div style="display:flex; flex-direction:column; width:50px; border-bottom:40px solid green;"> + <div style="break-inside:avoid; height:60px; background:green;"></div> + <div style="break-inside:avoid; height:60px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-024.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-024.html new file mode 100644 index 0000000000..e3007b419b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-024.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip;"> + <div style="display:flex; flex-direction:column; height:300px;"> + <div style="height:300px; background:green; flex-shrink:0;"></div> + <div style="height:200px; background:red; flex-shrink:0;"></div> + <div style="break-before:column; height:10px; background:red; flex-shrink:0;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-025.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-025.html new file mode 100644 index 0000000000..e7e4615782 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-025.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="display:flex; flex-direction:column; max-height:300px; overflow:clip;"> + <div style="height:300px; background:green; flex-shrink:0;"></div> + <div style="height:200px; background:red; flex-shrink:0;"></div> + <div style="break-before:column; height:10px; background:red; flex-shrink:0;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-026.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-026.html new file mode 100644 index 0000000000..ad0d1ab9a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-026.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + .content { + width:50px; + background:green; + contain:size; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0px; column-fill:auto; width:100px; height:100px; position:relative;"> + <div style="display:flex; flex-direction:column; max-height:200px; overflow:clip;"> + <div class="content" style="height:50px; flex-shrink:0;"></div> + <div class="content" style="height:150px; flex-shrink:0;"></div> + </div> + <div class="content" style="position:absolute; height:50px; left:0px; top:50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-027.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-027.html new file mode 100644 index 0000000000..38ab5e427e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-027.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + OOF static position in a fragmented flexbox. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#abspos-items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .abs { + background: green; + position: absolute; + width: 25px; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0px; column-fill:auto; width:100px; height:100px;"> + <div style="display:flex; flex-direction:column; height:400px; position:relative;"> + <div style="height: 100px; width: 25px; background-color: red;"></div> + <div style="width: 25px;"> + <div style="height: 100px; width: 25px; background-color: green;"></div> + <div class="abs"></div> + <div style="height: 100px; width: 25px; background-color: red;"></div> + </div> + <div style="height: 100px; width: 25px; background-color: green;"></div> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-028.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-028.html new file mode 100644 index 0000000000..80562c57cb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-028.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + OOFs positioned in a fragmented flexbox. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#abspos-items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .abs { + background: green; + position: absolute; + width: 25px; + height: 200px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0px; column-fill:auto; width:100px; height:100px;"> + <div style="display:flex; flex-direction:column; height:400px; position:relative;"> + <div style="height: 100px; width: 25px; background-color: red;"></div> + <div style="width: 25px; background-color: red"> + <div style="height: 100px; width: 25px;"></div> + <div class="abs" style="top:0;"></div> + <div style="height: 100px; width: 25px;"></div> + </div> + <div style="height: 100px; width: 25px; background-color: red;"></div> + <div class="abs" style="bottom:0;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-029.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-029.html new file mode 100644 index 0000000000..e6f7f8a5fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-029.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + OOF static position in a fragmented flexbox with viewport containing block. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#abspos-items"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .abs { + background: green; + position: absolute; + width: 25px; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0px; column-fill:auto; width:100px; height:100px;"> + <div style="display:flex; flex-direction:column; height:400px;"> + <div style="height: 100px; width: 25px; background-color: red;"></div> + <div style="width: 25px;"> + <div class="abs"></div> + <div style="height: 100px; width: 25px; background-color: red;"></div> + <div style="height: 100px; width: 25px; background-color: green;"></div> + </div> + <div style="height: 100px; width: 25px; background-color: green;"></div> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-030.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-030.html new file mode 100644 index 0000000000..34f3642cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-030.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous flex row expanding as + a result of fragmentation with margin-top. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + } + #flex > div { + background: green; + width: 20px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div> + <div style="contain: size; width: 20px; height: 70px;"></div> + <div style="contain: size; width: 20px; height: 40px;"></div> + </div> + <div style="margin-top: 10px; width: 20px; position: relative;"> + <div style="contain: size; width: 20px; height: 80px;"></div> + <div style="contain: size; width: 20px; height: 40px;"></div> + <div style="position: absolute; top: -60px; width: 20px; height: 60px; background: green;"></div> + </div> + <div style="height: 100px; width: 20px;"></div> + <div style="height: 60px; width: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-031.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-031.html new file mode 100644 index 0000000000..5d42f9a2df --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-031.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Tests that a flexbox expands its intrinsic block-size, due to a + flex item fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + background: green; + } + #flex > div { + width: 20px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div> + <div style="contain: size; width: 20px; height: 70px;"></div> + <div style="contain: size; width: 20px; height: 40px;"></div> + </div> + <div style="margin-top: 10px; width: 20px;"> + <div style="contain: size; width: 20px; height: 80px;"></div> + <div style="contain: size; width: 20px; height: 40px;"></div> + </div> + <div style="height: 100px; width: 20px;"></div> + <div style="height: 60px; width: 20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-032.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-032.html new file mode 100644 index 0000000000..c78169725a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-032.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: column balancing with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + background: green; + height: 50px; + } + #flex > div { + width: 50px; + background: green; + } +</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="width: 100px; columns: 2; column-gap: 0; position: relative;"> + <div id="flex"> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 50px; background: green;"></div> + </div> + </div> + <div style="position: absolute; height: 50px; width: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-033.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-033.html new file mode 100644 index 0000000000..0a7e423e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-033.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: Tall margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + position: relative; + } + #flex > div { + width: 20px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div style="height: 50px; width: 20px; background: green;"></div> + <div id="flex"> + <div style="height: 100px; margin-top: 50px;"></div> + <div style="height: 150px; margin-top: 150px;"></div> + <div style="position: absolute; height: 50px;"></div> + <div style="position: absolute; height: 150px; top: 150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-034.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-034.html new file mode 100644 index 0000000000..e84e633878 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-034.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: Tall margins with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + position: relative; + } + #flex > div { + width: 20px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="height: 50px; margin-top: 100px; break-before: column;"></div> + <div style="height: 200px; margin-top: 50px;"></div> + <div style="position: absolute; height: 150px; top: 50px;"></div> + <div style="position: absolute; height: 50px; top: 250px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-035.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-035.html new file mode 100644 index 0000000000..317336fa2c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-035.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: Negative margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height: 100px; width: 100px; background: red; position: absolute"> + <div style="margin-top: 150px; margin-left: -40px; width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto;"> + <div id="flex"> + <div style="height: 150px; width: 20px;"></div> + <div style="height: 100px; margin-top: -150px; width: 100px; break-before: column; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-036.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-036.html new file mode 100644 index 0000000000..41f9f93277 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-036.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: Percentage height decendant. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-flow: column; height: 200px;"> + <div style="min-height: 100px;"> + <div style="height: 200%; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-037.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-037.html new file mode 100644 index 0000000000..f4ce762085 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-037.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: nested forced break with overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-flow: column;"> + <div style="height: 100px; width: 50px; background: green;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="height: 10px; width: 50px; background: green; break-before: column;"></div> + </div> + <div style="height: 50px; width: 50px; background: green; margin-top: 10px;"></div> + <div style="height: 40px; width: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-038.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-038.html new file mode 100644 index 0000000000..a537ee7282 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-038.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: forced breaks with overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; flex-flow: column;"> + <div style="height: 100px; width: 50px; background: green;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="height: 10px; width: 50px; background: green; break-before: column;"></div> + </div> + <div style="height: 50px; width: 50px; background: green; margin-top: 10px; break-before: column;"></div> + <div style="height: 40px; width: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-039.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-039.html new file mode 100644 index 0000000000..c5820951b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-039.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: column balancing with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + background: green; + height: 100px; + } + #flex > div { + width: 25px; + background: green; + flex: none; + } +</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="width: 100px; columns: 4; column-gap: 0; position: relative;"> + <div id="flex"> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 25px; background: green;"></div> + </div> + <div style="height: 85px;"></div> + <div style="height: 5px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 5px;"> + <div style="height: 90px; width: 25px; background: green;"></div> + </div> + </div> + <div style="position: absolute; top: 5px; left: 50px; height: 95px; width: 25px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040-ref.html new file mode 100644 index 0000000000..3d20cb44e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-flow: column; height: 200px;"> + <div style="height: 50px; width: 50px; background: yellow;"></div> + <div style="height: 50px; width: 50px; background: purple;"></div> + <div style="height: 50px; width: 50px; background: blue;"></div> + <div style="height: 50px; width: 50px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040.html new file mode 100644 index 0000000000..bc4fa7b01c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-040.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: column-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="single-line-column-flex-fragmentation-040-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-flow: column-reverse; height: 200px;"> + <div style="height: 50px; width: 50px; background: orange;"></div> + <div style="height: 50px; width: 50px; background: blue;"></div> + <div style="height: 50px; width: 50px; background: purple;"></div> + <div style="height: 50px; width: 50px; background: yellow;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-041.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-041.html new file mode 100644 index 0000000000..66a6b0660f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-041.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + height: 200px; + position: relative; + justify-content: flex-end; + } + #flex > div { + width: 100px; + height: 100px; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="margin-left: -50px; width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; background: green;"></div> + <div style="background: red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-042.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-042.html new file mode 100644 index 0000000000..be5732c24d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-042.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: OOF static position with alignment + and expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + position: relative; + justify-content: flex-end; + } + #flex > div { + width: 50px; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="background: green; height: 40px;"></div> + <div id="flex"> + <div style="position: absolute; height: 100px; background: green;"></div> + <div style="background: green;"> + <div style="contain: size; height: 40px;"></div> + <div style="contain: size; height: 100px; background: red;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-043.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-043.html new file mode 100644 index 0000000000..decca1369e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-043.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: OOF static position with alignment + and expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + position: relative; + justify-content: center; + } + #flex > div { + width: 50px; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; height: 100px; background: green;"></div> + <div style="height: 50px;"> + <div style="height: 50px;"></div> + <div style="height: 50px; background: red;"></div> + </div> + <div style="height: 50px; break-before: column; background: red;"></div> + <div style="height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html new file mode 100644 index 0000000000..2ef4c988ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-044.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Tests that flex-items get pushed down due to a previous multicol flex-item + expanding as a result of fragmentation w/ vertical writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="writing-mode: vertical-lr;"> + <div style="inline-size: 100px; block-size: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="inline-size: 50px; columns: 2; column-gap: 0; column-fill: auto; background: green;"> + <div style="inline-size: 50px; block-size: 160px;"></div> + <div style="column-span: all; block-size: 30px; break-inside: avoid;"></div> + </div> + <div style="background: green; block-size: 50px;"></div> + <div style="background: green; block-size: 20px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html new file mode 100644 index 0000000000..f2d4d745fa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-045.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: column balancing with forced break + w/ vertical writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + flex-direction: column; + background: green; + block-size: 100px; + } + #flex > div { + inline-size: 25px; + background: green; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-rl;"> + <div style="inline-size: 100px; block-size: 100px; background: red;"> + <div style="inline-size: 100px; columns: 4; column-gap: 0; position: relative;"> + <div id="flex"> + <div style="block-size: 5px;"></div> + <div style="block-size: 10px; break-before: column;"></div> + <div style="block-size: 5px;"> + <div style="block-size: 90px; inline-size: 25px; background: green;"></div> + </div> + <div style="block-size: 85px;"></div> + <div style="block-size: 5px;"></div> + <div style="block-size: 10px; break-before: column;"></div> + <div style="block-size: 5px;"> + <div style="block-size: 90px; inline-size: 25px; background: green;"></div> + </div> + </div> + <div style="position: absolute; right: 5px; top: 50px; block-size: 95px; inline-size: 25px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-046.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-046.html new file mode 100644 index 0000000000..c2eee20a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-046.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="margin-left:-100px; columns:2; height:200px; width:200px; column-gap:0; column-fill:auto;"> + <div style="height:199px;"></div> + <div style="display:flex; flex-direction:column;"> + <div style="columns:2; width:100%; column-gap:0; background:red; line-height:0;"> + <div style="display:inline-block; width:100%; height:20px; background:green;"></div> + <div style="height:180px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-047.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-047.html new file mode 100644 index 0000000000..1f47cb1b6d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-047.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: auto margin end alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="display: flex; flex-direction: column; width: 50px; height: 200px;"> + <div style="height: 100px; width: 50px; background: green; margin-top: auto;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-048.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-048.html new file mode 100644 index 0000000000..bb1725665c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-048.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: auto margin center alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="position: absolute; background: green; width: 50px; height: 50px;"></div> + <div style="display: flex; flex-direction: column; width: 50px; height: 200px;"> + <div style="height: 100px; width: 50px; background: green; margin: auto 0;"></div> + </div> + <div style="position: absolute; bottom: 0; background: green; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-049.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-049.html new file mode 100644 index 0000000000..888fb2bb91 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-049.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Single-line column flex fragmentation: flex property and item expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="position: absolute; top: 50px; background: green; width: 50px; height: 50px;"></div> + <div style="position: absolute; left: 100px; background: white; width: 50px; height: 50px;"></div> + <div style="display: flex; flex-direction: column; width: 50px; height: 200px;"> + <div style="width: 50px; background: green; flex: 1;"></div> + <div style="width: 50px; background: green; flex: 1; break-before: column;"></div> + <div style="width: 50px; background: green; flex: 2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-050.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-050.html new file mode 100644 index 0000000000..ae683e938c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-050.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with an indefinite flex-basis expands if the + container height is auto. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: content; height: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-051.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-051.html new file mode 100644 index 0000000000..9fc2a6e442 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-051.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with a definite flex-basis *doesn't* expand. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: 10px; height: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + <div style="background: green; width: 50px; height: 190px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-052.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-052.html new file mode 100644 index 0000000000..faa0d13055 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-052.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with an definite flex-basis but an indefinite height expands. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-053.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-053.html new file mode 100644 index 0000000000..524870e4fc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-053.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item that can't shrink and has a definite flex-basis, an + indefinite height, and a non-auto min-height *doesn't* expand. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column; height: 100px;"> + <div style="background: green; flex-basis: 10px; min-height: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + <div style="background: green; width: 50px; height: 190px;"></div> + </div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-054.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-054.html new file mode 100644 index 0000000000..60c130ed39 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-054.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with an definite flex-basis, an indefinite height, and + a non-auto min-height does expand. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: 10px; min-height: 10px;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-055.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-055.html new file mode 100644 index 0000000000..2958e6167a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-055.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with an definite flex-basis, an indefinite height, and + can't shrink does expand. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: 10px; justify-self: flex-start;"> + <div style="contain: size; width: 50px; height: 50px;"></div> + <div style="contain: size; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-056.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-056.html new file mode 100644 index 0000000000..87091a423a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-056.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 1; width: 100px;"> + <div style="display: flex; flex-direction: column;"> + <div style="margin-bottom: 20px;"> + <div style="height: 50px; width: 100px; background: green;"></div> + </div> + </div> + <div style="margin-top: -20px; height: 50px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-057.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-057.html new file mode 100644 index 0000000000..9261477e7d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-057.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting with expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column;"> + <div style="height: 50px; width: 50px;"> + <div style="height: 100px; width: 50px; background: green;"></div> + </div> + <div style="margin-bottom: 20px; height: 60px; width: 50px; break-inside: avoid; background: green;"></div> + </div> + <div style="margin-top: -20px; height: 40px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-058.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-058.html new file mode 100644 index 0000000000..ec00e47436 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-058.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; background: green;"> + <div style="height: 50px; width: 50px; margin-bottom: 20px;"> + <div style="height: 200px; width: 50px;"></div> + </div> + </div> + <div style="height: 130px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-059.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-059.html new file mode 100644 index 0000000000..ff91f373ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-059.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=1410949"> +<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> + <div style="display:flex; flex-flow:column; height:100%;"> + <div style="overflow:clip; background:green;"> + <div style="height:10px;"></div> + <div style="break-inside:avoid; height:100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print-ref.html new file mode 100644 index 0000000000..56c38817e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + height: 0.5in; + } + .gap { + height: 0.25in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1</div> + <div class="gap"></div> + <div class="item">2</div> + <!-- Two gaps, to mock testcase's row-gap and the margin-top on item 3. --> + <div class="gap"></div> + <div class="gap"></div> + <div class="item">3</div> + <div class="gap"></div> + <div class="item">4</div> + <div class="gap"></div> + <div class="item">5</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print.html new file mode 100644 index 0000000000..1589080197 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-060-print.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="match" href="single-line-column-flex-fragmentation-060-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + flex-direction: column; + border: 0.25in solid black; + font-size: 0.25in; + row-gap: 0.25in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item">1</div> + <div class="item">2</div> + <div class="item" style="margin-top: 0.25in">3</div> + <div class="item">4</div> + <div class="item">5</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-061.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-061.html new file mode 100644 index 0000000000..2cbb42d775 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-061.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + background: red; + inline-size: 100px; + block-size: 100px; + } + + .flexbox { + display: flex; + flex-direction: column; + row-gap: 5px; + font: 40px/1 Ahem; + background: green; + color: green; + border: solid green; + border-width: 15px 5px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 50px; height: 20px; background: green;"></div> + + <div class="flexbox"> + <div>X</div> + <div>X</div> <!-- The second item should be at the top of the second column. --> + <div>X</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-062.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-062.html new file mode 100644 index 0000000000..fae736d108 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-062.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the second column if it cannot fit in the first column.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + background: red; + width: 100px; + height: 100px; + } + + .flexbox { + display: flex; + flex-direction: column-reverse; + row-gap: 5px; + font: 40px/1 Ahem; + background: green; + color: green; + border: solid green; + border-width: 15px 5px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 50px; height: 20px; background: green;"></div> + + <div class="flexbox"> + <div>X</div> + <div>X</div> <!-- The second item should be at the top of the second column. --> + <div>X</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-063.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-063.html new file mode 100644 index 0000000000..f2d407a614 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-063.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <style> + .multicol { + column-count: 4; + column-gap: 0; + column-fill: auto; + background: red; + width: 100px; + height: 100px; + } + + .multicol > div { + background: green; + } + + .flexbox { + display: flex; + flex-direction: column; + height: 340px; + border: 5px solid green; + justify-content: end; + } + + .flexbox > div { + contain: size; + width: 15px; + height: 50px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 50px; height: 50px;"></div> + + <div class="flexbox"> + <div></div> + <div></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-064.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-064.html new file mode 100644 index 0000000000..9cda2de6cb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-064.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <style> + .multicol { + column-count: 4; + column-gap: 0; + column-fill: auto; + background: red; + width: 100px; + height: 100px; + } + + .multicol > div { + background: green; + } + + .flexbox { + display: flex; + flex-direction: column; + height: 280px; + justify-content: space-between; + border: 5px solid green; + } + + .flexbox > div { + contain: size; + width: 15px; + height: 40px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 100%; height: 50px;"></div> + + <div class="flexbox"> + <div></div> + <div></div> + </div> + + <div style="width: 100%; height: 60px;"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print-ref.html new file mode 100644 index 0000000000..07d0c63766 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: block; + border: 0.25in solid black; + } + .flexbox table { + border-spacing: 0; + } + .flexbox thead, .flexbox tfoot { + background: gold; + } + .text, tr { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <table> + <thead><tr><td>Header</td></tr></thead> + <tfoot><tr><td>Footer</td></tr></tfoot> + <tbody> + <tr><td>1</td></tr> + <tr><td>2</td></tr> + <tr><td>3</td></tr> + <tr><td>4</td></tr> + <tr><td>5</td></tr> + <tr><td>6</td></tr> + <tr><td>7</td></tr> + </tbody> + </table> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print.html new file mode 100644 index 0000000000..14a5dc6ac0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-065-print.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- This test is adapted from https://bugzilla.mozilla.org/show_bug.cgi?id=1744363#c9 --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + <link rel="match" href="single-line-column-flex-fragmentation-065-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: flex; /* This triggers the bug. */ + display: column; + border: 0.25in solid black; + } + .flexbox table { + border-spacing: 0; + } + .flexbox thead, .flexbox tfoot { + background: gold; + } + .text, tr { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <table> + <thead><tr><td>Header</td></tr></thead> + <tfoot><tr><td>Footer</td></tr></tfoot> + <tbody> + <tr><td>1</td></tr> + <tr><td>2</td></tr> + <tr><td>3</td></tr> + <tr><td>4</td></tr> + <tr><td>5</td></tr> + <tr><td>6</td></tr> + <tr><td>7</td></tr> + </tbody> + </table> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print-ref.html new file mode 100644 index 0000000000..100fcca084 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: block; + border: 0.25in solid black; + } + .text { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <div> + <div>1</div> + <div style="break-after: page">2</div> + <div>3</div> + <div>4</div> + </div> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print.html new file mode 100644 index 0000000000..4ee00f3601 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-066-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- This test is adapted from https://bugzilla.mozilla.org/show_bug.cgi?id=1663079#c8 --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + <link rel="match" href="single-line-column-flex-fragmentation-066-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: flex; /* This triggers the bug. */ + flex-direction: column; + border: 0.25in solid black; + } + .text { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <div> + <div>1</div> + <div style="break-after: page">2</div> + <div>3</div> + <div>4</div> + </div> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-067.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-067.html new file mode 100644 index 0000000000..6ee57d1852 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-067.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tests that a percentage height is resolved correctly in a flex item in fragmented context.</title> +<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-flexbox-1/#pagination"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; flex-direction: column; height: 200px;"> + <div style="flex: none;"> + <div style="width: 50px; height: 100%; background: green;"></div> + <div style="contain: size; width: 50px; height: 100px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-001.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-001.html new file mode 100644 index 0000000000..379327a4af --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Simple single-line row flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + height: 500px; + width: 20px; + } + .flex > div { + background: green; + height: 500px; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-002.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-002.html new file mode 100644 index 0000000000..bcfd587e4a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation with item overflow. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + background: red; + } + .flex { + display: flex; + height: 200px; + width: 50px; + } + .flex > div { + height: 10px; + width: 50px; + } + .flex > div > div { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div style="height: 10px;"></div> + <div style="height: 190px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-003.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-003.html new file mode 100644 index 0000000000..8b2736f1d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation intrinsic block size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + width: 20px; + background: green; + } + .flex > div { + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div style="height: 50px;"></div> + <div style="height: 500px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-004.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-004.html new file mode 100644 index 0000000000..d1f143bcc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + width: 20px; + } + .flex > div { + background: green; + width: 5px; + height: 500px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-005.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-005.html new file mode 100644 index 0000000000..05ec2157ce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-005.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation with nested OOF. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + position: relative; + height: 400px; + width: 25px; + } + .abs { + background: green; + position: absolute; + width: 25px; + top: 0; + bottom: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-006.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-006.html new file mode 100644 index 0000000000..e8a2f407e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Simple single-line row flex fragmentation with items that stretch. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + background: red; + column-count: 5; + column-fill:auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .flex { + display: flex; + height: 500px; + width: 20px; + } + .flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="flex"> + <div></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-007.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-007.html new file mode 100644 index 0000000000..36dad9d895 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item grows due to fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + <div style="display: inline-block; width: 25px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-008.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-008.html new file mode 100644 index 0000000000..dfade0ff4b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-008.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Tests that a flex-item with a fixed block-size container *doesn't* grow due to fragmentation + if stretched. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: flex; height: 100px;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-009.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-009.html new file mode 100644 index 0000000000..8dbaa6925f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-009.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that a flexbox expands its intrinsic block-size, due to a + flex item fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; background: green;"> + <div style="display: flex; align-self: flex-start;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-010.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-010.html new file mode 100644 index 0000000000..cd952e7241 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-010.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Tests that flex-items in the same flex row *don't* get pushed down due to a + previous flex item expanding as a result of fragmentation. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex;"> + <div style="background: green;"> + <div style="contain: size; width: 25px; height: 80px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + </div> + <div style="height: 200px; width:25px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-011.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-011.html new file mode 100644 index 0000000000..cf1c6b764a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-011.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Tests that flex-items *don't* get pushed down when there is no expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex;"> + <div style="background: green; height: 110px; position: relative;"> + <div style="contain: size; width: 25px; height: 80px;"></div> + <div style="contain: size; width: 25px; height: 30px;"></div> + <div style="position: absolute; top: 110px; height: 90px; width: 25px; background: green;"></div> + </div> + <div style="background: green; width: 25px; height: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-012.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-012.html new file mode 100644 index 0000000000..75acedcae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-012.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation with items in the same row ending layout + in different fragmentainers. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 200px;"></div> + <div style="position: relative; height: 100px;"> + <div style="width: 25px; height: 100px;"></div> + <div style="position: absolute; width: 25px; height: 100px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-013.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-013.html new file mode 100644 index 0000000000..5b66c063de --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-013.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation with items in the same row ending layout + in different fragmentainers. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + background: green; + width: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="height: 200px;"></div> + <div style="position: relative; height: 100px;"> + <div style="width: 10px; height: 100px;"></div> + <div style="position: absolute; width: 10px; height: 100px; background: green;"></div> + </div> + <div style="height: 200px;"></div> + <div style="position: relative; height: 80px;"> + <div style="width: 10px; height: 80px;"></div> + <div style="position: absolute; width: 10px; height: 120px; background: green;"></div> + </div> + <div style="height: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-014.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-014.html new file mode 100644 index 0000000000..00f9afa701 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-014.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation with break-inside: avoid. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + background: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 20px; background: green;"></div> + <div style="position: absolute; height: 80px; width: 50%; background: green;"></div> + <div id="flex"> + <div style="height: 100px;"></div> + <div style="break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-015.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-015.html new file mode 100644 index 0000000000..6cb5ce0a31 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-015.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-before values on the first row + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div> + <div style="height: 100px; width: 50px; break-before: column;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-016.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-016.html new file mode 100644 index 0000000000..343dbc45d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-016.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-after values on the last row + are propagated to the flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div> + <div style="height: 50px; width: 50px; break-after: column;"></div> + </div> + </div> + <div style="height: 100px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-017.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-017.html new file mode 100644 index 0000000000..0c0cd4ac2b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-017.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-before values on the first row + are propagated to the nested flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + break-before: avoid; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div id="flex" style="background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; break-before: column;"></div> + </div> + </div> + <div style="height: 50px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-018.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-018.html new file mode 100644 index 0000000000..9e62460cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-018.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-after values on the last row + are propagated to the nested flex container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + break-after: avoid; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div id="flex" style="background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 25px; width: 25px; break-after: column;"></div> + </div> + </div> + <div style="height: 100px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-019.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-019.html new file mode 100644 index 0000000000..149338a7e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-019.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-before:avoid on the first + row is propagated to the container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + width: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50%; width: 50px; background: green;"></div> + <div style="height: 50px; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="break-before: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-020.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-020.html new file mode 100644 index 0000000000..3fe75a4e43 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-020.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: break-after:avoid on the last + row is propagated to the container. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + width: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="height: 50px; width: 50px; background: green;"></div> + <div style="position: absolute; height: 50%; width: 50px; background: green;"></div> + <div id="flex"> + <div style="height: 50px;"></div> + <div style="break-after: avoid;"></div> + </div> + <div style="height: 50px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-021.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-021.html new file mode 100644 index 0000000000..d4e29dd815 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-021.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: If the fragmentainer is out of space + but the flexbox and flex row have zero block-size, not additional + fragmentainers should be created to hold this content. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 1; column-rule: 20px solid red; column-fill: auto;"> + <div style="height: 100px; width: 100px; background: green;"></div> + <div id="flex"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-022.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-022.html new file mode 100644 index 0000000000..4d64641e4c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-022.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: If the fragmentainer is out of space + but a flex row should break before if it has content. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="height: 100px; width: 100px; background: green;"></div> + <div id="flex"> + <div style="height: 100px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-023.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-023.html new file mode 100644 index 0000000000..d344e91f54 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-023.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: Tall margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + position: relative; + } + #flex > div { + width: 10px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div id="flex"> + <div style="margin-top: 250px; height: 250px;"></div> + <div style="margin-top: 100px; height: 100px;"></div> + <div style="position: absolute; height: 100px; width: 30px;"></div> + <div style="position: absolute; height: 50px; top: 200px;"></div> + <div style="position: absolute; height: 300px; top: 200px; left: 10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-024.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-024.html new file mode 100644 index 0000000000..7e5e3f206b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-024.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: Tall margins with forced break. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + position: relative; + } + #flex > div { + width: 10px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> + <div style="width: 20px; height: 50px; background: green;"></div> + <div id="flex"> + <div style="margin-top: 100px; height: 300px; break-before: avoid;"></div> + <div style="margin-top: 50px; height: 350px; break-before: column;"></div> + <div style="position: absolute; height: 150px; top: -50px;"></div> + <div style="position: absolute; height: 100px; top: -50px; left: 10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-025.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-025.html new file mode 100644 index 0000000000..dd753039c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-025.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: Negative margins. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + width: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div id="flex"> + <div style="height: 200px;"></div> + <div style="height: 210px; margin-top: -10px; break-before: column;"></div> + </div> + <div style="position: absolute; height: 10px; width: 25px; top: -10px; left: 25px; background: white;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-026.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-026.html new file mode 100644 index 0000000000..9a78bf503b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-026.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: Percentage height decendant. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div style="display: flex; min-height: 200px;"> + <div style="flex: 1; background: green;"> + <div style="height: 200%;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027-ref.html new file mode 100644 index 0000000000..e1079de13f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; height: 200px;"> + <div style="height: 200px; width: 10px; background: pink;"></div> + <div style="height: 200px; width: 10px; background: yellow;"></div> + <div style="height: 200px; width: 10px; background: purple;"></div> + <div style="height: 200px; width: 10px; background: blue;"></div> + <div style="height: 200px; width: 10px; background: orange;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027.html new file mode 100644 index 0000000000..85550f18a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-027.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: row-reverse. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="single-line-row-flex-fragmentation-027-ref.html"> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="display: flex; flex-flow: row-reverse; height: 200px;"> + <div style="height: 200px; width: 10px; background: orange;"></div> + <div style="height: 200px; width: 10px; background: blue;"></div> + <div style="height: 200px; width: 10px; background: purple;"></div> + <div style="height: 200px; width: 10px; background: yellow;"></div> + <div style="height: 200px; width: 10px; background: pink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-028.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-028.html new file mode 100644 index 0000000000..4d0b5e52cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-028.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + height: 200px; + position: relative; + align-items: flex-end; + } + #flex > div { + width: 100px; + height: 100px; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="margin-left: -50px; width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; background: green;"></div> + <div style="background: red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-029.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-029.html new file mode 100644 index 0000000000..5d7e72ddf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-029.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: Row expansion, stretching and column balancing. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } + #flex > div { + background: green; + width: 25px; + } +</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="width: 100px; columns: 2; column-gap: 0;"> + <div id="flex"> + <div></div> + <div> + <div style="contain: size; width: 10px; height: 70px;"></div> + <div style="contain: size; width: 10px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html new file mode 100644 index 0000000000..a70ad1473e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-030.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: If the fragmentainer is out of space + but a flex row should break before if it has content w/ vertical + writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-lr;"> + <div style="inline-size: 100px; block-size: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="block-size: 100px; inline-size: 100px; background: green;"></div> + <div id="flex"> + <div style="block-size: 100px; inline-size: 100px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html new file mode 100644 index 0000000000..1bda683312 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-031.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: OOF static position and alignment + w/ vertical writing-mode. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + block-size: 200px; + position: relative; + align-items: flex-end; + } + #flex > div { + inline-size: 100px; + block-size: 100px; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode: vertical-rl;"> + <div style="margin-top: -50px; inline-size: 100px; block-size: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div id="flex"> + <div style="position: absolute; background: green;"></div> + <div style="background: red;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-032.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-032.html new file mode 100644 index 0000000000..5cdafeb15c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-032.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="margin-left:-100px; columns:2; height:200px; width:200px; column-gap:0; column-fill:auto;"> + <div style="height:199px;"></div> + <div style="display:flex;"> + <div style="columns:2; width:100%; column-gap:0; background:red; line-height:0;"> + <div style="display:inline-block; width:100%; height:20px; background:green;"></div> + <div style="height:180px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-033.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-033.html new file mode 100644 index 0000000000..8d3d8f002e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-033.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: OOF static position and alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + position: relative; + align-items: flex-end; + width: 50px; + } + #flex > div { + width: 50px; + flex: none; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0;"> + <div style="background: green; height: 40px;"></div> + <div id="flex"> + <div style="position: absolute; height: 100px; background: green;"></div> + <div style="background: green;"> + <div style="contain: size; height: 40px;"></div> + <div style="contain: size; height: 100px; background: red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-034.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-034.html new file mode 100644 index 0000000000..a274219ed9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-034.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: baseline alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + #flex { + display: flex; + align-items: baseline; + width: 50px; + height: 200px; + line-height: 0; + position: relative; + } + #flex > div { + width: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-fill: auto; column-gap: 0; background: red;"> + <div id="flex"> + <div style="position: absolute; height: 50px;"></div> + <div style="height: 150px;"> + <span style="display: inline-block; height: 10px;"></span> + </div> + <div style="height: 200px;"> + <span style="display: inline-block; height: 60px;"></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-035.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-035.html new file mode 100644 index 0000000000..77313e67d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-035.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: auto margin end alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="display: flex; width: 50px; height: 200px;"> + <div style="height: 100px; width: 50px; background: green; margin-top: auto;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-036.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-036.html new file mode 100644 index 0000000000..5881e058bc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-036.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: auto margin center alignment. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="position: absolute; background: green; width: 50px; height: 50px;"></div> + <div style="display: flex; width: 50px; height: 200px;"> + <div style="height: 100px; width: 50px; background: green; margin: auto 0;"></div> + </div> + <div style="position: absolute; bottom: 0; background: green; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-037.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-037.html new file mode 100644 index 0000000000..c7895af92a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-037.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + Single-line row flex fragmentation: the container gets pushed to next fragmentainer + if content doesn't fit in the current fragmentainer. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="background: green; width: 50px; height: 50px;"></div> + <div style="position: absolute; background: green; width: 50px; height: 50px;"></div> + <div style="display: flex; width: 50px; background: green;"> + <div style="height: 100px; width: 50px; contain: size;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-038.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-038.html new file mode 100644 index 0000000000..d9ea2acc4c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-038.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 1; width: 100px;"> + <div style="display: flex;"> + <div style="margin-bottom: 20px;"> + <div style="height: 50px; width: 100px; background: green;"></div> + </div> + </div> + <div style="margin-top: -20px; height: 50px; width: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-039.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-039.html new file mode 100644 index 0000000000..5c3a039d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-039.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting with expansion. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex;"> + <div style="margin-bottom: 20px;"> + <div style="height: 50px; width: 50px;"> + <div style="height: 100px; width: 50px; background: green;"></div> + </div> + <div style="height: 60px; width: 50px; break-inside: avoid; background: green;"></div> + </div> + </div> + <div style="margin-top: -20px; height: 40px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-040.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-040.html new file mode 100644 index 0000000000..90d8612964 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-040.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item extending beyond the fragmentainer + size. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative; background: red;"> + <div style="display: flex;"> + <div style="margin-bottom: 150px;"> + <div style="height: 50px; width: 50px; background: green;"></div> + </div> + </div> + <div style="position: absolute; top: 50px; height: 50px; width: 50px; background: green;"></div> + <div style="height: 100px; width: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-041.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-041.html new file mode 100644 index 0000000000..112e963a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-041.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> + Tests that the margin-bottom of the last flex item is taken into account + when fragmenting with expansion and a stretched item. +</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> +<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="column-count: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; position: relative;"> + <div style="margin-bottom: 40px; background: green;"> + <div style="height: 50px; width: 25px;"> + <div style="height: 100px; width: 25px;"></div> + </div> + <div style="height: 60px; width: 25px; break-inside: avoid;"></div> + </div> + <div style="width: 25px; background: green;"></div> <!-- this should stretch to 200px --> + <div style="position: absolute; height: 40px; width: 50%; top: 60px; left: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print-ref.html new file mode 100644 index 0000000000..5f65fbaf68 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<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; } + + .flexbox { + border: 0.25in solid black; + font-size: 0.25in; + height: 2.5in; + } + .item { + position: relative; + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + .gap { + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item" style="left: 25%;">2</div> + <div class="gap"></div> + <div class="item">1</div> + <div class="item" style="left: 50%; height: 1in;">3</div> + <div class="item" style="left: 75%; top: -1in;">4</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print.html new file mode 100644 index 0000000000..f8a2934ac5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-042-print.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="match" href="single-line-row-flex-fragmentation-042-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { margin: 0; } + + .flexbox { + display: flex; + border: 0.25in solid black; + font-size: 0.25in; + } + .item { + contain: size; + box-sizing: border-box; + border: 4px solid purple; + width: 25%; + height: 0.5in; + } + </style> + + <!-- This div makes the flexbox not at the top of first page. --> + <div style="height: 0.25in; background: gray;"></div> + + <div class="flexbox"> + <div class="item" style="margin-top: 1in;">1</div> + <div class="item">2</div> + + <!-- Due to fragmentation, item 3 is being pushed down and placed at the top + of page 2, enlarging the flex container's block-size. Observe item 3 + and item 4's block-end edges. Before fragmentation, both are at the + same level; after fragmentation, item 3's block-end edge becomes lower + than item 4's, and making item 4's block-end edge no longer touch the + flex container's content-box block-end edge.--> + <div class="item" style="margin-top: 1in; height: 1in;">3</div> + <div class="item" style="align-self: flex-end;">4</div> + </div> + + <div style="height: 0.25in; background: gray;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-043.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-043.html new file mode 100644 index 0000000000..e41862d6c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-043.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Tests un-fragmentable flex item is pushed to the next column without overflowing the flex container.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743890"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <style> + .multicol { + column-count: 4; + column-gap: 0; + column-fill: auto; + background: red; + width: 100px; + height: 100px; + } + + .multicol > div { + background: green; + } + + .flexbox { + display: flex; + height: 280px; + border: 5px solid green; + } + + .flexbox > div { + contain: size; + width: 50%; + height: 40px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="multicol"> + <!-- This div makes the flexbox not at the top of first column. --> + <div style="width: 100%; height: 50px"></div> + + <div class="flexbox"> + <div style="align-self: start"></div> + <div style="align-self: end"></div> + </div> + + <div style="width: 100%; height: 60px"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044-ref.html new file mode 100644 index 0000000000..af1c8155bd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + width: 200px; + border: 5px solid gray; + height: 0px; + } + .flexbox { + position: relative + } + .flexbox > div { + position: absolute; + width: 50px; + contain: size; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <div style="height: 10px; background: pink; left: 100px;"></div> + <div style="height: 20px; background: orange; left: 50px;"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044.html new file mode 100644 index 0000000000..6da4fde6ee --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-044.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Test that the first flex item is pushed to the second column due to insufficient space, and the browser shouldn't create infinite columns.</title> + <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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1827582"> + <link rel="match" href="single-line-row-flex-fragmentation-044-ref.html"> + + <style> + .multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + width: 200px; + border: 5px solid gray; + height: 0px; + } + .flexbox { + display: flex; + width: 100px; + } + .flexbox > div { + width: 50px; + contain: size; + } + </style> + + <div class="multicol"> + <div class="flexbox"> + <!-- To reproduce the bug, the first item should have margin-top, and its + block-end should be smaller than the second item's block-end. --> + <div style="height: 10px; background: pink; margin-top: 5px;"></div> + <div style="height: 20px; background: orange"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print-ref.html new file mode 100644 index 0000000000..07d0c63766 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: block; + border: 0.25in solid black; + } + .flexbox table { + border-spacing: 0; + } + .flexbox thead, .flexbox tfoot { + background: gold; + } + .text, tr { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <table> + <thead><tr><td>Header</td></tr></thead> + <tfoot><tr><td>Footer</td></tr></tfoot> + <tbody> + <tr><td>1</td></tr> + <tr><td>2</td></tr> + <tr><td>3</td></tr> + <tr><td>4</td></tr> + <tr><td>5</td></tr> + <tr><td>6</td></tr> + <tr><td>7</td></tr> + </tbody> + </table> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print.html new file mode 100644 index 0000000000..f51d0d161f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-045-print.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- This test is adapted from https://bugzilla.mozilla.org/show_bug.cgi?id=1744363#c9 --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + <link rel="match" href="single-line-row-flex-fragmentation-045-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: flex; /* This triggers the bug. */ + border: 0.25in solid black; + } + .flexbox table { + border-spacing: 0; + } + .flexbox thead, .flexbox tfoot { + background: gold; + } + .text, tr { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <table> + <thead><tr><td>Header</td></tr></thead> + <tfoot><tr><td>Footer</td></tr></tfoot> + <tbody> + <tr><td>1</td></tr> + <tr><td>2</td></tr> + <tr><td>3</td></tr> + <tr><td>4</td></tr> + <tr><td>5</td></tr> + <tr><td>6</td></tr> + <tr><td>7</td></tr> + </tbody> + </table> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print-ref.html new file mode 100644 index 0000000000..100fcca084 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: block; + border: 0.25in solid black; + } + .text { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <div> + <div>1</div> + <div style="break-after: page">2</div> + <div>3</div> + <div>4</div> + </div> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print.html new file mode 100644 index 0000000000..2c934c303d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-046-print.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- This test is adapted from https://bugzilla.mozilla.org/show_bug.cgi?id=1663079#c8 --> +<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-flexbox-1/#pagination"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> + <link rel="match" href="single-line-row-flex-fragmentation-046-print-ref.html"> + + <style> + @page { size: 5in 3in; margin: 0.5in; } + body { + margin: 0; + } + .flexbox { + display: flex; /* This triggers the bug. */ + border: 0.25in solid black; + } + .text { + block-size: 0.25in; + } + </style> + + <div class="text">Before Flexbox</div> + <div class="flexbox"> + <div> + <div>1</div> + <div style="break-after: page">2</div> + <div>3</div> + <div>4</div> + </div> + </div> + <div class="text">After Flexbox</div> +</html> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-047.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-047.html new file mode 100644 index 0000000000..061e62f3c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-047.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tests that a percentage height is resolved correctly in a flex item in fragmented context.</title> +<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-flexbox-1/#pagination"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex; min-height: 100px;"> + <div style="width: 100px"> + <div style="width: 50px; height: 100%; background: green;"></div> + <div style="width: 50px; height: 100px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-048.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-048.html new file mode 100644 index 0000000000..96a302716c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-row-flex-fragmentation-048.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Tests that a flex item with aspect-ratio applies the automatic content-based block-size in fragmented context.</title> +<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-flexbox-1/#pagination"> +<link rel="help" herf="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1744363"> +<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; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: flex;"> + <div style="width: 50px; aspect-ratio: 1/2; background: green;"> + <div style="height: 200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/slider-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/slider-in-multicol-crash.html new file mode 100644 index 0000000000..8cc2ec6242 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/slider-in-multicol-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1277724"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:2;"> + x + <input type="range" style="display:block;"> +</div> diff --git a/testing/web-platform/tests/css/css-break/flexbox/textarea-input-flex-items-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/flexbox/textarea-input-flex-items-in-multicol-crash.html new file mode 100644 index 0000000000..49ae5199e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/textarea-input-flex-items-in-multicol-crash.html @@ -0,0 +1,12 @@ +<!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=1870103"> + +<div style="columns: 2;"> + <div style="display: flex;"> + <textarea></textarea> + <input> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-000.html b/testing/web-platform/tests/css/css-break/float-000.html new file mode 100644 index 0000000000..36a0722805 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-000.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:100px;"> + <div style="height:60px; background:green;"></div> + </div> + <div style="float:left; width:100%; height:0;"> + <div style="height:40px; margin-top:-40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-001.html b/testing/web-platform/tests/css/css-break/float-001.html new file mode 100644 index 0000000000..84b238a7c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="float:left; width:100%; height:200px;"> + <div style="height:160px; background:green;"></div> + </div> + <div style="float:left; clear:left; width:100%; height:0;"> + <div style="height:40px; margin-top:-40px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-002.html b/testing/web-platform/tests/css/css-break/float-002.html new file mode 100644 index 0000000000..e1036b0ce8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="float:left; width:100%; height:200px;"> + <div style="height:160px; background:green;"></div> + </div> + <div style="display:flow-root; clear:left; height:0;"> + <div style="height:40px; margin-top:-40px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-003.html b/testing/web-platform/tests/css/css-break/float-003.html new file mode 100644 index 0000000000..1d1bd37bbf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:100px;"> + <div style="height:60px; background:green;"></div> + </div> + <div style="clear:both; display:flow-root; height:0;"> + <div style="height:40px; margin-top:-40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-004.html b/testing/web-platform/tests/css/css-break/float-004.html new file mode 100644 index 0000000000..f2fce78175 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-004.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<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; column-gap:0; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="float:right; break-inside:avoid; width:60%; height:400px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px;"></div> + <div style="height:100px; background:green;"></div> + <div style="height:50px;"></div> + <div style="height:60px; background:green;"></div> + </div> + <div style="clear:left; float:left; width:40%; height:0;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px;"></div> + <div style="height:100px; background:green;"></div> + <div style="height:50px;"></div> + <div style="height:60px; background:green;"></div> + </div> + <div style="clear:both; display:flow-root; height:0;"> + <div style="height:40px; margin-top:-40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-005.html b/testing/web-platform/tests/css/css-break/float-005.html new file mode 100644 index 0000000000..ae515e2063 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#varying-size-boxes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:100px; background:green;"></div> + <div style="display:flow-root; width:100%; height:230px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-006.html b/testing/web-platform/tests/css/css-break/float-006.html new file mode 100644 index 0000000000..28be2dcc28 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-006.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#varying-size-boxes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:50px; background:green;"></div> + <div style="display:flow-root; width:100%; height:280px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-007.html b/testing/web-platform/tests/css/css-break/float-007.html new file mode 100644 index 0000000000..10fc1217fc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-007.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#varying-size-boxes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:150px; background:green;"></div> + <div style="display:flow-root; width:100%; height:180px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-008.html b/testing/web-platform/tests/css/css-break/float-008.html new file mode 100644 index 0000000000..8685bf925d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#varying-size-boxes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:250px; background:green;"></div> + <div style="display:flow-root; width:100%; height:80px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-009-ref.html b/testing/web-platform/tests/css/css-break/float-009-ref.html new file mode 100644 index 0000000000..9e117c49c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-009-ref.html @@ -0,0 +1,20 @@ +<!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="stylesheet" href="/fonts/ahem.css"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + width: 200px; + font: 50px/1 Ahem; +} +</style> + +<div class="multicol"> + <div>AX</div> + <div>BX</div> + <div>CX</div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-009.html b/testing/web-platform/tests/css/css-break/float-009.html new file mode 100644 index 0000000000..8f76c75bd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-009.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/#possible-breaks"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1441048"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="float-009-ref.html"> + +<style> +.multicol { + column-count: 2; + column-gap: 0; + width: 200px; + font: 50px/1 Ahem; +} +</style> + +<div class="multicol"> + <div>A<div style="float:left">X</div></div> + <div>B<div style="float:left">X</div></div> + <div>C<div style="float:left">X</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-010.html b/testing/web-platform/tests/css/css-break/float-010.html new file mode 100644 index 0000000000..68eef4a6d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-010.html @@ -0,0 +1,16 @@ +<!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=1377795"> +<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; line-height:20px; background:red;"> + <div style="height:20px; background:green;"></div> + <div style="display:flow-root; background:green;"> + <div> + <div style="float:left; width:20px; height:20px;"></div> + </div> + <br> + <br> + <div style="float:left; break-inside:avoid; width:20px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-011-crash.html b/testing/web-platform/tests/css/css-break/float-011-crash.html new file mode 100644 index 0000000000..5838050a83 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-011-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=1377795"> +<div style="columns:2; column-fill:auto; height:100px; line-height:20px;"> + <div style="height:70px; background:cyan;"></div> + <div style="height:1px;"> + <div style="float:left; width:20px; height:20px; background:hotpink;"></div> + </div> + <br> + <div style="float:left; break-inside:avoid; width:20px; height:20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-012.html b/testing/web-platform/tests/css/css-break/float-012.html new file mode 100644 index 0000000000..6896817443 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1379815"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="columns:2; column-fill:auto; gap:0; width:110px; height:100px; background:red;"> + <div style="height:10px;"></div> + <div style="margin-top:-10px; width:50px; background:green;"> + <div> + <div style="float:left; width:100%; height:200px;"></div> + </div> + <div style="clear:both;"></div> + </div> +</div> +<script> + document.body.offsetTop, + mc.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/float-013.html b/testing/web-platform/tests/css/css-break/float-013.html new file mode 100644 index 0000000000..5f8c595c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-013.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=1458768"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:200px;"> + <div style="height:100px; background:green;"></div> + <div style="float:left; break-inside:avoid; margin-bottom:1px; width:100%; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-014.tentative.html b/testing/web-platform/tests/css/css-break/float-014.tentative.html new file mode 100644 index 0000000000..95c9d6f89f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-014.tentative.html @@ -0,0 +1,12 @@ +<!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=1458768"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9191"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:200px;"> + <div style="height:100px; background:green;"></div> + <div style="float:left; margin-bottom:1px; width:100%; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-015.tentative.html b/testing/web-platform/tests/css/css-break/float-015.tentative.html new file mode 100644 index 0000000000..885edbc84c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-015.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1458768"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9191"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:200px;"> + <div style="height:100px; background:green;"></div> + <div style="float:left; margin-bottom:1px; width:100%; height:100px; background:green;"> + <div style="height:150px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-016.html b/testing/web-platform/tests/css/css-break/float-016.html new file mode 100644 index 0000000000..a8fc29acc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-016.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1505182"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; gap:0; line-height:20px; width:50px; height:100px; orphans:1; widows:1; background:green;"> + <div style="float:right; height:30px; width:50%; padding-bottom:150px;"></div> + <div style="float:right; width:100%;"> + <div style="float:right; contain:size; width:100%; height:91px; background:green;"></div> + <div style="float:right; width:100%; height:109px; background:green;"></div> + <br> + <br> + <br> + <br> + <br> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-017-ref.html b/testing/web-platform/tests/css/css-break/float-017-ref.html new file mode 100644 index 0000000000..2be6253c05 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-017-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The numbers from 1 to 10 should be seen below. Each number only once.</p> +<div style="width:20em; line-height:20px;"> + <div style="float:left; width:10em;"> + 1<br> + 2<br> + 3<br> + 4<br> + 5<br> + </div> + <div style="float:left;"> + 6<br> + 7<br> + 8<br> + 9<br> + 10<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-017.html b/testing/web-platform/tests/css/css-break/float-017.html new file mode 100644 index 0000000000..5ca1f80a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-017.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=1506393"> +<link rel="match" href="float-017-ref.html"> +<p>The numbers from 1 to 10 should be seen below. Each number only once.</p> +<div style="width:20em; columns:4; gap:0; column-fill:auto; height:100px; line-height:20px; orphans:1; widows:1;"> + 1<br> + <div style="float:right; contain:size; width:100%; height:200px;"></div> + <div style="display:flow-root; width:100%;"> + 2<br> + 3<br> + <div style="float:right; break-inside:avoid; width:10px; height:200px;"></div> + 4<br> + 5<br> + 6<br> + 7<br> + 8<br> + 9<br> + 10<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-after-self-collapsing-block-in-inline-crash.html b/testing/web-platform/tests/css/css-break/float-after-self-collapsing-block-in-inline-crash.html new file mode 100644 index 0000000000..1ab512748c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-after-self-collapsing-block-in-inline-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1303201"> +<div style="columns:2; column-fill:auto; line-height:20px; height:25px; orphans:1; widows:1;"> + <span> + <br> + <div style="margin-top:1px;"></div> + <div style="float:left; width:100%; height:10px;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-in-inline-widows-orphans-crash.html b/testing/web-platform/tests/css/css-break/float-in-inline-widows-orphans-crash.html new file mode 100644 index 0000000000..be8645ddfa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-in-inline-widows-orphans-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486252"> +<div style="columns:10em; orphans:2; widows:2; height:20px; column-fill:auto; line-height:20px; background:yellow;"> + <div style="float:left; width:100%; height:30px; background:cyan;"></div> + <br> + <div style="float:left; contain:size; width:1px; height:10px; background:hotpink;"></div> + <div style="float:left; width:10px; height:10px; background:blue;"></div> + allworkandnoplaymakesjackadullstableboy +</div> diff --git a/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-000.html b/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-000.html new file mode 100644 index 0000000000..e42d941e78 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-000.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-break-3/#parallel-flows"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1238508"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div> + <div style="float:left; width:100%; height:100px; background:green;"></div> + </div> + <div style="clear:both; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-001.html b/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-001.html new file mode 100644 index 0000000000..835a5be09a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-in-self-collapsing-block-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1238508"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div> + <div style="float:left; margin-top:-10px; width:100%; height:100px; background:green;"></div> + <div style="margin-top:10px;"></div> + </div> + <div style="clear:both; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-inside-small-block.html b/testing/web-platform/tests/css/css-break/float-inside-small-block.html new file mode 100644 index 0000000000..2afd6dacc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-inside-small-block.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:180px; height:100px; background:red;"> + <div style="height:30px; background:green;"></div> + <div> + <div style="float:left; width:10px; height:170px; background:green;"></div> + <div style="height:30px; background:green;"></div> + </div> + <div style="height:40px; background:green;"></div> + <div style="height:100px; background:white;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-stretching-bfc-000.html b/testing/web-platform/tests/css/css-break/float-stretching-bfc-000.html new file mode 100644 index 0000000000..c56e9a998c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-stretching-bfc-000.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#root-height"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="float:left; width:50%; height:200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-stretching-bfc-001.html b/testing/web-platform/tests/css/css-break/float-stretching-bfc-001.html new file mode 100644 index 0000000000..4c6a9f63ea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-stretching-bfc-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#root-height"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="float:left; width:50%; height:150px;"></div> + <div style="float:left; clear:left; width:50%; height:50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print-ref.html b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print-ref.html new file mode 100644 index 0000000000..dd78a266f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +@page { size:5in 3in; margin:0.5in; } + +html, body { + margin: 0; + font: 20px/1 Ahem; +} +</style> + +<div style="height: 1.5in; background: black"> + <!-- This "greedy div" exists to eat up most of the space on the first page. --> +</div> +<div style="background: gray; width: 2in; height: 0.5in;"></div> +<div style="height: 1in"></div> <!-- Mimic float margin-bottom --> + +TEXT <!-- This text comes after the float (and after its margin-bottom) in the second page. --> diff --git a/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print.html b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print.html new file mode 100644 index 0000000000..cd1026faf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-001-print.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<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/#possible-breaks"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1464761"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="float-with-large-margin-bottom-cross-page-001-print-ref.html"> + +<style> +@page { size:5in 3in; margin:0.5in; } + +html, body { + margin: 0; + font: 20px/1 Ahem; +} +</style> + +<div style="height: 1.5in; background: black"> + <!-- This "greedy div" exists to eat up most of the space on the first page. --> +</div> +<div style="float: left; background: gray; + width: 2in; height: 0.5in; margin-bottom: 1in"></div> + +<br style="clear:both"> +TEXT <!-- This text comes after the float (and after its margin-bottom) in the second page. --> diff --git a/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print-ref.html b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print-ref.html new file mode 100644 index 0000000000..cb1701418d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<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; } + +html, body { + margin: 0; +} +</style> + +<div style="height: 1.5in; background: black"> + <!-- This "greedy div" exists to eat up most of the space on the first page. --> +</div> +<div style="background: gray; width: 2in; height: 0.5in; break-before: page"></div> diff --git a/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print.html b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print.html new file mode 100644 index 0000000000..e2c6b7711a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/float-with-large-margin-bottom-cross-page-002-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<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/#possible-breaks"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1464761"> +<link rel="match" href="float-with-large-margin-bottom-cross-page-002-print-ref.html"> + +<style> +@page { size:5in 3in; margin:0.5in; } + +html, body { + margin: 0; +} +</style> + +<div style="height: 1.5in; background: black"> + <!-- This "greedy div" exists to eat up most of the space on the first page. --> +</div> +<div style="float: left; background: gray; break-inside: avoid; + width: 2in; height: 0.5in; margin-bottom: 1in"></div> diff --git a/testing/web-platform/tests/css/css-break/floated-multicol-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/floated-multicol-in-multicol-crash.html new file mode 100644 index 0000000000..ba4ae29b12 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/floated-multicol-in-multicol-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1320509"> +<div style="columns:3; column-fill:auto; height:20px;"> + <div style="display:flex; float:left; margin-top:8px;"> + <fieldset style="border:none; contain:paint;"> + <div style="contain:size; height:18px;"></div> + <div style="float:left; clear:both; height:6px;"></div> + <div style="columns:9; display:list-item; clear:both; column-fill:auto; height:0;"></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic-ref.html b/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic-ref.html new file mode 100644 index 0000000000..51855d2d7a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> + .float { + float: left; + width: 2em; + height: 2em; + } + .yellow { + background: yellow; + } + .blue { + background: blue; + } +</style> +<p>Below there should be two yellow and two blue squares.</p> +<div class="float yellow"></div> +<div class="float blue"></div> +<div class="float yellow"></div> +<div class="float blue"></div> diff --git a/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic.html b/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic.html new file mode 100644 index 0000000000..09e5021555 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/floats-and-text-narrow-and-short-dynamic.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=961516"> +<link rel="match" href="floats-and-text-narrow-and-short-dynamic-ref.html"> +<style> + #container { + columns: 4; + height: 2em; + column-fill: auto; + column-gap: 0; + line-height: 2em; + background: yellow; + } + + .float { + float: left; + width: 2em; + height: 2em; + break-inside: avoid; + background: blue; + } +</style> +<p>Below there should be two yellow and two blue squares.</p> +<div id="container"> + <div style="width:1em;"> + <div style="height:1em;"></div> + <div class="float"></div> + + <div class="float"></div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.width = "8em"; +</script> diff --git a/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-000.html b/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-000.html new file mode 100644 index 0000000000..d5796ba641 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-000.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<meta name="assert" content="A forced break at the block-start of the fragmentainer is allowed, as long as it's otherwise at a valid class A break point"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:1; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="break-after:column;"></div> + <div style="height:99px; background:white;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-001.html b/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-001.html new file mode 100644 index 0000000000..b3ad80ca9a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/forced-break-at-fragmentainer-start-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<meta name="assert" content="A forced break at the block-start of the fragmentainer is not allowed unless it's at a valid class A break point"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div> + <div style="break-before:column; height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/form-control.html b/testing/web-platform/tests/css/css-break/form-control.html new file mode 100644 index 0000000000..8ef6eedae2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/form-control.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Replaced content should be considered to be monolithic"> +<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:3; column-gap:0;"> + <input style="display:block; margin:0; border:none; padding:0; width:100px; height:100px; background:green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-000-crash.html b/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-000-crash.html new file mode 100644 index 0000000000..78bf7a3f79 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-000-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<div style="columns:2; column-fill:auto; height:0.9px;"> + <div style="contain:size; height:2px;"></div> + <div style="width:0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-001-crash.html b/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-001-crash.html new file mode 100644 index 0000000000..b4aeb1825d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmentainer-1px-clamping-001-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<div style="columns:2; width:100px; column-gap:100px; column:fill:auto; height:0.9px;"> + <div style="margin-top:1px; width:100px; height:1px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats-ref.html b/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats-ref.html new file mode 100644 index 0000000000..5effc82452 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .fakecolumn { + float: left; + width: 200px; + height: 100px; + margin-left: 10px; + } + .fakecolumn:first-child { + margin-left: 0; + } + .part { + height: 100px; + background: hotpink; + } +</style> +<p>There should be (from left to right) a hotpink square, a thin hotpink + rectangle, then a wider hotpink rectangle.</p> +<div style="width:620px; height:100px;"> + <div class="fakecolumn"> + <div class="part" style="width:100px;"></div> + </div> + <div class="fakecolumn"> + <div class="part" style="width:10px;"></div> + </div> + <div class="fakecolumn"> + <div class="part" style="width:200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats.html b/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats.html new file mode 100644 index 0000000000..348019aaf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-autowidth-fc-root-beside-floats.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#varying-size-boxes"> +<link rel="match" href="fragmented-autowidth-fc-root-beside-floats-ref.html"> +<p>There should be (from left to right) a hotpink square, a thin hotpink + rectangle, then a wider hotpink rectangle.</p> +<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;"> + <div style="float:right; width:100px; height:60px;"></div> + <div style="clear:both; float:right; break-inside:avoid; width:190px; height:60px;"></div> + <div style="display:flow-root; height:300px; background:hotpink;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-empty-contenteditable-crash.html b/testing/web-platform/tests/css/css-break/fragmented-empty-contenteditable-crash.html new file mode 100644 index 0000000000..c2149c77d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-empty-contenteditable-crash.html @@ -0,0 +1,7 @@ +<!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=1261747"> +<p>Test passes if it doesn't crash (or freeze).</p> +<div style="columns:2; column-fill:auto; height:50px;"> + <div style="padding-top:20px; padding-bottom:100px;" contenteditable="true"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-float-in-inline-crash.html b/testing/web-platform/tests/css/css-break/fragmented-float-in-inline-crash.html new file mode 100644 index 0000000000..0d84b95988 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-float-in-inline-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1225967"> +<div style="columns:2; column-fill:auto; height:100px;"> + <span> + <div style="float:left; height:150px; background:cyan;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-float-overflowing-container.html b/testing/web-platform/tests/css/css-break/fragmented-float-overflowing-container.html new file mode 100644 index 0000000000..789c30bce7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-float-overflowing-container.html @@ -0,0 +1,12 @@ +<!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=1378252"> +<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:flow-root; background:green;"> + <div> + <div style="float:left; width:50%; height:200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/fragmented-oof-in-inline-crash.html b/testing/web-platform/tests/css/css-break/fragmented-oof-in-inline-crash.html new file mode 100644 index 0000000000..8428f32417 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/fragmented-oof-in-inline-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1290093"> +<div style="columns:2;"> + <span style="position:relative;"> + <div style="position:absolute;"></div> + <div id="spanner" style="column-span:all;"></div> + </span> +</div> +<script> + document.body.offsetTop; + // This doesn't actually affect layout, but changing display type requires re-attach. + spanner.style.display = "flow-root"; +</script> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html new file mode 100644 index 0000000000..0b954f2814 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green; height: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html new file mode 100644 index 0000000000..aec5085991 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-002.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green; grid-template-rows: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html new file mode 100644 index 0000000000..659d9eaac5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; background: green; height: 100px; break-inside: avoid;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html new file mode 100644 index 0000000000..3e27606071 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; columns: 4; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; background: green; height: 300px; break-before: column;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html new file mode 100644 index 0000000000..a110275ff8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; columns: 2; column-gap: 0; background: red; position: relative;"> + <div style="display: grid; background: green; height: 50px; break-after: column;"></div> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="width: 50px; height: 50px; background: green; position: absolute; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html new file mode 100644 index 0000000000..2c25d1f35c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="Clipping only in the inline direction shouldn't affect fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; width:100px; column-gap:0; column-fill:auto; height:100px; background:red;"> + <div style="overflow-x:clip; display: grid; height:200px;"> + <div style="width:100px; background:red;"> + <div style="width:25px; height:400px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html new file mode 100644 index 0000000000..86323ee57a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip; height:300px;"> + <div style="display: grid;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html new file mode 100644 index 0000000000..38392afc60 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-008.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="display:grid; max-height:300px; overflow:clip;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html new file mode 100644 index 0000000000..c4148bb226 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-009.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + .content { + width:50px; + background:green; + contain:size; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0px; column-fill:auto; width:100px; height:100px; position:relative;"> + <div style="display:grid; max-height:200px; overflow:clip;"> + <div class="content" style="height:50px;"></div> + <div class="content" style="height:150px;"></div> + </div> + <div class="content" style="position:absolute; height:50px; left:0px; top:50px;"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html new file mode 100644 index 0000000000..d3e87d062b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> + <div style="background: green; height: 50px;"></div> + <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> + <div></div> + <div style="break-before: column;"></div> <!-- Should result in a column break before the grid container. --> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html new file mode 100644 index 0000000000..8615244bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-container-fragmentation-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> + <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> + <div style="break-after: column;"></div> <!-- Should result in a column break after the grid container. --> + <div></div> + </div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 50px;"></div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-008.html new file mode 100644 index 0000000000..b9caacc4af --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; column-fill: auto; height: 100px; gap: 0; columns: 2;"> + <div style="display: grid; position: relative; grid-template: 100px 100px / auto; background: red;"> + <div style="background: green;"></div> + <div style="position: absolute; top: 0; left: 0; width: 50px; height: 100px; grid-row-start: 2; grid-row-end: 2; background: green;"</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-009.html new file mode 100644 index 0000000000..dc095fd4ee --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; column-fill: auto; height: 100px; gap: 0; columns: 2;"> + <div style="display: grid; position: relative; grid-template: auto 30px / auto; background: red;"> + <div style="background: green;"> + <div style="height: 70px; break-inside: avoid;"></div> + <div style="height: 70px; break-inside: avoid;"></div> + </div> + <div style="position: absolute; top: 0; left: 0; width: 50px; height: 30px; grid-row-start: 2; grid-row-end: 2; background: green;"</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html new file mode 100644 index 0000000000..1e2d41775e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests basic fragmentation of a grid-item.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="min-height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html new file mode 100644 index 0000000000..ce1b6b67ef --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-item reordered with grid-row-start is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 150px; background: green; grid-row-start: 1;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html new file mode 100644 index 0000000000..8c4e42d640 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that parallel grid items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: auto auto;"> + <div style="background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html new file mode 100644 index 0000000000..e0eca9c9d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; align-self: end;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html new file mode 100644 index 0000000000..8b7503f927 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item (with auto margins) is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; margin-top: auto;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html new file mode 100644 index 0000000000..8c458c832c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-006.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a center aligned grid-item is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; align-self: center;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 50px;"></div> + <div style="position: absolute; background: green; bottom: 0; right: 0; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html new file mode 100644 index 0000000000..cd78a9bc17 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-007.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a center aligned grid-item (with auto margins) is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="height: 100px; background: green; margin: auto 0;"></div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 50px;"></div> + <div style="position: absolute; background: green; bottom: 0; right: 0; width: 50px; height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html new file mode 100644 index 0000000000..79703f6513 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that baseline aligned grid-items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; align-items: baseline; line-height: 0; grid-template-columns: auto auto;"> + <div style="height: 150px; background: green;"> + <span style="display: inline-block; height: 10px;"></span> + </div> + <div style="height: 200px; background: green;"> + <span style="display: inline-block; height: 60px;"></span> + </div> + </div> + <div style="position: absolute; width: 25px; height: 50px; top: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html new file mode 100644 index 0000000000..3338510941 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-009.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a margin fragments correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="background: green; margin-top: 50px;"></div> + </div> + <div style="position: absolute; width: 50px; height: 50px; top: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html new file mode 100644 index 0000000000..bd57ef797a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a min-content min-track grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(min-content, 10px);"> + <div style="line-height: 0; background: green;"> <!-- Spans an min-content min row. --> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html new file mode 100644 index 0000000000..e353537827 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with auto track(s) grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: auto;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html new file mode 100644 index 0000000000..c3b206e26c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a flexible track grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 1fr;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html new file mode 100644 index 0000000000..a1e7106e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-013.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, auto) track inside an auto-grid grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(0, auto);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html new file mode 100644 index 0000000000..09c95d1840 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-014.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, auto) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px; grid-template-rows: minmax(0, auto);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html new file mode 100644 index 0000000000..6dd82de582 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, 1fr) track inside an auto-grid grows due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: minmax(0, 1fr);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html new file mode 100644 index 0000000000..c16f740bd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-016.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a minmax(0, 1fr) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px; grid-template-rows: minmax(0, 1fr);"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html new file mode 100644 index 0000000000..a5c1abeb12 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-017.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid-item with a fixed track *doesn't* grow due to fragmentation.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="line-height: 0; background: green;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html new file mode 100644 index 0000000000..18c757352e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-018.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that a grid expands its intrinsic block-size, due to a grid child fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; background: green;"> + <div style="display: grid;"> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 50px; height: 50px;"></div> + <div style="display: inline-block; width: 50px; height: 100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html new file mode 100644 index 0000000000..dc14a6f744 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-019.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items in subsequent rows get pushed down due to a grid-item fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: auto 70px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 110px, after 100px + 30px --> + <div style="display: inline-block; width: 50px; height: 80px;"></div> + <div style="display: inline-block; width: 50px; height: 30px;"></div> + </div> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html new file mode 100644 index 0000000000..f0636c4982 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-020.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items in subsequent rows get pushed down due to a grid-items fragmenting.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; orphans: 1; background: red;"> + <div style="display: grid; grid-template-rows: auto auto 170px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 110px, after 100px + 30px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 90px, after 70px + 30px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 30px;"></div> + </div> + <div style="background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html new file mode 100644 index 0000000000..775422db7b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-021.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px;"> + <div style="background: green;"></div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 180px, after 100px + 100px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html new file mode 100644 index 0000000000..a31e8b51df --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-022.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 12.5px 12.5px; grid-template-rows: auto 140px;"> + <div style="background: green;"></div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 180px, after 100px + 100px + 60px --> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + <div style="display: inline-block; width: 12.5px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html new file mode 100644 index 0000000000..092aeba9c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-023.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: auto 40px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html new file mode 100644 index 0000000000..691212b240 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-024.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: auto 40px;"> + <div style="line-height: 0; background: green;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="line-height: 0; background: green; align-self: end;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> + <div style="background: green; position: absolute; left: 25px; top: 0; width: 25px; height: 10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html new file mode 100644 index 0000000000..fc0731f63e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-025.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items within an expaning row (due to fragmentation) stretch to the new row-size.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-areas: 'a b' 'c c';"> + <div style="background: green; grid-area: b; line-height: 0;"> <!-- row size before fragmentation is 130px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 50px;"></div> + </div> + <div style="background: green; grid-area: c; height: 40px;"></div> + <div style="background: green; grid-area: a; line-height: 0;"> <!-- row size before fragmentation is 120px, after 100px + 60px --> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + <div style="display: inline-block; width: 25px; height: 60px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html new file mode 100644 index 0000000000..9f4be08a44 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-026.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items with a block-start margin will get pushed into the next fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 100px 100px / 50px; grid-template-areas: 'a' 'b'"> + <div style="background: green; grid-area: a; margin-top: 100px; height: 100px;"></div> + <div style="background: green; grid-area: a; height: 100px; "></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html new file mode 100644 index 0000000000..c0270db499 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-027.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-items with a negative margin are placed relative to their row (instead of fragmenting earlier).</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: red; width: 100px; height: 100px; display: flow-root;"> + <div style="margin-top: 10px; height: 90px; columns: 2; column-gap: 0;"> + <div style="display: grid; grid-template: 90px 90px / 50px;"> + <div> + <div style="background: green; margin-top: -10px; height: 100px;"></div> + </div> + <div style="background: green; margin-top: -10px; height: 100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html new file mode 100644 index 0000000000..1718fa2081 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-028.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 50px 100px / 50px;"> + <div style="background: green; height: 100px;"></div> + <div style="background: green; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html new file mode 100644 index 0000000000..380fba879c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-029.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item pushes all grid-items on the same row into the next fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template: 50px 100px / 25px 25px; grid-template-areas: 'a a' 'b c';"> + <div style="background: green; grid-area: a; height: 100px;"></div> + <div style="background: green; grid-area: b;"></div> + <div style="background: green; grid-area: c; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html new file mode 100644 index 0000000000..a3e05d0956 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-030.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; line-height: 0;"> <!-- row size before fragmentation is 170px, after 100px + 90px --> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + <div style="display: inline-block; width: 25px; height: 90px;"></div> + </div> + <div style="background: green; break-inside: avoid; height: 80px;"></div> + <div style="background: green; height: 120px;"></div> + </div> + <div style="background: green; position: absolute; width: 25px; height: 10px; bottom: 0; left: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html new file mode 100644 index 0000000000..1a339ab22c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-031.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-inside:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; line-height: 0;"> <!-- row size before fragmentation is 170px, after 100px + 80px --> + <div style="display: inline-block; width: 25px; height: 90px;"></div> + <div style="display: inline-block; width: 25px; height: 80px;"></div> + </div> + <div style="background: green; height: 30px; break-inside: avoid;"></div> <!-- Gets placed in the 3rd fragmentainer. --> + <div style="background: green; height: 170px;"></div> + </div> + <div style="background: green; position: absolute; width: 25px; height: 20px; left: 25px; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html new file mode 100644 index 0000000000..33f855f895 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-032.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; grid-column: 1 / span 2;"></div> + <div style="background: green; break-before: avoid;"></div> + <div style="background: green; break-before: column;"></div> <!-- "column" should have precedence over "avoid" --> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html new file mode 100644 index 0000000000..c8f54c90a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-033.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; break-after: column;"></div> <!-- "column" should have precedence over "avoid" --> + <div style="background: green; grid-column: 1 / span 2;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html new file mode 100644 index 0000000000..9a81c074bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-034.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-columns: 25px 25px; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; break-after: avoid;"></div> + <div style="background: green; grid-column: 1 / span 2; break-before: column;"></div> <!-- "column" should have precedence over "avoid" --> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html new file mode 100644 index 0000000000..15a544ea22 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-035.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break voilation precedence.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; columns: 2; column-fill: auto; gap: 0; width: 100px; height: 100px; background: red;"> + <div style="display:grid; orphans: 2; widows: 2; line-height: 0;"> + <div style="background: green; height: 70px;"></div> + <div style="break-before: avoid;"> <!-- Prefer avoiding the row break rather and violate orphans/widows constraint. --> + <span style="display: inline-block; height: 30px; width: 50px; background: green;"></span> + <span style="display: inline-block; height: 70px; width: 50px; background: green;"></span> + </div> + </div> + <div style="position: absolute; width: 50px; height: 30px; bottom: 0; right: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html new file mode 100644 index 0000000000..ba44745e9a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-036.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break voilation precedence.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; columns: 2; column-fill: auto; gap: 0; width: 100px; height: 100px; background: red;"> + <div style="display:grid; orphans: 2; widows: 2; line-height: 0; grid-template-columns: 0% 100%;"> + <div style="background: green; height: 70px; grid-column: 1 / span 2;"></div> + <div style="break-before: avoid;"></div> <!-- Prefer avoiding the row break rather and violate orphans/widows constraint. --> + <div> + <span style="display: inline-block; height: 30px; width: 50px; background: green;"></span> + <span style="display: inline-block; height: 70px; width: 50px; background: green;"></span> + </div> + </div> + <div style="position: absolute; width: 50px; height: 30px; bottom: 0; right: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html new file mode 100644 index 0000000000..d5d97394c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-037.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-before:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 40px;"></div> + <div style="background: green; break-before: avoid; line-height: 0;"> + <span style="display: inline-block; width: 100%; height: 60px;"></span> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html new file mode 100644 index 0000000000..40008b5dcd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-038.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break-before:avoid on a grid-item is respected.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 150px;"></div> + <div style="background: green; height: 110px;"></div> + <div style="background: green; break-before: avoid; line-height: 0;"> + <span style="display: inline-block; width: 100%; height: 60px;"></span> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 40px; bottom: 0; right: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html new file mode 100644 index 0000000000..5201c49fa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-039.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="position: relative; width: 50px; columns: 1; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="background: green; height: 100px; break-after: column;"></div> + <div style="background: green; height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html new file mode 100644 index 0000000000..8733073741 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-040.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red; column-fill: auto;"> + <div style="display: grid; grid-template-areas: 'a b' 'c c'; grid-template-columns: 25px 25px;"> + <div style="background: green; grid-area: b; line-height: 0;"> + <div style="height: 30px;"></div> + <div style="height: 50px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green; grid-area: a;"></div> + <div style="background: green; grid-area: c; height: 20px;"></div> + </div> + <div style="position: absolute; background: green; width: 50px; height: 30px; bottom: 0; right: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html new file mode 100644 index 0000000000..f26c726553 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-041.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="margin-left:-100px; columns:2; height:200px; width:200px; column-gap:0; column-fill:auto;"> + <div style="height:199px;"></div> + <div style="display: grid;"> + <div style="columns:2; width:100%; column-gap:0; background:red; line-height: 0;"> + <div style="display: inline-block; width: 100%; height: 20px; background: green;"></div> + <div style="height:180px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html new file mode 100644 index 0000000000..67e2d40520 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-042.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; background: red; column-fill: auto;"> + <div style="display: grid; grid-template-columns: 25px;"> + <div style="background: green;"> + <div style="height: 30px;"></div> + <div style="height: 50px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green;"> + <div style="height: 30px;"></div> + <div style="height: 10px; break-before: column;"></div> <!-- The break-before forces the grid-item into the next column, and grows the row. --> + </div> + <div style="background: green; height: 190px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html new file mode 100644 index 0000000000..7a4ddc54e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-043.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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="position: relative; columns: 2; width: 100px; height: 100px; gap: 0; background: red;"> + <div style="display: grid;"> + <div style="height: 50px; background: green;"></div> + <div> + <div style="break-inside: avoid; height: 100px; background: green;"></div> <!-- A space shortage should be reported due to this. --> + </div> + <div style="break-inside: avoid; width: 0; height: 50px;"></div> + </div> + <div style="position: absolute; width: 50px; height: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html new file mode 100644 index 0000000000..8c028479bc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-044.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid;"> + <div style="break-before: column;"></div> <!-- This break-before should be propagated to the grid row. --> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html new file mode 100644 index 0000000000..e4010b421c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-045.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid;"> + <div> + <div style="break-after: column;"></div> <!-- This break-after should be propagated to the grid row. --> + </div> + </div> + <div style="background: green;"> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html new file mode 100644 index 0000000000..ffdc94efba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-046.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid; display: grid; grid-template-columns: auto auto;"> + <div></div> + <div style="break-before: column;"></div> <!-- This break-before should be propagated to the outermost grid row. --> + </div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html new file mode 100644 index 0000000000..ac6d137cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-047.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 100px;"> + <div style="background: green; break-after: avoid; display: grid; grid-template-columns: auto auto;"> + <div style="break-after: column;"></div> <!-- This break-after should be propagated to the outermost grid row. --> + <div></div> + </div> + <div style="background: green;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html new file mode 100644 index 0000000000..5eed6b9184 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-fragmentation-048.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that break precedence for a grid row is correctly calculated.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> + <div style="display: grid; grid-template-rows: 50px 50px 200px;"> + <div style="background: green;"></div> + <div style="background: green; break-before: avoid; break-after: avoid; display: grid; grid-template-columns: auto auto;"> + <div style="break-before: column; break-after: column;"></div> <!-- The break values should be propagated to the outermost rows. --> + <div></div> + </div> + <div style="background: green;"></div> + </div> + <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html b/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html new file mode 100644 index 0000000000..ec27d0cc3f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-infinite-expansion.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; width: 100px; gap: 0; background: red;"> + <div style="display: grid;"> + <!-- Don't try and expand this row - as we'll continually expand due to the %-based child. --> + <div style="min-height: 100px;"> + <div style="height: 200%; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html new file mode 100644 index 0000000000..e94889228a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative;"> + <div style="display: grid; height: 200px;"> + <div style="position: absolute; width: 50px; height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html new file mode 100644 index 0000000000..b1ced43ab8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;"> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: end;"></div> + <div style="grid-row-start: 1; position: absolute; width: 50px; height: 50px; background: green; align-self: start;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html new file mode 100644 index 0000000000..59235f9245 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;"> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: center;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: end;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: start;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html new file mode 100644 index 0000000000..f73d91a192 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 100px;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="grid-row-start: 2; break-before: column; height: 50px; background: green;"></div> <!-- break-before pushes this row into the 2nd column. --> + <div style="grid-row-start: 2; position: absolute; width: 50px; height: 50px; background: green; align-self: end;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html new file mode 100644 index 0000000000..3536b30a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px auto;"> + <div style="position: absolute; background: green; width: 50px; height: 100px;"></div> + <div style="grid-row-start: 2;"> <!-- Row expands from 80px to 90px --> + <div style="break-inside: avoid; height: 40px;"></div> + <div style="break-inside: avoid; height: 40px;"></div> + </div> + <div style="grid-row-start: 2; position: absolute; width: 50px; height: 40px; background: green; align-self: end;"></div> + <div style="position: absolute; background: green; width: 50px; height: 60px; bottom: -60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html new file mode 100644 index 0000000000..63a14e5cff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-006.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px 100px 50px;"> + <div style="background: green;"> + <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div> + <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html new file mode 100644 index 0000000000..6802973edb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;"> + <div style="position: relative; display: grid; grid-template-rows: 50px auto 50px;"> + <div style="background: green;"> + <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div> + <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div> + </div> + <div> <!-- Expands row from 70px to 100px --> + <div style="break-inside: avoid; height: 20px;"></div> + <div style="break-inside: avoid; height: 50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html new file mode 100644 index 0000000000..a8ef5622a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 200px;"> + <div style="position: absolute; width: 100px; height: 100px; background: green;"></div> + <div style="width: 50px; height: 200px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html new file mode 100644 index 0000000000..6b50367b16 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 400px; align-items: end;"> + <div style="position: absolute; width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html new file mode 100644 index 0000000000..9b12550e6b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 400px; align-items: center;"> + <div style="position: absolute; width: 25px; height: 100px; background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; background: white;"></div> + </div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"> + <div style="height: 50px; width: 25px;"></div> + <div style="height: 50px; width: 25px; background: red;"></div> + </div> + <div style="width: 25px; height: 100px; background: green;"></div> + <div style="width: 25px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html new file mode 100644 index 0000000000..81bf627587 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-011.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> +<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; height: 100px; width: 100px; column-gap: 0; column-fill: auto; position: relative;"> + <div style="display: grid; height: 200px; grid-template-rows: 100px 100px;"> + <div style="grid-row-start: 1; width: 50px; height: 100px; background: red;"></div> + <div style="grid-row-start: 2; width: 50px; height: 100px; background: green;"></div> + <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html new file mode 100644 index 0000000000..fae587dc8e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-oof-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318399"> +<div style="column-count: 1;"> + <div style="break-inside: avoid; display: grid; grid-template-rows: 10px; position: relative;"> + <div style="position: absolute; grid-row-start: 1; grid-row-end: 1; inset: 0;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html b/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html new file mode 100644 index 0000000000..30d6f3bb21 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-overflow-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1417976"> +<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;"> + <div style="display:grid;"> + <div style="width:100px; max-height:50px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px; background:red;"></div> + </div> + </div> + <div style="position:relative; width:100px; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html new file mode 100644 index 0000000000..6ce9d39ef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash-multiple.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399336"> +<body> + <div style="width: 6000px; height: 6000px;"> + <div style="columns: 4; border: 1px solid black;"> + <div style="height: 50px; width: 550px; float: right;">Text</div> + <div style="display: grid; grid-template-columns: repeat(auto-fill,250px);"> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html new file mode 100644 index 0000000000..e6cc6c8b51 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-item-placement-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399336"> +<body> + <div style="width: 2000px; height: 2000px;"> + <div style="columns: 2; border: 1px solid black;"> + <div style="height: 50px; width: 550px; float: right;">Text</div> + <div style="display: grid; grid-template-columns: repeat(auto-fill,250px);"> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + <div style="width: 250px;"> + <div style="height: 550px;"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html new file mode 100644 index 0000000000..d2705f04f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-large-end-border-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1319964"> +<div style="column-count:2; column-fill:auto; border-bottom: 4294967295px solid;"> + <div style="display:grid; padding-top:1px; border-bottom: 4294967295px solid;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html b/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html new file mode 100644 index 0000000000..8b636ae7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/grid-nested-columns-crash.html @@ -0,0 +1,11 @@ +<!-- quirks-mode --> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318608"> +<style> +html, div { + column-count: 2; +} +</style> +<body style="display: grid; align-items: end;"> + <div>a</div> + <div> + <span style="display: block; contain: size;">content</span> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html new file mode 100644 index 0000000000..95660ec106 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-001.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:grid; height:100px; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html new file mode 100644 index 0000000000..f487c3ded5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-002.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:grid; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html new file mode 100644 index 0000000000..c7a3903a09 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-003.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:grid; height:200px; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html new file mode 100644 index 0000000000..208100619c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-004.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:grid; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.html new file mode 100644 index 0000000000..069ffb5b21 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-005.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=1425077"> +<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> +<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. --> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:200px auto;"> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div> + <div style="contain:size; height:150px;"></div> + </div> + <div style="background:red;"> + <div style="height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html new file mode 100644 index 0000000000..af4cfb1216 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<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> +<!-- Check that monolithic overflow in one grid item doesn't mess up the other item. --> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="display:grid; grid-template-columns:auto auto;"> + <div> + <div style="contain:size; height:150px;"></div> + <div style="contain:size; height:150px;"></div> + <div style="contain:size; height:150px;"></div> + </div> + <div style="background:red;"> + <div style="height:400px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html new file mode 100644 index 0000000000..906ad29fc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-007.html @@ -0,0 +1,27 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="display:grid; background:red;"> + <div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html new file mode 100644 index 0000000000..6e2caf60ce --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-008.html @@ -0,0 +1,25 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="display:grid; background:red;"> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="height:50px; background:white;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html new file mode 100644 index 0000000000..e3416da195 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/monolithic-overflow-009.html @@ -0,0 +1,13 @@ +<!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=1430650"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:grid; grid-template-rows:20px 100px;"> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="break-before:column; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html new file mode 100644 index 0000000000..959ff4a905 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; height: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html new file mode 100644 index 0000000000..9b28b37b42 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html new file mode 100644 index 0000000000..3f1381a7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<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; columns: 2; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; height: 100px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html new file mode 100644 index 0000000000..67c291fbc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<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; columns: 4; column-gap: 0; background: red;"> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="display: grid; height: 300px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-before: column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html new file mode 100644 index 0000000000..37babe2991 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<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; columns: 2; column-gap: 0; background: red; position: relative;"> + <div style="display: grid; height: 50px;"> + <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-after: column;"></div> + </div> + <div style="height: 50px;"> + <div style="height: 100px; background: green;"></div> + </div> + <div style="width: 50px; height: 50px; background: green; position: absolute; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html new file mode 100644 index 0000000000..1a26d816d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests basic fragmentation of a grid-item.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="min-height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html new file mode 100644 index 0000000000..24f7d997a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that grid-item reordered with grid-row-start is fragmented correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid;"> + <div style="display: grid; grid-template: subgrid / subgrid; grid-row: span 2;"> + <div style="height: 50px; background: green;"></div> + <div style="height: 150px; background: green; grid-row-start: 1;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html new file mode 100644 index 0000000000..49f0b5fc76 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that parallel grid items fragment correctly.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-columns: auto auto;"> + <div style="display: grid; grid-template: subgrid / subgrid; grid-column: span 2;"> + <div style="background: green;"></div> + <div style="height: 200px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html new file mode 100644 index 0000000000..85ed105f96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="height: 100px; background: green; align-self: end;"></div> + </div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html new file mode 100644 index 0000000000..3832f0d16e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<title>Tests that an end aligned grid-item (with auto margins) is placed within the 2nd fragmentainer.</title> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;"> + <div style="display: grid; grid-template-rows: 200px;"> + <div style="display: grid; grid-template: subgrid / subgrid;"> + <div style="height: 100px; background: green; margin-top: auto;"></div> + </div> + </div> + <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/hit-test-hidden-overflow.html b/testing/web-platform/tests/css/css-break/hit-test-hidden-overflow.html new file mode 100644 index 0000000000..ec766e0948 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/hit-test-hidden-overflow.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=1330515"> +<style> + body { margin: 0; } +</style> +<div id="first" style="margin-top:20px; height:20px;"> + <div style="overflow:hidden; width:500px; margin-left:-100px; height:0;"> + <div style="columns:2; gap:0; width:200%;"> + <div style="position:relative; margin-left:-100%; height:800px;"></div> + </div> + </div> +</div> +<div id="second" style="height:20px;"></div> +<div id="log" style="margin-top:200px;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { assert_equals(document.elementFromPoint(50, 10), document.documentElement); }, "above first block"); + test(()=> { assert_equals(document.elementFromPoint(50, 30), first); }, "first block"); + test(()=> { assert_equals(document.elementFromPoint(50, 50), second); }, "second block"); + test(()=> { assert_equals(document.elementFromPoint(50, 70), document.documentElement); }, "below first block"); +</script> diff --git a/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html b/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html new file mode 100644 index 0000000000..4d0fc7eccc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/hit-test-inline-fragmentation-with-border-radius.html @@ -0,0 +1,268 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"/> +<style> +div { + margin: 20px; +} + +span.round { + padding: 20px; + line-height: 100px; + font-size: 40px; + border-radius: 40px; + background-color: yellow; +} +</style> + +<div> +<span id="horizontal" class="round">FOO<br>BAR</span> +</div> + +<div style="writing-mode:vertical-lr"> +<span id="vertical-lr" class="round">FOO<br>BAR</span> +</div> + +<div style="writing-mode:vertical-rl"> +<span id="vertical-rl" class="round">FOO<br>BAR</span> +</div> + +<script> +// Hit test horizontal span with border radius +const horizontalSpan = document.getElementById('horizontal'); +const horizontalDiv = horizontalSpan.parentNode; +const horizontalRects = horizontalSpan.getClientRects(); +const horizontalLine1 = horizontalRects[0]; +const horizontalLine2 = horizontalRects[1]; + +test(() => { + const x = horizontalLine1.left + 5; + const y = horizontalLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), horizontalDiv); +}, 'Horizontal line 1, hit test outside top-left rounded corner'); + +test(() => { + const x = horizontalLine1.left + 20; + const y = horizontalLine1.top + 20; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 1, hit test inside top-left rounded corner'); + +test(() => { + const x = horizontalLine1.left + 5; + const y = horizontalLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), horizontalDiv); +}, 'Horizontal line 1, hit test outside bottom-left rounded corner'); + +test(() => { + const x = horizontalLine1.left + 20; + const y = horizontalLine1.bottom - 20; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 1, hit test inside bottom-left rounded corner'); + +test(() => { + const x = horizontalLine1.right - 5; + const y = horizontalLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 1, hit test inside top-right right-angled corner') + +test(() => { + const x = horizontalLine1.right - 5; + const y = horizontalLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 1, hit test inside bottom-right right-angled corner') + +test(() => { + const x = horizontalLine2.right - 5; + const y = horizontalLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), horizontalDiv); +}, 'Horizontal line 2, hit test outside top-right rounded corner'); + +test(() => { + const x = horizontalLine2.right - 20; + const y = horizontalLine2.top + 20; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 2, hit test inside top-right rounded corner'); + +test(() => { + const x = horizontalLine2.right - 5; + const y = horizontalLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), horizontalDiv); +}, 'Horizontal line 2, hit test outside bottom-right rounded corner'); + +test(() => { + const x = horizontalLine2.right - 20; + const y = horizontalLine2.bottom - 20; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 2, hit test inside bottom-right rounded corner'); + +test(() => { + const x = horizontalLine2.left + 5; + const y = horizontalLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 2, hit test inside top-left right-angled corner') + +test(() => { + const x = horizontalLine2.left + 5; + const y = horizontalLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), horizontalSpan); +}, 'Horizontal line 2, hit test inside bottom-left right-angled corner') + +// Hit test vertical-lr span with border radius +const verticalLRSpan = document.getElementById('vertical-lr'); +const verticalLRDiv = verticalLRSpan.parentNode; +const verticalLRRects = verticalLRSpan.getClientRects(); +const verticalLRLine1 = verticalLRRects[0]; +const verticalLRLine2 = verticalLRRects[1]; + +test(() => { + const x = verticalLRLine1.left + 5; + const y = verticalLRLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalLRDiv); +}, 'Vertical LR line 1, hit test outside top-left rounded corner'); + +test(() => { + const x = verticalLRLine1.left + 20; + const y = verticalLRLine1.top + 20; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 1, hit test inside top-left rounded corner'); + +test(() => { + const x = verticalLRLine1.right - 5; + const y = verticalLRLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalLRDiv); +}, 'Vertical LR line 1, hit test outside top-right rounded corner'); + +test(() => { + const x = verticalLRLine1.right - 20; + const y = verticalLRLine1.top + 20; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 1, hit test inside top-right rounded corner'); + +test(() => { + const x = verticalLRLine1.left + 5; + const y = verticalLRLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 1, hit test inside bottom-left right-angled corner') + +test(() => { + const x = verticalLRLine1.right - 5; + const y = verticalLRLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 1, hit test inside bottom-right right-angled corner') + +test(() => { + const x = verticalLRLine2.left + 5; + const y = verticalLRLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalLRDiv); +}, 'Vertical LR line 2, hit test outside bottom-left rounded corner'); + +test(() => { + const x = verticalLRLine2.left + 20; + const y = verticalLRLine2.bottom - 20; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 2, hit test inside bottom-left rounded corner'); + +test(() => { + const x = verticalLRLine2.right - 5; + const y = verticalLRLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalLRDiv); +}, 'Vertical LR line 2, hit test outside bottom-right rounded corner'); + +test(() => { + const x = verticalLRLine2.right - 20; + const y = verticalLRLine2.bottom - 20; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 2, hit test inside bottom-right rounded corner'); + +test(() => { + const x = verticalLRLine2.left + 5; + const y = verticalLRLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 2, hit test inside top-left right-angled corner') + +test(() => { + const x = verticalLRLine2.right - 5; + const y = verticalLRLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalLRSpan); +}, 'Vertical LR line 2, hit test inside top-right right-angled corner') + +// Hit test vertical-rl span with border radius +const verticalRLSpan = document.getElementById('vertical-rl'); +const verticalRLDiv = verticalRLSpan.parentNode; +const verticalRLRects = verticalRLSpan.getClientRects(); +const verticalRLLine1 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[0] : verticalRLRects[1]; +const verticalRLLine2 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[1] : verticalRLRects[0]; + +test(() => { + const x = verticalRLLine1.left + 5; + const y = verticalRLLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalRLDiv); +}, 'Vertical RL line 1, hit test outside top-left rounded corner'); + +test(() => { + const x = verticalRLLine1.left + 20; + const y = verticalRLLine1.top + 20; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 1, hit test inside top-left rounded corner'); + +test(() => { + const x = verticalRLLine1.right - 5; + const y = verticalRLLine1.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalRLDiv); +}, 'Vertical RL line 1, hit test outside top-right rounded corner'); + +test(() => { + const x = verticalRLLine1.right - 20; + const y = verticalRLLine1.top + 20; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 1, hit test inside top-right rounded corner'); + +test(() => { + const x = verticalRLLine1.left + 5; + const y = verticalRLLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 1, hit test inside bottom-left right-angled corner') + +test(() => { + const x = verticalRLLine1.right - 5; + const y = verticalRLLine1.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 1, hit test inside bottom-right right-angled corner') + +test(() => { + const x = verticalRLLine2.left + 5; + const y = verticalRLLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalRLDiv); +}, 'Vertical RL line 2, hit test outside bottom-left rounded corner'); + +test(() => { + const x = verticalRLLine2.left + 20; + const y = verticalRLLine2.bottom - 20; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 2, hit test inside bottom-left rounded corner'); + +test(() => { + const x = verticalRLLine2.right - 5; + const y = verticalRLLine2.bottom - 5; + assert_equals(document.elementFromPoint(x, y), verticalRLDiv); +}, 'Vertical RL line 2, hit test outside bottom-right rounded corner'); + +test(() => { + const x = verticalRLLine2.right - 20; + const y = verticalRLLine2.bottom - 20; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 2, hit test inside bottom-right rounded corner'); + +test(() => { + const x = verticalRLLine2.left + 5; + const y = verticalRLLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 2, hit test inside top-left right-angled corner') + +test(() => { + const x = verticalRLLine2.right - 5; + const y = verticalRLLine2.top + 5; + assert_equals(document.elementFromPoint(x, y), verticalRLSpan); +}, 'Vertical RL line 2, hit test inside top-right right-angled corner') +</script> diff --git a/testing/web-platform/tests/css/css-break/hit-test-transformed-inline.html b/testing/web-platform/tests/css/css-break/hit-test-transformed-inline.html new file mode 100644 index 0000000000..239b2b2395 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/hit-test-transformed-inline.html @@ -0,0 +1,43 @@ +<!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=1308124"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + body { + margin: 0; + } + #mc { + columns: 2; + gap: 0; + column-fill: auto; + width: 600px; + height: 20px; + line-height: 20px; + font: 20px/1 ahem; + } +</style> +<div id="mc"> + <span id="span" style="backface-visibility:hidden; filter:blur(1px);"> + x<child id="firstchild">x</child><br> + <child id="secondchild">x</child>x + </span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(document.elementFromPoint(10, 10).id, "span"); + }, "First x"); + + test(()=> { + assert_equals(document.elementFromPoint(30, 10).id, "firstchild"); + }, "First child"); + + test(()=> { + assert_equals(document.elementFromPoint(310, 10).id, "secondchild"); + }, "Second child"); + + test(()=> { + assert_equals(document.elementFromPoint(330, 10).id, "span"); + }, "Last x"); +</script> diff --git a/testing/web-platform/tests/css/css-break/hit-test-transformed.html b/testing/web-platform/tests/css/css-break/hit-test-transformed.html new file mode 100644 index 0000000000..99365c908c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/hit-test-transformed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<style> + body { margin: 0; } + *:hover { background: lime !important; } +</style> +<div id="multicol" style="columns:4; column-gap:0; column-fill:auto; width:400px; height:100px; background: yellow"> + <div id="before" style="height: 50px; background: gray"></div> + <div id="transform" style="transform: translateY(20px)"> + <div id="target1" style="height: 100px; background: green"></div> + <div id="target2" style="height: 200px; background: blue"></div> + </div> + <div id="after" style="height: 50px; background: gray"></div> +</div> +<div id="log" style="margin-top:100px;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { assert_equals(document.elementFromPoint(50, 40), before); }, "before"); + test(()=> { assert_equals(document.elementFromPoint(50, 60), multicol); }, "between before and transform"); + test(()=> { assert_equals(document.elementFromPoint(50, 80), target1); }, "target1"); + test(()=> { assert_equals(document.elementFromPoint(50, 110), target1); }, "target1 overflow"); + test(()=> { assert_equals(document.elementFromPoint(150, 10), multicol); }, "top gap in column 2"); + test(()=> { assert_equals(document.elementFromPoint(150, 30), target1); }, "target1 in column 2 top"); + test(()=> { assert_equals(document.elementFromPoint(150, 60), target1); }, "target1 in column 2 bottom"); + test(()=> { assert_equals(document.elementFromPoint(150, 80), target2); }, "target2 in column 2"); + test(()=> { assert_equals(document.elementFromPoint(150, 110), target2); }, "target2 in column 2 overflow"); + test(()=> { assert_equals(document.elementFromPoint(250, 10), multicol); }, "top gap in column 3"); + test(()=> { assert_equals(document.elementFromPoint(250, 30), target2); }, "target2 in column 3 top"); + test(()=> { assert_equals(document.elementFromPoint(250, 110), target2); }, "target2 in column 3 bottom"); + test(()=> { assert_equals(document.elementFromPoint(350, 10), multicol); }, "top gap in column 4"); + test(()=> { assert_equals(document.elementFromPoint(350, 30), target2); }, "target2 in column 4 top"); + test(()=> { assert_equals(document.elementFromPoint(350, 60), target2); }, "target2 in column 4 bottom"); + test(()=> { assert_equals(document.elementFromPoint(350, 80), after); }, "after"); + test(()=> { assert_equals(document.elementFromPoint(350, 110), document.documentElement); }, "below"); +</script> diff --git a/testing/web-platform/tests/css/css-break/iframe-in-repeated-table-header-crash.html b/testing/web-platform/tests/css/css-break/iframe-in-repeated-table-header-crash.html new file mode 100644 index 0000000000..8956bc777a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/iframe-in-repeated-table-header-crash.html @@ -0,0 +1,26 @@ +<!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=1260855"> +<div style="columns:2; column-fill:auto; height:200px;"> + <table> + <thead style="break-inside:avoid;"> + <tr> + <td> + <iframe style="height:10px;"></iframe> + </td> + </tr> + </thead> + <tbody> + <tr> + <td> + <div style="height:100px;"></div> + </td> + </tr> + <tr> + <td> + <div style="height:100px;"></div> + </td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/increase-fragmentainer-size-tall-border.html b/testing/web-platform/tests/css/css-break/increase-fragmentainer-size-tall-border.html new file mode 100644 index 0000000000..b7e716b23c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/increase-fragmentainer-size-tall-border.html @@ -0,0 +1,13 @@ +<!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=1395408"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="columns:1; width:100px; column-fill:auto; height:60px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:flow-root; border-top:50px solid green;"></div> +</div> +<script> + document.body.offsetTop; + mc.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/inheritance.html b/testing/web-platform/tests/css/css-break/inheritance.html new file mode 100644 index 0000000000..e0be119e40 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/inheritance.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Fragmentation properties</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('box-decoration-break', 'slice', 'clone'); +assert_not_inherited('break-after', 'auto', 'column'); +assert_not_inherited('break-before', 'auto', 'page'); +assert_not_inherited('break-inside', 'auto', 'avoid'); +assert_inherited('orphans', '2', '3'); +assert_inherited('widows', '2', '3'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/ink-overflow-001-print.html b/testing/web-platform/tests/css/css-break/ink-overflow-001-print.html new file mode 100644 index 0000000000..495153d3d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ink-overflow-001-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="about:blank"> +<meta name="flags" content="paged"> +<style> +@page { + size: 5in 3in; + margin: 0.5in; +} + +html,body { + color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; +} + +body { + width: 100vw; + height: 100vh; + outline: 100px solid red; + box-shadow: 100px 100px 0 #F00; +} +</style> +<body></body> diff --git a/testing/web-platform/tests/css/css-break/ink-overflow-002.html b/testing/web-platform/tests/css/css-break/ink-overflow-002.html new file mode 100644 index 0000000000..8af605efea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ink-overflow-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +.col { + column-width: 100px; + column-rule: 100px solid red; + height: 100px; + column-fill: auto; + gap: 0; + overflow: hidden; +} + +.col > div { + display: flow-root; + width: 100px; + height: 100px; + background: green; +} + +.col > div > div { + width: 10px; + height: 10px; + margin-top: 80px; + margin-left: 50px; + outline: 30px solid green; + box-shadow: 0 30px 0 30px green; +} +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="col"><div><div></div></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-break/inline-with-float-001.html b/testing/web-platform/tests/css/css-break/inline-with-float-001.html new file mode 100644 index 0000000000..b6a6e1958f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/inline-with-float-001.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=1113185"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + .ib { + display: inline-block; + width: 100%; + vertical-align: top; + background: green; + } +</style> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="height:70px; background:green;"></div> + <span style="position:relative;"> + <div class="ib" style="height:30px;"></div> + <div class="ib" style="height:20px;"></div> + <div style="position:relative; float:left; width:100%; height:200px; background:green;"></div> + <div class="ib" style="height:80px;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/inline-with-float-002.html b/testing/web-platform/tests/css/css-break/inline-with-float-002.html new file mode 100644 index 0000000000..d9235b421a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/inline-with-float-002.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=1113185"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + .ib { + display: inline-block; + width: 100%; + vertical-align: top; + background: green; + } +</style> +<div style="columns:5; gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; background:red;"> + <div style="height:170px; background:green;"></div> + <span style="position:relative;"> + <div class="ib" style="height:30px;"></div> + <div class="ib" style="height:20px;"></div> + <div style="position:relative; float:left; width:100%; height:200px; background:green;"></div> + <div class="ib" style="height:80px;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/inline-with-float-003.html b/testing/web-platform/tests/css/css-break/inline-with-float-003.html new file mode 100644 index 0000000000..377548768a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/inline-with-float-003.html @@ -0,0 +1,42 @@ +<!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=1113185"> +<style> + .ib { + display: inline-block; + width: 100%; + vertical-align: top; + } + body { margin: 0; } +</style> +<div style="columns:5; gap:0; column-fill:auto; width:100px; height:100px; orphans:1; widows:1;"> + <div style="height:170px;"></div> + <span style="position:relative;"> + <div id="ib1" class="ib" style="height:30px;"></div> + <div id="ib2" class="ib" style="height:20px;"></div> + <div id="floater" style="position:relative; float:left; width:100%; height:200px;"></div> + <div id="ib3" class="ib" style="height:80px;"></div> + </span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(document.elementFromPoint(20, 70), ib1); + }, "Hit first inline-block"); + test(()=> { + assert_equals(document.elementFromPoint(40, 0), ib2); + }, "Hit second inline-block"); + test(()=> { + assert_equals(document.elementFromPoint(40, 20), floater); + }, "Hit first float fragment"); + test(()=> { + assert_equals(document.elementFromPoint(60, 0), floater); + }, "Hit second float fragment"); + test(()=> { + assert_equals(document.elementFromPoint(80, 0), floater); + }, "Hit third float fragment"); + test(()=> { + assert_equals(document.elementFromPoint(80, 20), ib3); + }, "Hit third inline-block"); +</script> diff --git a/testing/web-platform/tests/css/css-break/inline-with-float-004.html b/testing/web-platform/tests/css/css-break/inline-with-float-004.html new file mode 100644 index 0000000000..6b404d9570 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/inline-with-float-004.html @@ -0,0 +1,31 @@ +<!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=1113185"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + .ib { + display: inline-block; + vertical-align: top; + width: 100%; + height: 25px; + background: green; + } +</style> +<div style="display:flow-root; width:100px; height:100px; background:red;"> + <div style="columns:5; column-fill:auto; gap:0; margin-top:100px; height:100px; orphans:1; widows:1;"> + <div style="position:relative; top:-100px; height:150px; background:green;"></div> + <span style="position:relative; top:-100px; "> + <div style="float:left; break-inside:avoid; width:100%; height:125px; background:green;"></div> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/large-text-node-oof-crash.html b/testing/web-platform/tests/css/css-break/large-text-node-oof-crash.html new file mode 100644 index 0000000000..424d663b61 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/large-text-node-oof-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278350"> +<div style="column-width: 0px;"> + <div style="position: relative;"> + <div></div> + <h1 style="column-width: 10px; position: absolute;"> + uklgvffmyjpekennfouiqjxyxugvhqhrqpovcphzxfb + </h1> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding-ref.html b/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding-ref.html new file mode 100644 index 0000000000..9a329b2446 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<p>The word "PASS" should be seen below.</p> +<div style="margin-left:2ch; font-family:monospace; line-height:50px;"> + <div style="float:left;">PA</div> + <div style="float:left;">SS</div> +</div> diff --git a/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding.html b/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding.html new file mode 100644 index 0000000000..d3a4018cd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/line-after-unbreakable-float-after-padding.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="line-after-unbreakable-float-after-padding-ref.html"> +<p>The word "PASS" should be seen below.</p> +<div style="columns:3; column-gap:0; column-fill:auto; font-family:monospace; line-height:50px; width:6ch; height:101px; orphans:1; widows:1;"> + <div style="padding-top:100px;"> + <div style="float:left; break-inside:avoid; width:100%; height:75px;">PA</div> + SS + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/line-and-fragmentainer-break-before-float-crash.html b/testing/web-platform/tests/css/css-break/line-and-fragmentainer-break-before-float-crash.html new file mode 100644 index 0000000000..14bce6b80c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/line-and-fragmentainer-break-before-float-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=1305497"> +<div style="columns:3; column-fill:auto; height:100px; orphans:1; widows:1;"> + <div style="width:20px;"> + <div style="display:inline-block; width:20px; height:5px;"></div> + <div style="display:inline-block; width:10px; height:5px;"></div> + <div style="float:left; width:10px; height:200px; contain:size;"></div> + <div style="display:inline-block; width:21px; height:5px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/line-pushed-by-float-000.html b/testing/web-platform/tests/css/css-break/line-pushed-by-float-000.html new file mode 100644 index 0000000000..1df1c06cc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/line-pushed-by-float-000.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="float:left; width:100%; height:150px; background:green;"></div> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/line-pushed-by-float-001.html b/testing/web-platform/tests/css/css-break/line-pushed-by-float-001.html new file mode 100644 index 0000000000..49b185349e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/line-pushed-by-float-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1122901"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="float:left; width:100%; height:350px; background:green;"></div> + <div style="display:inline-block; vertical-align:top; width:100%; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-after-overflowed-block.html b/testing/web-platform/tests/css/css-break/margin-after-overflowed-block.html new file mode 100644 index 0000000000..26a2eb22aa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-after-overflowed-block.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="margin-bottom:20px; height:50px;"> + <div style="height:70px; background:green;"></div> + <div style="height:90px;"></div> + <div style="height:40px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> + <div style="height:40px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-at-break-001.html b/testing/web-platform/tests/css/css-break/margin-at-break-001.html new file mode 100644 index 0000000000..79edf59696 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-at-break-001.html @@ -0,0 +1,16 @@ +<!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=1497404"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:150px; background:green;"></div> + </div> + <div> + <div style="margin-top:60px;"> + <div style="height:50px;"></div> + <div style="height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-at-break-002.html b/testing/web-platform/tests/css/css-break/margin-at-break-002.html new file mode 100644 index 0000000000..add4d831d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-at-break-002.html @@ -0,0 +1,16 @@ +<!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=1497404"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:flow-root; height:70px;"> + <div style="height:150px; background:green;"></div> + </div> + <div> + <div style="margin-top:60px;"> + <div style="height:50px;"></div> + <div style="height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-at-break-003.html b/testing/web-platform/tests/css/css-break/margin-at-break-003.html new file mode 100644 index 0000000000..18bc4dbd24 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-at-break-003.html @@ -0,0 +1,16 @@ +<!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=1497404"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:150px; background:green;"></div> + </div> + <span> + <div style="margin-top:60px;"> + <div style="height:50px;"></div> + <div style="height:50px; background:green;"></div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-at-break-004.html b/testing/web-platform/tests/css/css-break/margin-at-break-004.html new file mode 100644 index 0000000000..59e650e5d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-at-break-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1497404"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <span> + <div style="height:70px;"> + <div style="height:150px; background:green;"></div> + </div> + <span> + <div style="margin-top:60px;"> + <div style="height:50px;"></div> + <div style="height:50px; background:green;"></div> + </div> + </span> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/margin-at-break-005.html b/testing/web-platform/tests/css/css-break/margin-at-break-005.html new file mode 100644 index 0000000000..9f47728c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/margin-at-break-005.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=1494668"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1497404"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <span> + <div style="height:70px;"> + <div style="height:150px; background:green;"></div> + </div> + <span> + <div style="margin-top:160px;"> + <div style="float:left; width:100%;"> + <div style="height:50px;"></div> + <div style="height:50px; background:green;"></div> + </div> + </div> + </span> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/max-height-with-margin-pushed-below-fragmentation-line-crash.html b/testing/web-platform/tests/css/css-break/max-height-with-margin-pushed-below-fragmentation-line-crash.html new file mode 100644 index 0000000000..a1b3139bd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/max-height-with-margin-pushed-below-fragmentation-line-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1310503"> +<div style="columns:3; column-fill:auto; line-height:20px; height:25px;"> + <div style="max-height:20px; margin-top:10px;"> + <br><br><br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-001.html b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-001.html new file mode 100644 index 0000000000..75b676d0ba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<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:balance; gap:0; width:100px; background:red;"> + <div style="contain:size; height:50px; width:50px;"> + <div style="height:50px; background:green; break-after:column;"></div> + </div> + <div style="width:50px; height:150px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-002.html b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-002.html new file mode 100644 index 0000000000..1df3078aa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:200px;"> + <div style="contain:size; height:100px; width:50px; break-after:column;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="width:50px; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-003.html b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-003.html new file mode 100644 index 0000000000..deabd8fde2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-content-with-forced-break-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:200px;"> + <div style="width:50px; height:100px; background:green;"></div> + <div> + <div style="contain:size; break-before:column; height:100px; width:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-001.tentative.html new file mode 100644 index 0000000000..db285a929c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-001.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="height:100px; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-002.tentative.html new file mode 100644 index 0000000000..387af9c501 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-002.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-003.tentative.html new file mode 100644 index 0000000000..02210aee3d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-003.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="height:200px; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-004.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-004.tentative.html new file mode 100644 index 0000000000..9a190810af --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-004.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-005.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-005.tentative.html new file mode 100644 index 0000000000..f1667a15fd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-005.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="height:100px; background:green;"> + <div style="contain:size; height:300px;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-overflow-006.tentative.html b/testing/web-platform/tests/css/css-break/monolithic-overflow-006.tentative.html new file mode 100644 index 0000000000..200f271dc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-overflow-006.tentative.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="height:150px; background:green;"> + <div style="contain:size; height:100px;"> + <div style="height:60px;"></div> + <div style="height:40px; margin-left:100%; width:100%; background:green;"></div> + </div> + <div style="height:60px;"> + <div style="height:50px;"></div> + <div style="height:10px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-with-overflow-lr.html b/testing/web-platform/tests/css/css-break/monolithic-with-overflow-lr.html new file mode 100644 index 0000000000..cb9d0fbcfe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-with-overflow-lr.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<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="writing-mode:vertical-lr; inline-size:100px; block-size:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; block-size:50px;"> + <div style="block-size:50px; background:green;"></div> + <div style="contain:size; block-size:0;"> + <div style="block-size:25px; background:green;"></div> + <div style="block-size:25px; background:green;"></div> + </div> + <div style="contain:size; block-size:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-with-overflow-rl.html b/testing/web-platform/tests/css/css-break/monolithic-with-overflow-rl.html new file mode 100644 index 0000000000..47720ff5c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-with-overflow-rl.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<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="writing-mode:vertical-rl; inline-size:100px; block-size:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; block-size:50px;"> + <div style="block-size:50px; background:green;"></div> + <div style="contain:size; block-size:0;"> + <div style="block-size:25px; background:green;"></div> + <div style="block-size:25px; background:green;"></div> + </div> + <div style="contain:size; block-size:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/monolithic-with-overflow.html b/testing/web-platform/tests/css/css-break/monolithic-with-overflow.html new file mode 100644 index 0000000000..e803ad62cc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/monolithic-with-overflow.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<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="inline-size:100px; block-size:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; block-size:50px;"> + <div style="block-size:50px; background:green;"></div> + <div style="contain:size; block-size:0;"> + <div style="block-size:25px; background:green;"></div> + <div style="block-size:25px; background:green;"></div> + </div> + <div style="contain:size; block-size:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-000.html b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-000.html new file mode 100644 index 0000000000..8d1d395e35 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-000.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1312790"> +<div style="columns:2;"> + <span style="filter:blur(1px);"> + <div style="position:relative;"> + <div style="position:absolute;"> + <div style="position:fixed;"> + <div style="position:fixed;"></div> + </div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-001.html b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-001.html new file mode 100644 index 0000000000..dc4e8fba67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1312790"> +<div style="columns:2;"> + <div style="columns:2;"> + <span style="filter:blur(1px);"> + <div style="position:relative;"> + <div style="position:absolute;"> + <div style="position:fixed;"></div> + </div> + </div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-002.html b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-002.html new file mode 100644 index 0000000000..15a5a96332 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-fixedpos-in-inline-crash-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1312790"> +<div style="columns:2;"> + <span style="filter:blur(1px);"> + <div style="columns:2;"> + <div style="position:relative;"> + <div style="position:absolute;"> + <div style="position:fixed;"> + <div style="position:fixed;"></div> + </div> + </div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-float-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/nested-float-in-multicol-crash.html new file mode 100644 index 0000000000..6878d384e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-float-in-multicol-crash.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336847"> +<style> + .float { + float: left; + clear: both; + } + div { + padding-bottom: 10px; + padding-top: 10000000000px; + } +</style> +<div style="column-count:15;"> + <div> + text + <div></div> + <div class="float"></div> + </div> + <div class="float"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-001.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-001.html new file mode 100644 index 0000000000..88b902af50 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278277"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:2;"> + <div style="columns:2;"> + <div style="column-span:all; position:relative;"> + <div style="position:absolute; height:10px;"></div> + <div style="position:absolute; height:20px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-002.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-002.html new file mode 100644 index 0000000000..3a5b1da331 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278277"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:2;"> + <div style="columns:2;"> + <div style="column-span:all;"> + <div style="position:relative;"> + <div style="position:absolute; height:10px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-003.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-003.html new file mode 100644 index 0000000000..e6c1293e3b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278277"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:2;"> + <div style="columns:2;"> + <div style="column-span:all; position:relative;"> + <div style="transform: translateX(0);"> + <div style="position:absolute; height:10px;"> + <div style="position:fixed; height:20px;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-004.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-004.html new file mode 100644 index 0000000000..5db9163398 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1348128"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="column-count:2;"> + <div style="column-count:1;"> + <div style="position:relative; column-span:all;"> + <div style="column-count:1; position:absolute; height:10px; width:10px;"> + <div style="position:relative;"> + <div style="position:absolute; height:10px; width:5px;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-005.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-005.html new file mode 100644 index 0000000000..f7b56c1c98 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-005.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1348128"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="column-count:2;"> + <div style="column-count:1;"> + <div style="column-span:all;"> + <div style="position:relative;"> + <div style="column-count:1; position:absolute; height:10px; width:10px;"> + <div style="position:relative;"> + <div style="position:absolute; height:10px; width:5px;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-006.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-006.html new file mode 100644 index 0000000000..b969f925d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-006.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1349763"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="columns:1;"> + <div style="columns:1; column-span:all;"> + <div style="position:relative;"> + <div style="columns:2; position:absolute;"> + <div style="position:relative;"> + <div style="position:absolute; height:10px;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-007.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-007.html new file mode 100644 index 0000000000..861aac2bc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-007.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1358030"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="column-count:1;"> + <div style="column-count:1;"> + <div style="column-span:all; position:relative;"> + <div style="position:absolute;"></div> + </div> + <div style="position:relative;"> + <div style="position:absolute;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-008.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-008.html new file mode 100644 index 0000000000..a8d0f3e77e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanner-and-oof-crash-008.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1358030"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="column-count:1;"> + <div style="column-count:1;"> + <div style="column-span:all; position:relative;"> + <div style="position:absolute;"> + <div style="position:fixed;"></div> + </div> + </div> + <div style="position:relative;"> + <div style="position:absolute;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/nested-multicol-with-spanners-and-oofs-crash.html b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanners-and-oofs-crash.html new file mode 100644 index 0000000000..d2e8ebb621 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-multicol-with-spanners-and-oofs-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1311577"> +<div id="container" style="columns:2; height:50px; column-fill:auto;"> + <div style="columns:2; height:100px; column-fill:auto;"> + <div style="height:20px;"></div> + <div id="removeme" style="column-span:all; height:91px;"></div> + <div style="position:relative;"> + <div style="position:absolute;"></div> + </div> + <div style="column-span:all; height:100px;"></div> + <div style="column-span:all; break-before:column;"></div> + </div> + <div id="showme" style="display:none; column-span:all;"></div> +</div> +<script> + document.body.offsetTop; + removeme.style.display = "none"; + showme.style.display = "block"; +</script> diff --git a/testing/web-platform/tests/css/css-break/nested-oof-in-multicol-crash.html b/testing/web-platform/tests/css/css-break/nested-oof-in-multicol-crash.html new file mode 100644 index 0000000000..6b2f81005d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/nested-oof-in-multicol-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280620"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="column-count:2;"> + <div style="position:fixed;"></div> + <div style="position:relative;"> + <div style="position:absolute;"> + <div style="position:absolute; top:0px; left:23px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/no-room-for-line-in-first-fragmentainer-crash.html b/testing/web-platform/tests/css/css-break/no-room-for-line-in-first-fragmentainer-crash.html new file mode 100644 index 0000000000..bc7b9aaa5e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/no-room-for-line-in-first-fragmentainer-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=1175666"> +<div style="width:500px; columns:3; column-fill:auto; height:100px; line-height:100px;"> + <div style="padding-top:50px;"> + <canvas style="float:left; width:200px; height:100px;"></canvas> + <span style="display:inline-block; width:100px; height:10px;"></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/offset-top-block-in-inline.html b/testing/web-platform/tests/css/css-break/offset-top-block-in-inline.html new file mode 100644 index 0000000000..72b35087e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/offset-top-block-in-inline.html @@ -0,0 +1,16 @@ +<!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=1332572"> +<div style="columns:2; column-fill:auto; height:100px;"> + <span> + <div id="first" style="height:100px; background:cyan;"></div> + <div id="second" style="height:100px; background:hotpink;"></div> + </span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(first.offsetTop, second.offsetTop); + }, "offsetTop"); +</script> diff --git a/testing/web-platform/tests/css/css-break/orphans-in-parallel-flow.html b/testing/web-platform/tests/css/css-break/orphans-in-parallel-flow.html new file mode 100644 index 0000000000..0cc084acf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/orphans-in-parallel-flow.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; orphans:2; widows:2; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:130px;"> + <div style="height:100px; background:green;"></div> + <div style="height:100px; background:green;"> + <div style="line-height:20px; height:10px;"> + <br> + <br> + </div> + <div style="height:10px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-inline-with-negative-offset-crash.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-inline-with-negative-offset-crash.html new file mode 100644 index 0000000000..1b58909292 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-inline-with-negative-offset-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314916"> +<div style="columns:2; column-fill:auto; height:15px; line-height:20px;"> + <div style="columns:2; column-fill:auto;"> + <div style="height:20px;"></div> + <span style="position:relative;"> + <div style="column-span:all; columns:1; padding-top:30px;"></div> + <div style="position:absolute; top:-50px; height:100px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001-ref.html new file mode 100644 index 0000000000..7b6a3c50ca --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Benjamin Beaudry" href="mailto:bebeaudr@microsoft.com"> +<p>The abs element should be split equally into the two columns - no red!</p> +<div style="float:left; border-bottom:10px solid green; width:42px; height: 30px; background:gray;"></div> +<div style="float:left; margin-left: 16px; border-top:10px solid green; width:42px; height: 30px; background:gray;"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001.html new file mode 100644 index 0000000000..0322f51710 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="out-of-flow-in-multicolumn-001-ref.html"> + +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 16px; + column-rule:16px white solid; + width: 100px; + height: 40px; + background: gray; + } + + .abs { + position: absolute; + top: 0px; + width: 100%; + height: 20px; + background: green; + } + + .below-abs { + height: 20px; + background: red; + } +</style> +<p>The abs element should be split equally into the two columns - no red!</p> +<div id="container"> + <div id="multicol"> + <div style="width:100px; height:30px;"></div> + <div style="position: relative;"> + <div class="below-abs"></div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-002.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-002.html new file mode 100644 index 0000000000..0138a3a41d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests fragmentation when a positioned node's child overflows. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 50px; + } + .rel { + position: relative; + width: 30px; + } + .abs { + position: absolute; + top: 0px; + width: 5px; + height: 10px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs"> + <div style="background: green; width: 25px; height: 400px;"></div> + </div> + </div> + <div style="background-color: red; width: 20px; height: 140px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-003.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-003.html new file mode 100644 index 0000000000..b37bfad7b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests that empty column fragments are added if an OOF element begins layout + in a fragmentainer that is more than one index beyond the last existing + column fragmentainer. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + /* Move the multicolumn left to account for the first three empty columns */ + position: relative; + left: -150px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + top: 300px; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004-ref.html new file mode 100644 index 0000000000..bc6669e466 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Simulate two multi-column containers with an out-of-flow positioned child that + fragments, even in the presence of break-inside: avoid and break-before: column. --> +<style> +.initial { + float: left; + height: 20px; + width: 20px; + background: blue; +} +.first-fragment { + width: 40px; + height: 20px; + background: green; + margin-top: 10px; +} +.second-fragment { + width: 40px; + height: 10px; + background: green; + margin-left: 50px; +} +</style> +<div class="initial"></div> +<div class="second-fragment"></div> +<div class="first-fragment"></div> +<div class="initial"></div> +<div class="second-fragment"></div> +<div class="first-fragment"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004.html new file mode 100644 index 0000000000..f2e4aa9730 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-controls"> +<link rel="match" href="out-of-flow-in-multicolumn-004-ref.html"> +<!-- break-inside: avoid and break-before: column do not apply to absolute positioned elements. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 40px; + width: 100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 40px; + height: 30px; + background: green; + } + .content { + width: 20px; + height: 20px; + background: blue; + } + .inside { + break-inside: avoid; + } + .before { + break-before: column; + } +</style> +<div id="multicol"> + <div class="content"></div> + <div class="rel"> + <div class="abs inside"></div> + </div> +</div> +<div id="multicol"> + <div class="content"></div> + <div class="rel"> + <div class="abs before"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-005.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-005.html new file mode 100644 index 0000000000..a87a074d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-005.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-controls"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- break-after: column does not apply to absolute positioned elements. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 10px; + height: 100px; + width: 200px; + } + .rel { + position: relative; + height: 10px; + width: 100px; + background: green; + } + .abs { + position: absolute; + width: 40px; + height: 30px; + break-after: column; + } + .content { + width: 100px; + height: 45px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="content"></div> + <div class="rel"> + <div class="abs"></div> + </div> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-006.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-006.html new file mode 100644 index 0000000000..d724ad0137 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests that the fragments of a positioned element are added to the right fragmentainer despite the presence of column spanners. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 140px; + width: 100px; + margin-top: -40px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: green; + } + .spanner { + column-span: all; + height: 5px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="spanner"></div> + <div style="height: 60px; "></div> + <div class="spanner"></div> + <div class="abs"></div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-007.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-007.html new file mode 100644 index 0000000000..0e6988c3ff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-007.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests that a positioned element without a top or bottom property uses the static position - + even though it's treated as an OOF element. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + /* Move the multicolumn left to account for the first empty column */ + position: relative; + left: -50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div style="height: 100px; width: 50px;"></div> + <div class="abs"></div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-008.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-008.html new file mode 100644 index 0000000000..98c7764569 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-008.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests fragmented abspos elements with a spanner nested inside. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: green; + } + .spanner { + column-span: all; + height: 10px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs"> + <div class="spanner"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-009.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-009.html new file mode 100644 index 0000000000..4db33effbf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-009.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Tests that empty column fragments are added if an OOF element begins layout in a fragmentainer that is more than one index beyond the last existing column fragmentainer in the presence of a spanner. --> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + top: 200px; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs"></div> + </div> + <div style="column-span: all;"></div> + <div style="column-span: all;"></div> + <div style="column-span: all;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-010.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-010.html new file mode 100644 index 0000000000..5ae87e703d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-010.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Fragmented OOF element with block-size percentage resolution. --> +<style> + #multicol { + column-count: 3; + column-fill: auto; + column-gap: 0px; + /* last child is a spanner that takes up 33.33% so available height for + .rel and .abs is 100px */ + height: 150px; + width: 150px; + margin-left: -50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + /* offset one full 100px column (accounted for by negative margin on #multicol */ + top: 100px; + width: 50px; + height: 66.667%; + background: green; + } + .spanner { + column-span: all; + height: 33.33%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs"></div> + <div style="width: 10px; height: 300px;"></div> + </div> + <div class="spanner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-011.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-011.html new file mode 100644 index 0000000000..17e8908e37 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-011.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Fragmented OOF element with block-size percentage resolution and overflow. --> +<style> + #multicol { + /* Set things up so that the absolutely positioned element takes up two + columns of 50px each. Start in the second column so offset by negative + 50px margin. */ + columns: 5; + width: 250px; + height: 100px; + margin-left: -50px; + column-fill: auto; + column-gap: 0px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + top: 0px; + width: 50px; + height: 100%; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div style="height: 100px;"></div> + <div class="rel"> + <div class="abs"></div> + <div style="width: 44px; height: 200px;"> + <div style="width: 33px; height: 400px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-012.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-012.html new file mode 100644 index 0000000000..4e59979db2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-012.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Fragmented OOF with `height: auto`, positioned with the bottom property and + the second child fragment has a 'break-inside: avoid'. The abspos fragment + should still encompass its children completely despite the break. --> +<style> + #multicol { + column-count: 2; + width: 100px; + height: 100px; + column-fill: auto; + column-gap: 0px; + background-color: red; + } + .rel { + position: relative; + height: 190px; + width: 50px; + } + .abs { + position: absolute; + bottom: 0; + width: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <!-- The abspos computed height is 190px, but because it has to encompass + all its children, it will be 200px. --> + <div class="abs"> + <div style="height: 90px;"></div> + <div style="height: 50px; break-inside: avoid;"></div> + <div style="height: 50px;"></div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-013.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-013.html new file mode 100644 index 0000000000..6580a65b50 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-013.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<!-- Nested abspos with `height: auto` and positioned with the bottom property. + The innermost abspos only is fragmented. --> +<style> + #multicol { + column-count: 2; + width: 100px; + height: 100px; + column-fill: auto; + column-gap: 0px; + background-color: red; + } + .rel { + position: relative; + height: 100px; + width: 50px; + } + .abs { + position: absolute; + width: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs" style="bottom: 0;"> + <div class="abs" style="bottom: -100px;"> + <div style="height: 200px;"></div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014-ref.html new file mode 100644 index 0000000000..6388a18644 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + height: 300px; + width: 300px; + background-color: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014.html new file mode 100644 index 0000000000..b6cede0400 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-014.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<!-- This test requires a 300px tall multicolumn to reproduce the issue. --> +<link rel="match" href="out-of-flow-in-multicolumn-014-ref.html"> +<!-- Fragmented OOF element with block-size percentage resolution and overflow. --> +<style> + #multicol { + columns: 2; + width: 300px; + height: 300px; + column-fill: auto; + column-gap: 0px; + background-color: red; + } + .rel { + position: relative; + } + .abs { + position: absolute; + top: 0px; + width: 150px; + height: 150px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div style="width: 150px; height: 450px; background-color: green;"></div> + <div class="rel"> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-015.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-015.html new file mode 100644 index 0000000000..e2dec2241f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-015.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + columns: 2; + width: 100px; + height: 100px; + column-fill: auto; + column-gap: 0px; + background-color: red; + } + .rel { + height: 100px; + position: relative; + } + .abs { + position: absolute; + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div class="rel"> + <div class="abs" style="top: 0px; height: 160px;"></div> + </div> + <div style="column-span:all; height: 20px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-016.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-016.html new file mode 100644 index 0000000000..26590bc906 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-016.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Nested fragmentation for out-of-flow positioned elements. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 300px; + } + #inner { + width: 100px; + background-color: red; + position: relative; + left: -150px; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + height: 200px; + width: 50px; + top: 0px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="height: 200px;"></div> + <div class="rel"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-017.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-017.html new file mode 100644 index 0000000000..aa56a7cddf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-017.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Out-of-flow static position in nested context. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 300px; + } + #inner { + width: 100px; + background-color: red; + position: relative; + left: -150px; + } + .rel { + position: relative; + height: 360px; + } + .abs { + position: absolute; + height: 180px; + width: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 180px;"></div> + <div style="column-span: all; height: 20px; background-color: green;"></div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-018.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-018.html new file mode 100644 index 0000000000..8c42d66a05 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-018.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title> + Nested fragmentation for out-of-flow positioned elements. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + background-color: red; + } + .rel { + position: relative; + height: 360px; + } + .abs { + position: absolute; + bottom: 0px; + top: 0px; + width: 25px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 180px;"></div> + <div style="column-span: all; height: 20px; background-color: green;"></div> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019-ref.html new file mode 100644 index 0000000000..8321333458 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 120px; + width: 100px; + } + #inner { + width: 50px; + column-gap: 16px; + height: 100px; + padding: 10px; + } + #ref { + height: 400px; + width: 25px; + background-color: green; + } +</style> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div id="ref"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019.html new file mode 100644 index 0000000000..6506236ebe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-019.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + Nested fragmentation for out-of-flow positioned elements create new columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="out-of-flow-in-multicolumn-019-ref.html"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 120px; + width: 100px; + } + #inner { + width: 50px; + column-gap: 16px; + height: 100px; + padding: 10px; + } + .rel { + position: relative; + height: 160px; + } + .abs { + position: absolute; + top: 0px; + height: 400px; + width: 25px; + background-color: green; + } +</style> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-020.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-020.html new file mode 100644 index 0000000000..23b5019bb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-020.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Nested fragmentation for out-of-flow positioned elements create new columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + background: red; + width: 50px; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + width: 25px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs" style="top: 50px; height: 350px;"></div> + <div class="abs" style="top: 0x; height: 350px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-021.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-021.html new file mode 100644 index 0000000000..05ce3d9833 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-021.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Nested fragmentation for out-of-flow positioned elements create new columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + background-color: red; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + height: 400px; + width: 25px; + top: 800px; + left: -200px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-022.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-022.html new file mode 100644 index 0000000000..71a0abb77c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-022.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Nested abpos fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + background: red; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel"> + <div class="abs"> + <div class="abs" style="height: 200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-023.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-023.html new file mode 100644 index 0000000000..3499a67f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-023.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Nested abpos in a nested fragmentation context. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + background: red; + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 25px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs"> + <div class="abs" style="height: 400px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-024.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-024.html new file mode 100644 index 0000000000..830c599677 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-024.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Nested abpos in a nested fragmentation context. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + background: red; + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 25px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs" style="top: 400px;"> + <div class="abs" style="top: -400px; height: 400px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-025.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-025.html new file mode 100644 index 0000000000..c7369e2a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-025.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title> + Nested abpos fragmentation in a new column. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + background: red; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel"> + <div class="abs" style="top: 200px;"> + <div class="abs" style="top: -200px; height: 200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-026.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-026.html new file mode 100644 index 0000000000..e852c095d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-026.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + background: red; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + height: 100px; + width: 100px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel"> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-027.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-027.html new file mode 100644 index 0000000000..ffac90b2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-027.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Nested abpos in a nested fragmentation context. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + background: red; + } + #inner { + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="rel"> + <div class="abs"> + <div class="multicol" id="inner"> + <div class="rel" style="height: 400px;"> + <div class="abs" style="height: 400px; width: 25px; background-color: green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-028.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-028.html new file mode 100644 index 0000000000..b5378e2e48 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-028.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Nested abpos in a nested fragmentation context. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + background: red; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" style="width: 50px;"> + <div class="rel"> + <div class="abs"> + <div class="multicol" style="width: 25px;"> + <div class="rel" style="height: 800px;"> + <div class="abs" style="height: 800px; width: 12.5px; background-color: green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-029.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-029.html new file mode 100644 index 0000000000..6de88c613e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-029.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + top: 0px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px;"></div> + <div style="transform: translateX(0); height: 200px; background: red;"> + <div style="height: 200px;"></div> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-030.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-030.html new file mode 100644 index 0000000000..7737e8ef67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-030.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Nested fixedpos static position in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -200px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: red; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + <div style="height: 200px;"></div> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-031.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-031.html new file mode 100644 index 0000000000..aaa581c30e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-031.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos static position in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + top: 0px; + background: red; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + <div style=" height: 200px;"></div> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-032.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-032.html new file mode 100644 index 0000000000..b68f951af7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-032.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos static position in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -300px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + <div style="height: 200px;"></div> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div style="height: 200px;"></div> + <div class="abs" style="top: 200px; background: red;"></div> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-033.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-033.html new file mode 100644 index 0000000000..e1ecebe91b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-033.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a multicol with an abspos transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: red; + transform: translateX(0); + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + top: 0px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-034.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-034.html new file mode 100644 index 0000000000..286f6f4340 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-034.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos with fixedpos child in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + <div style="height: 200px;"></div> + <div class="rel"> + <div style="height: 200px;"></div> + <div class="abs"> + <div style="height: 200px;"></div> + <div class="fixed" style="background: red;"> + <div class="fixed" style="background: green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html new file mode 100644 index 0000000000..f1fff4031b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + Fixedpos in an abspos in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -250px; + margin-top: -50px; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + top: 0px; + background: red; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + top: 0px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 400px;"></div> + <div style="transform: translate(50px,50px); "> + <div style="height: 200px;"></div> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-036.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-036.html new file mode 100644 index 0000000000..d64f8b5974 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-036.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Fixedpos in a nested abspos in a multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -300px; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 400px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 200px;"></div> + <div class="abs"> + <div style="height: 200px;"></div> + <div class="abs" style="top: 0px; background: red;"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-037.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-037.html new file mode 100644 index 0000000000..215b44f602 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-037.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a nested multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + margin-left: -100px; + } + .abs { + position: absolute; + width: 25px; + height: 400px; + top: 0px; + } + .fixed { + position: fixed; + width: 25px; + height: 400px; + background: green; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="height: 400px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 400px;"></div> + <div class="abs"> + <div style="height: 400px; background-color: red;"></div> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-038.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-038.html new file mode 100644 index 0000000000..189de988c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-038.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title> + Fixedpos in a nested multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + margin-left: -100px; + } + .abs { + position: absolute; + width: 25px; + height: 400px; + } + .fixed { + position: fixed; + width: 25px; + height: 400px; + background: green; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="height: 400px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 400px; background: red;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="abs" style="top: 0px;"> + <div class="fixed"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-039.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-039.html new file mode 100644 index 0000000000..9eaa9f7320 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-039.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title> + Fixedpos static position in a nested multicol with transform container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + margin-left: -200px; + } + .abs { + position: absolute; + width: 25px; + height: 400px; + } + .fixed { + position: fixed; + width: 25px; + height: 400px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="height: 400px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 400px;"></div> + <div class="abs"> + <div style="height: 400px; background: red;"></div> + <div class="abs" style="top: 0px;"> + <div class="fixed"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-040.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-040.html new file mode 100644 index 0000000000..6b6a73a5d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-040.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Nested fixedpos static position in a nested multicol with transform container + in outer multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +.multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; +} +#outer { + height: 100px; + width: 100px; + margin-left: -100px; +} +#inner { + width: 50px; + height: 700px; + margin-left: -425px; +} +.rel { + position: relative; +} +.abs { + position: absolute; +} +.fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div style="height: 200px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 200px; background-color: red;"></div> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-041.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-041.html new file mode 100644 index 0000000000..6bf7ffb056 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-041.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a nested multicol with transform container in outer multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + margin-left: -100px; + } + #inner { + width: 50px; + height: 700px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + top: 0px; + left: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div style="height: 200px;"></div> + <div style="transform: translateX(0);"> + <div style="height: 200px; background-color: red;"></div> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-042.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-042.html new file mode 100644 index 0000000000..4539201e64 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-042.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Relative insets apply to abspos in a multicol after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -150px; + margin-top: -150px; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + width: 100%; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="top: 50px; left: 50px;"> + <div class="rel" style="top: 100px; left: 100px; background: red;"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-043.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-043.html new file mode 100644 index 0000000000..bdda35d0e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-043.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Relative insets apply to nested abspos in a multicol after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -150px; + margin-top: -150px; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + width: 100%; + height: 200px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="top: 50px; left: 50px;"> + <div class="rel" style="top: 100px; left: 100px; background: red;"> + <div class="abs"> + <div class="abs" style="background: green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-044.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-044.html new file mode 100644 index 0000000000..d06f4040fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-044.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Relative insets apply to nested fixedpos in a multicol after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -200px; + margin-top: -50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 100%; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="top: 50px; left: 50px;"> + <div style="transform: translateX(0); height: 200px;"> + <div class="abs" style="width: 50px; height: 200px; top: 100px; left: 100px; background: red;"></div> + <div class="rel" style="top: 100px; left: 100px;"> + <div class="abs"> + <div class="abs"> + <div class="fixed" style="background: green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-045.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-045.html new file mode 100644 index 0000000000..c4cda499c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-045.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title> + Ancestor inline offsets apply to abspos in a multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -110px; + margin-top: -100px; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="margin-left: 10px;"> + <div class="rel" style="top: 100px; left: 100px; background: red;"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-046.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-046.html new file mode 100644 index 0000000000..16caaf849c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-046.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element with inner multicol containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + background-color: red; + width: 50px; + position: relative; + } + .abs { + position: absolute; + width: 50px; + height: 200px; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-047.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-047.html new file mode 100644 index 0000000000..496c3bdaef --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-047.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element with inner multicol containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + background-color: red; + width: 50px; + position: relative; + } + .rel { + position: relative; + height: 200px; + } + .abs { + position: absolute; + background-color: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="abs" style="width: 50px; height: 100px; top: 100px;"></div> + <div class="rel"> + <div class="abs" style="width: 25px; height: 200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-048.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-048.html new file mode 100644 index 0000000000..b96a5c5e31 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-048.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: white; + } + .abs { + position: absolute; + background-color: green; + width: 25px; + height: 200px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 400px; width: 25px; background-color: red;"> + <div style="height: 100px;"></div> + <span style="position: relative;"> + AA AA AA AA A + <div class="abs" style="bottom: 0px;"></div> + AA AA A AA A + AA A AA AA A + <div class="abs" style="top: -100px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-049.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-049.html new file mode 100644 index 0000000000..3228868a8a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-049.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: white; + } + .abs { + position: absolute; + background-color: green; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 400px; width: 25px; background-color: red;"> + <span style="position: relative;"> + <div class="abs" style="height: 300px;"></div> + AA AA AA AA A + AA AA A AA A + AA A AA AA A + AA A AA AA A + <div class="abs" style="right: 20px; height: 100px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-050.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-050.html new file mode 100644 index 0000000000..c213e0c655 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-050.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: red; + text-align: right; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + top: -80px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px; width: 50px; background-color: red;"> + <div style="height: 60px;"></div> + B + <span style="position: relative;"> + AA A AA A + <div class="abs" style="width: 10px;"></div> + <div class="abs" style="right: 0px; left: 0px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-051.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-051.html new file mode 100644 index 0000000000..84e7a22f74 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-051.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: red; + } + .abs { + position: absolute; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px; width: 50px; background-color: red;"> + <span style="position: relative;"> + <span class="abs"> + AA AA AA AA A + AA AA A AA A + <div class="abs" style="top: 0px; bottom: 0px; background-color: green;"></div> + </span> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-052.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-052.html new file mode 100644 index 0000000000..b45aebb96c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-052.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: red; + } + .fixed { + position: fixed; + background-color: green; + width: 100px; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px; width: 50px; background-color: red;"> + <span style="position: relative;"> + <span style="position: absolute;"> + <div class="fixed"></div> + AA AA AA AA A + AA AA A AA A + </span> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-053.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-053.html new file mode 100644 index 0000000000..ed74f0a51d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-053.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in nested multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + font: 20px/1 Ahem; + color: white; + } + #outer { + height: 100px; + width: 100px; + } + #inner { + width: 50px; + position: relative; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="height: 400px; width: 25px; background-color: red;"> + <span style="position: relative;"> + <div class="abs"></div> + AA AA AA AA A + AA AA A AA A + AA AA AA AA A + AA AA A AA A + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-054.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-054.html new file mode 100644 index 0000000000..d55b62f01d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-054.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block and + column spanner. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: red; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + width: 50px; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px; width: 50px; background-color: red;"> + <span style="position: relative;"> + AA AA AA AA + <div style="column-span: all;"></div> + A AA AA A AA A + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-055.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-055.html new file mode 100644 index 0000000000..fdb080ad50 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-055.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 4; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: white; + } + .abs { + position: absolute; + background-color: green; + width: 25px; + height: 200px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 400px; width: 25px; background-color: red;"> + <div style="height: 100px;"></div> + <span style="position: relative;"> + A AA AA AA A + <div class="abs" style="top: -100px;"></div> + </span> + <span style="position: relative;"> + A A A A A + AA A AA AA A + <div class="abs" style="bottom: 0px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-056.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-056.html new file mode 100644 index 0000000000..e9c22901f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-056.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + width: 50px; + top: -200px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="background: red; height: 200px; width: 50px;"></div> + <span style="position: relative;"> + <div class="abs"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-057.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-057.html new file mode 100644 index 0000000000..ce6b66544e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-057.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + font: 20px/1 Ahem; + color: white; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + width: 25px; + top: -60px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px; width: 50px; background-color: red;"> + <div style="height: 60px;"></div> + B + <span style="position: relative;"> + <div class="abs" style="left: 5px;"></div> + AA A AA AA + <div class="abs" style="left: -20px;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-058.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-058.html new file mode 100644 index 0000000000..a8ddcdc8db --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-058.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing block - the + relative offset should apply to the OOF descendant after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -400px; + margin-top: -400px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + background-color: green; + width: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="top: 200px; left: 200px;"> + <div class="rel" style="top: 50px; left: 50px;"> + <span class="rel" style="top: 50px; left: 100px;"> + <span class="rel" style="top: 100px; left: 50px;"> + <div style="height: 200px; width: 50px; background: red;"></div> + <div class="abs" style="top: 0px; height: 50px;"></div> + <div class="abs" style="top: 50px; height: 150px;"></div> + </span> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-059.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-059.html new file mode 100644 index 0000000000..3575a75d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-059.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol - the relative offset should + apply to the OOF descendant after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -150px; + margin-top: -150px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + width: 50px; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <span class="rel" style="top: 50px; left: 100px;"> + <div class="rel" style="top: 100px; left: 50px;"> + <div style="height: 200px; width: 50px; background: red;"></div> + <span class="abs"></span> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-060.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-060.html new file mode 100644 index 0000000000..8de72c6d67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-060.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element in multicol with inline containing + block - the relative offset should apply to the OOF descendant after + fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + margin-top: -50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + background-color: green; + height: 200px; + width: 50px; + top: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="top: 50px; left: 100px;"> + <span class="abs"> + <div style="height: 200px; width: 50px; background: red;"></div> + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-061.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-061.html new file mode 100644 index 0000000000..86e515b843 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-061.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element in multicol - the relative offset + should apply to the OOF descendant after fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .oof { + background-color: green; + height: 100px; + width: 50px; + } + #abs { + position: absolute; + top: 100px; + } + #fixed { + position: fixed; + top: 0px; + left: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + <div class="rel" style="left: 100px;"> + <div style="height: 200px; width: 50px; background: red;"></div> + <span class="oof" id="abs"> + <div class="oof" id="fixed"></div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-062.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-062.html new file mode 100644 index 0000000000..e01f4a6239 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-062.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in nested multicol with inline containing + block - the relative offset should apply to the OOF descendant after + fragmentation. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + margin-left: -150px; + margin-top: -150px; + } + #inner { + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + background-color: green; + width: 25px; + height: 400px; + left: -100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel" style="top: 50px; left: 100px;"> + <span class="rel" style="top: 100px; left: 50px;"> + <div style="height: 400px; width: 25px; background: red;"></div> + <div class="abs"></div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-063.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-063.html new file mode 100644 index 0000000000..7828e4a7fe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-063.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing + block and vertical-rl writing mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + writing-mode: vertical-lr; + direction: rtl; + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + margin-top: 66px; + margin-left: -50px; + } + .rel { + position: relative; + inset-block-start: 50px; + inset-inline-start: 50px; + } + .abs { + position: absolute; + inline-size: 50px; + block-size: 200px; + inset-block-start: 0; + inset-inline-start: 0; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div> + <span class="rel"> + <div style="block-size: 200px; inline-size: 50px; background: red;"></div> + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-064.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-064.html new file mode 100644 index 0000000000..19afe87f88 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-064.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with vertical-rl writing mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + writing-mode: vertical-rl; + columns: 2; + column-fill: auto; + column-gap: 0; + height: 100px; + width: 100px; + background: red; + color: red; + } + .abs { + position: absolute; + inline-size: 50px; + block-size: 200px; + inset-block-start: 0; + inset-inline-start: 0; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="position: relative;"> + FAIL + <div class="abs"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-065.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-065.html new file mode 100644 index 0000000000..13a1bdbafb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-065.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element in multicol with vertical-rl writing + mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + writing-mode: vertical-rl; + columns: 2; + column-fill: auto; + column-gap: 0; + height: 100px; + width: 100px; + background: red; + color: red; + } + .fixed { + position: fixed; + inline-size: 50px; + block-size: 200px; + inset-block-start: 0; + inset-inline-start: 0; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="transform: translateX(0);"> + FAIL + <div style="position: relative;"> + <div style="position: absolute;"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-066.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-066.html new file mode 100644 index 0000000000..024b93f540 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-066.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing + block and vertical-rl writing mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + writing-mode: vertical-rl; + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + } + .abs { + position: absolute; + inline-size: 50px; + block-size: 200px; + inset-block-start: 0; + inset-inline-start: 0; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div> + <span style="position: relative;"> + <div style="block-size: 200px; inline-size: 50px; background: red;"></div> + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-067.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-067.html new file mode 100644 index 0000000000..4d38c4608e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-067.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing + block and vertical-rl writing mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + writing-mode: vertical-rl; + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + color: red; + font: 20px/1 Ahem; + } + .abs { + position: absolute; + inline-size: 50px; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-start: 0; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div> + <span style="position: relative;"> + AA AA AA AA AA + AA AA AA AA AA + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-068.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-068.html new file mode 100644 index 0000000000..6694eba539 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-068.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element in multicol with inline containing + block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + color: red; + font: 20px/1 Ahem; + margin-left: -5px; + } + .abs { + position: absolute; + width: 50px; + top: 0px; + left: 0px; + bottom: 0px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="margin-left: 5px;"> + <span style="position: relative;"> + AA AA AA AA AA + AA AA AA AA AA + <div class="abs"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-069.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-069.html new file mode 100644 index 0000000000..7fdb32a270 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-069.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element affects column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + width: 100px; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + } + #target { + background-color: red; + position: relative; + height: 100px; + width: 100px; + top: -100px; + z-index: -1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="position: relative;"> + <div class="abs"></div> + </div> +</div> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-070.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-070.html new file mode 100644 index 0000000000..1986ab81ff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-070.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element with inline CB affects column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + width: 100px; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + } + #target { + background-color: red; + position: relative; + height: 100px; + width: 100px; + top: -100px; + z-index: -1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div> + <span style="position: relative;"> + <div class="abs"></div> + </span> + </div> +</div> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-071.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-071.html new file mode 100644 index 0000000000..629ebda48b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-071.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned element affects nested column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-gap: 0px; + } + #outer { + width: 100px; + } + #inner { + width: 50px; + column-fill: auto; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + } + #target { + background-color: red; + position: relative; + height: 100px; + width: 100px; + top: -100px; + z-index: -1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div style="position: relative;"> + <div class="abs"></div> + </div> + </div> +</div> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-072.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-072.html new file mode 100644 index 0000000000..91f3da2c4b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-072.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title> + Nested out-of-flow positioned element affects column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + width: 100px; + } + .abs { + position: absolute; + background-color: green; + } + #target { + background-color: red; + position: relative; + height: 100px; + width: 100px; + top: -100px; + z-index: -1; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="position: relative;"> + <div class="abs"> + <div class="abs" style="height: 400px; width: 25px;"></div> + </div> + </div> +</div> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-073.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-073.html new file mode 100644 index 0000000000..57093e2264 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-073.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos should be affected by relative positioned offset. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + margin-top: -100px; + margin-left: -150px; + } + .box { + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + background: green; + } + .abs { + position: absolute; + } + .rel { + position: relative; + top: 100px; + left: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="rel" style="transform: translateX(0);"> + <div class="abs box" style="background: red; top: 100px; left: 50px;"></div> + <div class="rel"> + <div class="abs"> + <div class="fixed box"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-074.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-074.html new file mode 100644 index 0000000000..1c6882d4b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-074.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned with bottom:0 with spanner sibling. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + width: 100px; + margin-top: -105px; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + bottom: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="position: relative;"> + <div style="height: 400px;"></div> + <div class="abs"></div> + <div style="column-span: all; height:5px;"></div> + <div style="height: 400px; width: 25px; background-color: red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-075.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-075.html new file mode 100644 index 0000000000..34cf1ea74d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-075.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title> + Out-of-flow positioned in non-containing-block in multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 4; + column-gap: 0px; + width: 100px; + } + .abs { + position: absolute; + background-color: green; + height: 400px; + width: 25px; + top: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="position: relative;"> + <div style="height: 400px; background: red"></div> + <div style="will-change: opacity"> + <div class="abs"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-076.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-076.html new file mode 100644 index 0000000000..7f8858d9f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-076.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1265759"> +<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="position:relative;"> + <div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div id="elm" style="position:absolute; width:50px; height:200px; background:green;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.position = "static"; +</script> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-077.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-077.html new file mode 100644 index 0000000000..f37858bb26 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-077.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280662"> +<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; height:100px; width:100px; background:green; column-fill:auto; column-gap:0;"> + <div style="height:40px;"></div> + <div style="columns:2; width:50px; column-fill:auto; column-gap:0;"> + <div style="position:relative; column-span:all; height:160px; background:red;"> + <div style="position:absolute; height:160px; width:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-078.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-078.html new file mode 100644 index 0000000000..b19bb9f5d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-078.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280662"> +<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; height:100px; width:100px; background:green; column-fill:auto; column-gap:0;"> + <div style="height:40px;"></div> + <div style="columns:2; width:50px; column-fill:auto; column-gap:0;"> + <div style="position:relative; column-span:all; height:160px; background:red;"> + <div style="position:absolute; top:0; bottom:0; width:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-079.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-079.html new file mode 100644 index 0000000000..f4d4c32b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-079.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280662"> +<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; height:100px; width:100px; background:green; column-fill:auto; column-gap:0;"> + <div style="height:40px;"></div> + <div style="columns:2; width:50px; column-fill:auto; column-gap:0;"> + <div style="column-span:all; height: 160px; background:red;"> + <div style="height:40px; width:50px; background: green;"></div> + <div style="position:relative; height:120px; width:50px;"> + <div style="position:absolute; height:120px; width:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-080.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-080.html new file mode 100644 index 0000000000..4b620ae417 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-080.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280662"> +<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; height:100px; width:100px; background:green; column-fill:auto; column-gap:0;"> + <div style="height:40px;"></div> + <div style="columns:2; width:50px; column-fill:auto; column-gap:0;"> + <div style="column-span:all; height: 160px; background:red;"> + <div style="height:40px; width:50px; background: green;"></div> + <div style="position:relative; height:120px; width:50px;"> + <div style="position:absolute; top:0; bottom:0; width:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-081.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-081.html new file mode 100644 index 0000000000..218fa2ad3a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-081.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-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto;"> + <div style="columns:2; column-gap:0; column-fill:auto;"> + <div style="position:relative;"> + <div style="position:absolute; width:100%; height:2000px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-082.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-082.html new file mode 100644 index 0000000000..6408073870 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-082.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1302323"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="position:relative;"> + <div style="position:absolute; columns:2; column-gap:0; column-fill:auto; width:100%; height:100px;"> + <div style="position:relative;"> + <div style="position:absolute; width:100%; height:400px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-083.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-083.html new file mode 100644 index 0000000000..d238720ad0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-083.html @@ -0,0 +1,13 @@ +<!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=1305067"> +<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; width:100px; height:100px; background:red;"> + <div style="position:absolute;"> + <div style="columns:2;"> + <!-- This one doesn't participate in any of the fragmentation contexts: --> + <div style="position:absolute; width:100px; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-084.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-084.html new file mode 100644 index 0000000000..d3fef2ee2b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-084.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314234"> +<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:1;"> + <div style="height:50px; background:green;"></div> + <div style="position:relative; height:13px;"> + <div style="position:absolute; width:100%; height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-085.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-085.html new file mode 100644 index 0000000000..eb8314c2d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-085.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Nested fixedpos static position in a multicol with inline container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -700px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: absolute; width: 100px; height: 100px; background: red;"></div> +<div class="multicol"> + <div style="height: 200px;"></div> + <span style="filter:blur(0px);"> + <div style="height: 200px;"></div> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 200px; width: 50px;"></div> + <div class="fixed"></div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-086.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-086.html new file mode 100644 index 0000000000..17073077e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-086.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in multicol with inline container. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + top: 0px; + left: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px;"></div> + <span style="filter:blur(0px);"> + <div style="height: 200px; background-color: red;"></div> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-087.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-087.html new file mode 100644 index 0000000000..bd1c941f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-087.html @@ -0,0 +1,53 @@ + +<!DOCTYPE html> +<title> + Nested fixedpos static position in a nested multicol with inline container + in outer multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +.multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; +} +#outer { + height: 100px; + width: 100px; + margin-left: -100px; +} +#inner { + width: 50px; + height: 700px; + margin-left: -425px; +} +.rel { + position: relative; +} +.abs { + position: absolute; +} +.fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div style="height: 200px;"></div> + <span style="filter:blur(0px);"> + <div style="height: 200px; background-color: red;"></div> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-088.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-088.html new file mode 100644 index 0000000000..9adffb15d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-088.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a nested multicol with inline container in outer multicol. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + margin-left: -100px; + } + #inner { + width: 50px; + height: 700px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + top: 0px; + left: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol" id="outer"> + <div style="height: 200px;"></div> + <span style="filter:blur(0px);"> + <div style="height: 200px; background-color: red;"></div> + <div class="multicol" id="inner"> + <div class="rel"> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-089.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-089.html new file mode 100644 index 0000000000..a13aad886d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-089.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a multicol with same inline container as its abspos + parent. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + margin-left: -100px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + width: 50px; + height: 200px; + background: green; + top: 0px; + left: 0px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div style="height: 200px;"></div> + <span style="filter:blur(0px);"> + <div style="height: 200px; background-color: red;"></div> + <div style="height: 800px;"></div> + <div class="abs"> + <div style="height: 400px;"></div> + <div class="fixed"></div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-090.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-090.html new file mode 100644 index 0000000000..e6cf192dd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-090.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in inline should be affected by relative positioned offset. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + columns: 2; + column-fill: auto; + height: 100px; + width: 100px; + column-gap: 0px; + margin-top: -100px; + margin-left: -150px; + } + .box { + width: 50px; + height: 200px; + } + .fixed { + position: fixed; + background: green; + } + .abs { + position: absolute; + } + .rel { + position: relative; + top: 100px; + left: 50px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <span class="rel" style="filter:blur(0px);"> + <div class="abs box" style="background: red; top: 100px; left: 50px;"></div> + <div class="rel"> + <div class="abs"> + <div class="fixed box"></div> + </div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-091.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-091.html new file mode 100644 index 0000000000..4049412545 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-091.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a where the multicol is the containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + transform: translateX(0); + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + height: 100%; + width: 100%; + top: -100px; + background:green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height: 100px; width: 100px; background: red;"></div> +<div class="multicol"> + <div class="rel"> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-092.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-092.html new file mode 100644 index 0000000000..b21bbee6ea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-092.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title> + Nested fixedpos in a nested fragmentation context where the outer + multicol is the containing block. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + column-count: 2; + column-fill: auto; + column-gap: 0px; + } + #outer { + height: 100px; + width: 100px; + transform: translateX(0); + } + #inner { + width: 50px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + } + .fixed { + position: fixed; + height: 100%; + width: 100%; + top: -100px; + background:green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height: 100px; width: 100px; background: red;"></div> +<div class="multicol" id="outer"> + <div class="multicol" id="inner"> + <div class="rel"> + <div class="abs"> + <div class="fixed"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093-ref.html new file mode 100644 index 0000000000..a2fdde0cd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> + ul { columns:1; height:20px; width:100px; line-height:20px; } + ul li { position:relative; list-style-type:none; font-size:20px; } + ul li::before { content:" \2022 "; position:absolute; top:0; left:-15px; } +</style> +<p>There should be a bullet to the left of the word "Bullet".</p> +<ul> + <li>Bullet</li> +</ul> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093.html new file mode 100644 index 0000000000..7cd94c10b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-093.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1319280"> +<link rel="match" href="out-of-flow-in-multicolumn-093-ref.html"> +<style> + ul { columns:2; column-gap:0; height:20px; width:200px; line-height:20px; margin-left:-100px; } + ul li { position:relative; list-style-type:none; font-size:20px; } + ul li::before { content:" \2022 "; position:absolute; top:-2px; left:-15px; } +</style> +<p>There should be a bullet to the left of the word "Bullet".</p> +<ul> + <li>Bullet</li> + <li>Bullet</li> +</ul> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-094.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-094.html new file mode 100644 index 0000000000..1cb04aefea --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-094.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title> + OOFs and column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height:200px; width:200px; background:red;"> + <div style="width:200px; columns:2; column-rule:solid green; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + <div style="position:relative;"> + <div style="position:absolute; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-095.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-095.html new file mode 100644 index 0000000000..3811791d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-095.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + OOFs and column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height:200px; width:200px; background:red;"> + <div style="width:200px; columns:2; column-rule:solid green; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="position:relative; height:100px;"> + <div style="position:absolute; contain:size; height:100px;"></div> + </div> + <div style="position:relative;"> + <div style="position:absolute; contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-096.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-096.html new file mode 100644 index 0000000000..f5382d6d3d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-096.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + OOFs and nested column balancing. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height:200px; width:200px; background:red;"> + <div style="width:200px; columns:1;"> + <div style="width:200px; columns:2; column-rule:solid green; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + <div style="position:relative;"> + <div style="position:absolute; height:100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-097.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-097.html new file mode 100644 index 0000000000..faac60705b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-097.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + OOFs and column balancing with a spanner. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height:200px; width:200px; background:red;"></div> +<div style="width:200px; columns:2; column-rule:20px solid green; margin-top:-300px; position:relative;"> + <div style="contain:size; height:80px;"></div> + <div style="column-span:all; height:20px;"></div> + <div style="contain:size; height:100px; width:100%; background:green;"></div> + <div style="contain:size; height:100px; width:100%; background:green;"></div> + <div style="position:relative;"> + <div style="position:absolute; width:100%; height:100px; background:green;"></div> + </div> + <div style="position:absolute; bottom:0; right:0; width:90px; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-098.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-098.html new file mode 100644 index 0000000000..390e86995d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-098.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title> + OOFs and column balancing with a spanner and the CB breaks across the spanner. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="height:200px; width:200px; background:red;"></div> +<div style="width:200px; columns:2; column-rule:20px solid green; margin-top:-300px; position:relative;"> + <div style="position:relative;"> + <div style="contain:size; height:80px;"></div> + <div style="column-span:all; height:20px;"></div> + <div style="contain:size; height:100px; width:100%; background:green;"></div> + <div style="contain:size; height:100px; width:100%; background:green;"></div> + <div style="position:absolute; width:100%; height:100px; background:green;"></div> + </div> + <div style="position:absolute; bottom:0; right:0; width:90px; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-099.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-099.html new file mode 100644 index 0000000000..8c75b2bf5d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-099.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title> + OOFs and column balancing with a nested break-inside:avoid. +</title> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:200px; columns:2; column-rule:solid green; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="position:relative; height:200px; width:100%; background:red;"> + <div style="position:absolute; width:100%; background:green;"> + <div style="height:200px; break-inside:avoid;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-100.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-100.html new file mode 100644 index 0000000000..1bf71e832d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-100.html @@ -0,0 +1,13 @@ +<!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=1395581"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; height:200px;"> + <div style="width:60px; height:60px; direction:rtl; border:20px solid green; background:red;"> + <div style="position:relative;"> + <div style="position:absolute; left:0; top:0; width:60px; height:30px; background:green;"></div> + <div style="position:absolute; right:0; top:30px; width:60px; height:30px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-101.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-101.html new file mode 100644 index 0000000000..ed7e1e234d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-101.html @@ -0,0 +1,13 @@ +<!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=1395581"> +<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="width:30px; height:180px; direction:rtl; border:10px solid green;"> + <div style="position:relative;"> + <div style="position:absolute; left:0; top:0; width:30px; height:90px; background:green;"></div> + <div style="position:absolute; right:0; top:90px; width:30px; height:90px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-102.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-102.html new file mode 100644 index 0000000000..45cbc0b453 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-102.html @@ -0,0 +1,13 @@ +<!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=1395581"> +<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="position:absolute; margin-left:15px; margin-top:15px; width:30px; height:70px; background:green;"></div> +<div style="columns:2; column-fill:auto; height:200px;"> + <div style="width:70px; height:70px; direction:rtl; border:solid 15px green; background:red;"> + <div style="position:relative;"> + <div style="position:absolute; width:40px; height:70px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-103.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-103.html new file mode 100644 index 0000000000..b54cbcd85a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-103.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395581"> +<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="position:absolute; margin-left:10px; margin-top:10px; width:10px; height:90px; background:green;"></div> +<div style="position:absolute; margin-left:60px; width:10px; height:90px; background:green;"></div> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="width:32px; height:180px; direction:rtl; border:solid 10px green; border-right-width:8px;"> + <div style="position:relative;"> + <div style="position:absolute; width:22px; height:180px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-104.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-104.html new file mode 100644 index 0000000000..27363ad2b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-104.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="overflow:clip; position:relative; width:100px; height:100px; background:green;"> + <div style="position:absolute; z-index:-1; width:5000px; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html new file mode 100644 index 0000000000..1230f8b250 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a vertical scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="height:10000px;"> + <div style="height:9800px;"></div> + <div style="width:100px; height:100px; background:green;"></div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105.html new file mode 100644 index 0000000000..b5cc802239 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-105.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> + <link rel="match" href="out-of-flow-in-multicolumn-105-ref.html"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a vertical scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="overflow-x:clip; position:relative; width:100px; height:100px;"> + <div style="position:absolute; width:5000px;"> + <div style="contain:size; height:10000px;"> + <div style="height:9800px; background:red;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + <div style="float:left; width:100px; height:100px;"></div> + <div style="float:left; width:4800px; height:200px; background:red;"></div> + </div> + </div> + </div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html new file mode 100644 index 0000000000..65a9339374 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a horizontal scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="width:10000px;"> + <div style="float:left; width:9800px; height:1px;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + </div> + </div> + <script> + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106.html new file mode 100644 index 0000000000..e97d947ea1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-106.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395037"> + <link rel="match" href="out-of-flow-in-multicolumn-106-ref.html"> + <p>Test passes if there is a filled green square and <strong>no red</strong>, + and a horizontal scrollbar (unless overlay scrollbars are enabled).</p> + <div id="scrollable" style="overflow:auto; width:200px; height:200px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="overflow-y:clip; position:relative; width:100px; height:100px;"> + <div style="position:absolute; width:5000px;"> + <div style="contain:size; height:10000px;"> + <div style="float:left; width:4800px; height:200px; background:red;"></div> + <div style="float:left; width:100px; height:100px; background:green;"></div> + <div style="float:left; clear:left; width:5000px; height:9800px; background:red;"></div> + </div> + </div> + </div> + </div> + </div> + <script> + scrollable.scrollTop = 100000; + scrollable.scrollLeft = 100000; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-107.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-107.html new file mode 100644 index 0000000000..76aa32bb9c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-107.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<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="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="position:relative; height:300px;"> + <div style="position:absolute; width:100%; height:100000px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-108.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-108.html new file mode 100644 index 0000000000..de453c7469 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-108.html @@ -0,0 +1,28 @@ +<!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=1399313"> +<meta name="assert" content="For a non-OOF variant of this test, see //css/css-break/overflow-clip-007.html"> +<style> + body { margin: 0; } +</style> +<div style="columns:3; width:100px; gap:20px; column-fill:auto; height:100px;"> + <div style="overflow:clip;"> + <div style="position:relative; height:300px;"> + <div style="position:absolute; width:100%; height:100000px;"> + <div style="height:10050px;"></div> + <div id="target" style="height:1000px;"></div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var rect = target.getBoundingClientRect(); + assert_equals(rect.left, 80); + assert_equals(rect.top, 9850); + assert_equals(rect.width, 20); + assert_equals(rect.height, 1000); + }, "Overflowing and clipped content doesn't fragment"); +</script> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-109.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-109.html new file mode 100644 index 0000000000..32707fe99a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-109.html @@ -0,0 +1,13 @@ +<!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=1399313"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Check that only clipping in the inline direction doesn't prevent an OOF from generating additional fragmentainers"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; width:100px; column-rule:20px solid green; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow-x:clip;"> + <div style="position:relative;"> + <div style="position:absolute; width:100%; height:300px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-110.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-110.html new file mode 100644 index 0000000000..9da905d075 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-110.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399313"> +<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="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="will-change:transform; height:300px;"> + <div style="position:fixed; width:100%; height:100000px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-111.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-111.html new file mode 100644 index 0000000000..a7350ac0ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-111.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=1399313"> +<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="position:absolute; width:20px; height:100px; margin-left:20px; background:green;"></div> +<div style="position:absolute; width:20px; height:100px; margin-left:60px; background:green;"></div> +<div style="columns:3; width:100px; column-rule:20px solid red; gap:20px; column-fill:auto; height:100px; background:red;"> + <div style="overflow:clip;"> + <div style="will-change:transform; height:300px;"> + <div style="overflow:clip;"> + <div style="position:relative; height:250px;"> + <div style="position:absolute; width:100%; height:10000px; background:red;"> + <div style="height:250px; background:green;"></div> + </div> + <div style="position:fixed; width:100%; height:10000px; top:250px; background:red;"> + <div style="height:50px; background:green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-112.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-112.html new file mode 100644 index 0000000000..5c9be2f394 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-112.html @@ -0,0 +1,13 @@ +<!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=1404718"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:150px; background:green;"></div> + <div style="position:relative; overflow:clip; height:50px;"> + <div style="position:absolute; width:100%; height:20px; background:green;"> + <div style="position:absolute; top:20px; width:100%; height:30px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-113.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-113.html new file mode 100644 index 0000000000..9495933b3d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-113.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=1404718"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="position:relative; overflow:clip; height:60px;"> + <div style="position:absolute; width:100%; height:60px; background:green;"></div> + <div style="height:100px;"></div> + </div> + <div style="height:40px; background:green;"></div> + <div style="position:relative; overflow:clip; height:60px;"> + <div style="position:absolute; width:100%; height:60px; background:green;"></div> + <div style="height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-114.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-114.html new file mode 100644 index 0000000000..75c8447f59 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-114.html @@ -0,0 +1,13 @@ +<!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=1400739"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:120px; background:green;"></div> + <div style="overflow-y:clip; position:relative; height:50px; background:green;"> + <div style="position:absolute; top:-50px; width:100%; height:10000px;"> + <div style="margin-left:100%; width:100%; height:30px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-115.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-115.html new file mode 100644 index 0000000000..8346477b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-115.html @@ -0,0 +1,13 @@ +<!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=1400739"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:120px; background:green;"></div> + <div style="overflow-y:clip; position:relative; height:50px; background:green;"> + <div style="position:absolute; contain:size; top:-50px; width:100%; height:10000px;"> + <div style="margin-left:100%; width:100%; height:30px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-116.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-116.html new file mode 100644 index 0000000000..fac536a65b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-116.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1412313"> +<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:1; column-fill:auto; height:100px; width:100px;"> + <div style="contain:size; height:100px; background:green;"> + <div style="height:50px;"></div> + <span style="position:relative; height:50px;"> + <div style="height:25px; background:red;"></div> + <div style="position:absolute; top:0; width:100px; height:25px; background:green;"></div> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-crash.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-crash.html new file mode 100644 index 0000000000..3e2c6a5457 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278627"> +<div style="columns: 1;"> + <div style="position: absolute;"></div> + <div style="position: relative;"> + <div style="position: absolute; top: 0; left: 0;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-nested-spanner-multicol-crash.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-nested-spanner-multicol-crash.html new file mode 100644 index 0000000000..8c8e3eefad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-nested-spanner-multicol-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1324906"> +<div style="columns:2;"> + <div style="columns:2;"> + <div style="column-span:all; columns:2;"> + <div style="position:relative;"> + <div style="position:absolute; height:20px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-in-new-column-crash.html b/testing/web-platform/tests/css/css-break/out-of-flow-in-new-column-crash.html new file mode 100644 index 0000000000..0571af7a97 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-new-column-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1305726"> +<div style="columns:3; column-fill:auto; line-height:20px; height:20px;"> + <div style="break-after:column;"></div> + <div style="position:absolute;"></div> + <div style="position:relative; height:20px;"> + <div>x</div> + <div style="position:absolute; height:20px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-flow-with-negative-offset-crash.html b/testing/web-platform/tests/css/css-break/out-of-flow-with-negative-offset-crash.html new file mode 100644 index 0000000000..202b33f813 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-flow-with-negative-offset-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314916"> +<div style="columns:2; column-fill:auto; height:15px;"> + <div style="columns:2; column-fill:auto;"> + <div style="height:20px;"></div> + <div style="position:relative;"> + <div style="height:20px;"></div> + <div style="column-span:all; columns:1; padding-top:30px;"></div> + <div style="height:20px;"></div> + <div style="position:absolute; top:-10px; height:5px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/out-of-order-float-in-inline-crash.html b/testing/web-platform/tests/css/css-break/out-of-order-float-in-inline-crash.html new file mode 100644 index 0000000000..0a348cf266 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/out-of-order-float-in-inline-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486411"> +<div style="columns:2; column-fill:auto; height:100px; orphans:1; widows:1;"> + <br> + <span> + <div style="float:left; break-inside:avoid; width:100%; height:200px;"></div> + x + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-auto-height-with-bottom-padding-crash.html b/testing/web-platform/tests/css/css-break/overflow-auto-height-with-bottom-padding-crash.html new file mode 100644 index 0000000000..e25c8e3f2c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-auto-height-with-bottom-padding-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1310238"> +<div style="columns:5; column-fill:auto; height:100px;"> + <div style="padding-bottom:1px;"> + <div style="height:100px;"> + <div style="height:450px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-000.html b/testing/web-platform/tests/css/css-break/overflow-clip-000.html new file mode 100644 index 0000000000..72b10f5cdd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-000.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + writing-mode: horizontal-tb; + columns: 4; + column-fill: auto; + column-gap: 0; + inline-size: 100px; + block-size: 200px; + } + #clipper { + /* Take up all of the first three columns and the half of the last one. */ + block-size: 700px; + overflow: clip; + } + .filler { + /* Take us from one fragmentainer and 50px into the next. */ + block-size: 150px; + } + .visible { + block-size: 100px; + background: green; + } + .before-fragmentainer-start { + /* This is before the block-start of a fragmentainer, and should therefore + be clipped by #clipper. */ + margin-block-start: -100px; + block-size: 50px; + background: red; + } + .after-container-end { + block-size: 100px; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div id="clipper"> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="after-container-end"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-001.html b/testing/web-platform/tests/css/css-break/overflow-clip-001.html new file mode 100644 index 0000000000..8d08408744 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + writing-mode: vertical-lr; + columns: 4; + column-fill: auto; + column-gap: 0; + inline-size: 100px; + block-size: 200px; + } + #clipper { + /* Take up all of the first three columns and the half of the last one. */ + block-size: 700px; + overflow: clip; + } + .filler { + /* Take us from one fragmentainer and 50px into the next. */ + block-size: 150px; + } + .visible { + block-size: 100px; + background: green; + } + .before-fragmentainer-start { + /* This is before the block-start of a fragmentainer, and should therefore + be clipped by #clipper. */ + margin-block-start: -100px; + block-size: 50px; + background: red; + } + .after-container-end { + block-size: 100px; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div id="clipper"> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="after-container-end"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-002.html b/testing/web-platform/tests/css/css-break/overflow-clip-002.html new file mode 100644 index 0000000000..72f72f41cd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + writing-mode: vertical-rl; + margin-left: -100px; + columns: 4; + column-fill: auto; + column-gap: 0; + inline-size: 100px; + block-size: 200px; + } + #clipper { + /* Take up all of the first three columns and the half of the last one. */ + block-size: 700px; + overflow: clip; + } + .filler { + /* Take us from one fragmentainer and 50px into the next. */ + block-size: 150px; + } + .visible { + block-size: 100px; + background: green; + } + .before-fragmentainer-start { + /* This is before the block-start of a fragmentainer, and should therefore + be clipped by #clipper. */ + margin-block-start: -100px; + block-size: 50px; + background: red; + } + .after-container-end { + block-size: 100px; + background: red; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="multicol"> + <div id="clipper"> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="filler"></div> + <div class="before-fragmentainer-start"></div> + <div class="visible"></div> + <div class="after-container-end"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-003.html b/testing/web-platform/tests/css/css-break/overflow-clip-003.html new file mode 100644 index 0000000000..0d4b2956f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-003.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-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; width:100px; column-fill:auto; height:100px; column-gap:0; background:red;"> + <div style="overflow-x:clip; height:150px;"> + <div style="width:100px; background:red;"> + <div style="width:50px; height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-004.html b/testing/web-platform/tests/css/css-break/overflow-clip-004.html new file mode 100644 index 0000000000..772c4009e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; width:100px; column-fill:auto; height:100px; column-gap:0; background:red;"> + <div style="overflow-y:clip; height:100px;"> + <div style="width:100px; height:100px; background:green;"></div> + <div style="width:100px; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-005.html b/testing/web-platform/tests/css/css-break/overflow-clip-005.html new file mode 100644 index 0000000000..6eec83ad5f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip; height:300px;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-006.html b/testing/web-platform/tests/css/css-break/overflow-clip-006.html new file mode 100644 index 0000000000..526577b7b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-006.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip;"> + <div style="height:300px;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-007.html b/testing/web-platform/tests/css/css-break/overflow-clip-007.html new file mode 100644 index 0000000000..a90cba2f84 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-007.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<div style="position:relative; columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip; height:300px;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div id="target" style="break-before:column; height:10px; background:red;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(target.offsetLeft, 80); + assert_equals(target.offsetTop, 300); + }, "Overflowing and clipped content doesn't fragment"); +</script> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-008.html b/testing/web-platform/tests/css/css-break/overflow-clip-008.html new file mode 100644 index 0000000000..931adc7558 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-008.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="Clipping only in the inline direction shouldn't affect fragmentation"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; width:100px; column-gap:0; column-fill:auto; height:100px; background:red;"> + <div style="overflow-x:clip; height:200px;"> + <div style="width:100px; background:red;"> + <div style="width:25px; height:400px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-009.html b/testing/web-platform/tests/css/css-break/overflow-clip-009.html new file mode 100644 index 0000000000..611d65f595 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-009.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + fieldset { margin:0; border:none; padding:0; height:300px; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip;"> + <fieldset> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-010.html b/testing/web-platform/tests/css/css-break/overflow-clip-010.html new file mode 100644 index 0000000000..87f2cdd800 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-010.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <div style="overflow:clip; background:red;"> + <div style="columns:1; column-gap:0px; column-fill:auto; max-height:300px;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-011.html b/testing/web-platform/tests/css/css-break/overflow-clip-011.html new file mode 100644 index 0000000000..cea0110c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-011.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<meta name="assert" content="The spec says that when breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context. If a container has clipped overflow, and the container ends before the fragmentation line, though, breakable content inside it can never overflow the fragmentainer, and as such, no additional fragmentainers should be generated."> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + fieldset { margin:0; border:none; padding:0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-gap:20px; column-rule:20px solid green; column-fill:auto; width:180px; height:100px;"> + <fieldset style="overflow:clip; max-height:300px;"> + <div style="height:300px; background:green;"></div> + <div style="height:200px; background:red;"></div> + <div style="break-before:column; height:10px; background:red;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-012.html b/testing/web-platform/tests/css/css-break/overflow-clip-012.html new file mode 100644 index 0000000000..0038ce3235 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-012.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + #multicol { + columns: 2; + column-fill: auto; + column-gap: 0px; + height: 100px; + width: 100px; + } + fieldset { + overflow: clip; + margin: 0; + border: none; + padding: 0; + max-height: 200px; + } + fieldset > div { + contain: size; + width: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="multicol"> + <fieldset> + <div style="height:50px;"></div> + <div style="position:absolute; height:50px;"></div> + <div style="height:150px;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-013.html b/testing/web-platform/tests/css/css-break/overflow-clip-013.html new file mode 100644 index 0000000000..31137b58fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-013.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=1342107"> +<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:1; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="overflow:clip; height:100px;"> + <div style="height:200px;"> + <div style="height:100px;"></div> + <div style="position:relative;"> + <div style="position:absolute; width:100px; height:100px; background:red;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-014.html b/testing/web-platform/tests/css/css-break/overflow-clip-014.html new file mode 100644 index 0000000000..4edf112e43 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-014.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1432946"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; width:100px; height:100px; column-fill:auto; background:red;"> + <div style="position:relative; overflow-y:clip; height:200px;"> + <div style="position:absolute; width:100%; height:300px;"> + <div style="height:200px; background:green;"></div> + <div style="height:200px; background:red;"></div> + </div> + <div style="height:1000px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-015.html b/testing/web-platform/tests/css/css-break/overflow-clip-015.html new file mode 100644 index 0000000000..1eb114458c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-015.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=1432946"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; width:100px; height:100px; column-fill:auto; background:red;"> + <div style="position:relative; overflow-y:clip; height:200px;"> + <div style="height:150px;"></div> + <div style="position:absolute; top:0; width:100%; height:300px;"> + <div style="height:200px; background:green;"></div> + <div style="height:200px; background:red;"></div> + </div> + <div style="height:1000px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-016.html b/testing/web-platform/tests/css/css-break/overflow-clip-016.html new file mode 100644 index 0000000000..4314c0135e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-016.html @@ -0,0 +1,16 @@ +<!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=1432946"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; width:100px; height:100px; column-fill:auto; background:red;"> + <div style="position:relative; overflow-y:clip; height:200px;"> + <div style="height:150px;"></div> + <div style="position:absolute; top:-100px; width:100%; height:300px;"> + <div style="height:100px; background:red;"></div> + <div style="height:200px; background:green;"></div> + <div style="height:200px; background:red;"></div> + </div> + <div style="height:1000px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflow-clip-017.html b/testing/web-platform/tests/css/css-break/overflow-clip-017.html new file mode 100644 index 0000000000..1ab3cdd194 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflow-clip-017.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1432946"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:70px; background:green;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:40px; background:green;"></div> + <div style="position:relative; display:flow-root; overflow-y:clip; width:100%; height:90px; background:red;"> + <div style="height:30px; background:green;"></div> + <div style="height:10px;"></div> + <div style="position:absolute; margin-top:-30px; width:100%;"> + <div style="height:20px; background:red;"></div> + <div style="height:60px; background:green;"></div> + <div style="height:20px; background:red;"></div> + </div> + <div style="height:1000px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print-ref.html b/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print-ref.html new file mode 100644 index 0000000000..ad74e1f53d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699605"> +<meta name="flags" content="paged"> +<style> +@page { size:5in 3in; margin:0.5in; } +</style> + +<div style="page-break-after:always"> </div> +<div style="page-break-after:always"> </div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print.html b/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print.html new file mode 100644 index 0000000000..bbc1a40ffe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-abs-pos-with-percentage-height-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699605"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699605"> +<link rel="match" href="overflowed-abs-pos-with-percentage-height-print-ref.html"> +<meta name="flags" content="paged"> +<style> +@page { size:5in 3in; margin:0.5in; } +div.cell { + padding: 5px; + position: relative; +} +div.cell:before { + position: absolute; + width: 5px; + height: calc(100% + 2px); + content: ''; +} +</style> + +<div style="height:50vh"></div> + +<div class="cell"> + <div style="height:50vh"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-000.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-000.html new file mode 100644 index 0000000000..084e16fb38 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-000.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="margin-bottom:-30px; width:50px; height:30px; background:green;"></div> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:70px; margin-top:30px;"> + <div style="height:80px;"> + <div style="height:140px; background:green;"></div> + </div> + <div style="margin-top:-40px; height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-001.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-001.html new file mode 100644 index 0000000000..48d028ecc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-no-room-after-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="margin-bottom:-30px; width:50px; height:30px; background:green;"></div> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:70px; margin-top:30px;"> + <div> + <div style="height:80px;"> + <div style="height:140px; background:green;"></div> + </div> + </div> + <div style="margin-top:-40px; height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-000.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-000.html new file mode 100644 index 0000000000..319f4af077 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-000.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:200px;"> + <div style="height:70px; background:green;"></div> + <div style="height:60px;"></div> + <div style="height:70px; background:green;"></div> + </div> + </div> + <div style="height:30px; background:green;"></div> + <div style="height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-001.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-001.html new file mode 100644 index 0000000000..625f06cb58 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:200px;"> + <div style="height:70px; background:green;"></div> + <div style="height:60px;"></div> + <div style="height:70px; background:green;"></div> + </div> + </div> + <div style="height:60px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-002.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-002.html new file mode 100644 index 0000000000..cb06faec9c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:70px;"> + <div style="height:400px;"> + <div style="height:70px; background:green;"></div> + <div style="height:60px;"></div> + <div style="height:270px; background:green;"></div> + </div> + </div> + <div style="height:60px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-003.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-003.html new file mode 100644 index 0000000000..dfd011109d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div> + <div style="height:70px;"> + <div style="height:200px;"> + <div style="height:70px; background:green;"></div> + <div style="height:60px;"></div> + <div style="height:70px; background:green;"></div> + </div> + </div> + </div> + <div style="height:30px; background:green;"></div> + <div style="height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-004.html b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-004.html new file mode 100644 index 0000000000..ba3d62241f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowed-block-with-room-after-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div> + <div style="height:100px;"> + <div style="height:200px;"> + <div style="height:70px; background:green;"></div> + <div style="height:60px;"></div> + <div style="height:70px; background:green;"></div> + </div> + </div> + </div> + <div style="margin-top:-30px; height:30px; background:green;"></div> + <div style="height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-print-ref.html b/testing/web-platform/tests/css/css-break/overflowing-block-print-ref.html new file mode 100644 index 0000000000..cf345b5963 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-paged"> +<title> + Reference +</title> +<style> + * { + box-sizing: border-box; + margin: 0; + padding: 0; + position: absolute; + left: 0; right: 0; + height: 100%; + } + div { + border: solid orange 10px; + } + div + div { + border: solid transparent 20px; + } + div > div { + border: solid gray 10px; + height: 300%; + } +</style> +<div></div> +<div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/overflowing-block-print.html b/testing/web-platform/tests/css/css-break/overflowing-block-print.html new file mode 100644 index 0000000000..daa9e24f33 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/overflowing-block-print.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<title> + Overflowing content does not affect whether a fixed-height box fits on a page, + but does get printed on the next page. +</title> +<meta name="flags" content="may"> +<link rel="match" href="overflowing-block-print-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<style> + * { + box-sizing: border-box; + margin: 0; + padding: 0; + height: 100%; + } + body { + border: solid orange 10px; + padding: 10px; + } + div { + border: solid gray 10px; + height: 300%; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-break/page-break-legacy-shorthands.html b/testing/web-platform/tests/css/css-break/page-break-legacy-shorthands.html new file mode 100644 index 0000000000..7eaa18f543 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/page-break-legacy-shorthands.html @@ -0,0 +1,75 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Test for the page-break-* legacy shorthands.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-cascade-4/#legacy-shorthand"> +<link rel="help" href="https://drafts.csswg.org/css-break/#page-break-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div></div> +<script> +const NEW_VALUES = ["page", "column"].filter(v => CSS.supports("break-before", v)); +const LEGACY_VALUES = ["always", "auto", "left", "right", "avoid"]; +const LEGACY_MAPPING = { "always": "page" }; +const REVERSE_LEGACY_MAPPING = { "page": "always" }; +const div = document.querySelector("div"); +const cs = getComputedStyle(div); + +test(function() { + for (const property of ["break-before", "break-after"]) { + for (const val of LEGACY_VALUES) { + const mapped_value = LEGACY_MAPPING[val] || val; + + div.style["page-" + property] = val; + + assert_equals(div.style["page-" + property], val); + assert_equals(div.style[property], mapped_value); + assert_equals(cs.getPropertyValue("page-" + property), val); + assert_equals(cs.getPropertyValue(property), mapped_value); + assert_not_equals(div.style.cssText.indexOf(property + ": " + mapped_value + ";"), -1); + assert_equals(div.style.cssText.indexOf("page-" + property), -1, + "Legacy shorthands don't appear in cssText"); + } + } +}, "Legacy values of the shorthands work as expected") + +test(function() { + for (const property of ["break-before", "break-after"]) { + for (const val of NEW_VALUES) { + const mapped_value = REVERSE_LEGACY_MAPPING[val] || ""; + + div.style[property] = val; + + assert_equals(div.style[property], val); + assert_equals(div.style["page-" + property], mapped_value); + assert_equals(cs.getPropertyValue("page-" + property), mapped_value); + assert_equals(cs.getPropertyValue(property), val); + } + } +}, "New values work on the new longhands, but serialize to the empty string in the legacy shorthands"); + +test(function() { + for (const property of ["break-before", "break-after"]) { + for (const val of NEW_VALUES) { + div.style["page-" + property] = ""; + div.style["page-" + property] = val; + assert_equals(div.style["page-" + property], ""); + assert_equals(div.style[property], ""); + assert_equals(cs.getPropertyValue("page-" + property), "auto"); + assert_equals(cs.getPropertyValue(property), "auto"); + } + } +}, "New values of the break longhands don't work on legacy shorthands"); + +// See https://github.com/w3c/csswg-drafts/issues/3332 +test(function() { + for (const property of ["break-before", "break-after"]) { + div.style["page-" + property] = "var(--a)"; + + assert_equals(div.style["page-" + property], "var(--a)"); + assert_equals(div.style[property], ""); + assert_equals(div.style.cssText.indexOf("page-" + property), -1); + } +}, "Legacy shorthands really never appear on cssText, even when there are variable references"); +</script> diff --git a/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-001.html b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-001.html new file mode 100644 index 0000000000..a6391cd9d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-001.html @@ -0,0 +1,12 @@ +<!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=1378039"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; width:100px; column-fill:auto; height:100px; background:red;"> + <div style="max-height:0;"> + <div style="height:150px; contain:size;"></div> + <div style="display:flow-root; margin-bottom:80px;"></div> + </div> + <div style="height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-002.html b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-002.html new file mode 100644 index 0000000000..a308ede37d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-002.html @@ -0,0 +1,12 @@ +<!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=1378039"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; width:100px; column-fill:auto; height:100px; background:red;"> + <div style="max-height:0;"> + <div style="height:150px; contain:size;"></div> + <div style="display:flow-root; margin-bottom:80px;"></div> + </div> + <div style="display:flex; height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-003-crash.html b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-003-crash.html new file mode 100644 index 0000000000..899683d792 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parallel-flow-trailing-margin-003-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=1378039"> +<!DOCTYPE html> +<div style="columns:4; height:10px;"> + <div style="max-height:0;"> + <br> + <ol style="border-top:100px dashed; height:0;"><br></ol> + </div> + <div style="margin-top:1px;"><br></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-computed.html b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-computed.html new file mode 100644 index 0000000000..b84a5522f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().boxDecorationBreak</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break"> +<meta name="assert" content="box-decoration-break computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("box-decoration-break", "slice"); +test_computed_value("box-decoration-break", "clone"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-invalid.html b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-invalid.html new file mode 100644 index 0000000000..6ae1277820 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break"> +<meta name="assert" content="box-decoration-break supports only the grammar 'slice | clone'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("box-decoration-break", "auto"); +test_invalid_value("box-decoration-break", "slice clone"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-valid.html b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-valid.html new file mode 100644 index 0000000000..b52d44393c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/box-decoration-break-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing box-decoration-break with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-box-decoration-break"> +<meta name="assert" content="box-decoration-break supports the full grammar 'slice | clone'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("box-decoration-break", "slice"); +test_valid_value("box-decoration-break", "clone"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-after-computed.html b/testing/web-platform/tests/css/css-break/parsing/break-after-computed.html new file mode 100644 index 0000000000..dfc9a0be27 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-after-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().breakAfter</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after"> +<meta name="assert" content="break-after computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("break-after", "auto"); +test_computed_value("break-after", "avoid"); +test_computed_value("break-after", "avoid-page"); +test_computed_value("break-after", "page"); +test_computed_value("break-after", "left"); +test_computed_value("break-after", "right"); +test_computed_value("break-after", "recto"); +test_computed_value("break-after", "verso"); +test_computed_value("break-after", "avoid-column"); +test_computed_value("break-after", "column"); +test_computed_value("break-after", "avoid-region"); +test_computed_value("break-after", "region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-after-invalid.html b/testing/web-platform/tests/css/css-break/parsing/break-after-invalid.html new file mode 100644 index 0000000000..d46131b8bc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-after-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-after with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after"> +<meta name="assert" content="break-after supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("break-after", "none"); +test_invalid_value("break-after", "avoid region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-after-valid.html b/testing/web-platform/tests/css/css-break/parsing/break-after-valid.html new file mode 100644 index 0000000000..8f7370979b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-after-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-after with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-after"> +<meta name="assert" content="break-after supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("break-after", "auto"); +test_valid_value("break-after", "avoid"); +test_valid_value("break-after", "avoid-page"); +test_valid_value("break-after", "page"); +test_valid_value("break-after", "left"); +test_valid_value("break-after", "right"); +test_valid_value("break-after", "recto"); +test_valid_value("break-after", "verso"); +test_valid_value("break-after", "avoid-column"); +test_valid_value("break-after", "column"); +test_valid_value("break-after", "avoid-region"); +test_valid_value("break-after", "region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-before-computed.html b/testing/web-platform/tests/css/css-break/parsing/break-before-computed.html new file mode 100644 index 0000000000..89baff4b0d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-before-computed.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().breakBefore</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before"> +<meta name="assert" content="break-before computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("break-before", "auto"); +test_computed_value("break-before", "avoid"); +test_computed_value("break-before", "avoid-page"); +test_computed_value("break-before", "page"); +test_computed_value("break-before", "left"); +test_computed_value("break-before", "right"); +test_computed_value("break-before", "recto"); +test_computed_value("break-before", "verso"); +test_computed_value("break-before", "avoid-column"); +test_computed_value("break-before", "column"); +test_computed_value("break-before", "avoid-region"); +test_computed_value("break-before", "region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-before-invalid.html b/testing/web-platform/tests/css/css-break/parsing/break-before-invalid.html new file mode 100644 index 0000000000..f8ea49f2f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-before-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-before with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before"> +<meta name="assert" content="break-before supports only the grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("break-before", "none"); +test_invalid_value("break-before", "avoid region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-before-valid.html b/testing/web-platform/tests/css/css-break/parsing/break-before-valid.html new file mode 100644 index 0000000000..8f38d90f80 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-before-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-before with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-before"> +<meta name="assert" content="break-before supports the full grammar 'auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("break-before", "auto"); +test_valid_value("break-before", "avoid"); +test_valid_value("break-before", "avoid-page"); +test_valid_value("break-before", "page"); +test_valid_value("break-before", "left"); +test_valid_value("break-before", "right"); +test_valid_value("break-before", "recto"); +test_valid_value("break-before", "verso"); +test_valid_value("break-before", "avoid-column"); +test_valid_value("break-before", "column"); +test_valid_value("break-before", "avoid-region"); +test_valid_value("break-before", "region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-inside-computed.html b/testing/web-platform/tests/css/css-break/parsing/break-inside-computed.html new file mode 100644 index 0000000000..ad468943c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-inside-computed.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().breakAfter</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside"> +<meta name="assert" content="break-inside computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("break-inside", "auto"); +test_computed_value("break-inside", "avoid"); +test_computed_value("break-inside", "avoid-page"); +test_computed_value("break-inside", "avoid-column"); +test_computed_value("break-inside", "avoid-region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-inside-invalid.html b/testing/web-platform/tests/css/css-break/parsing/break-inside-invalid.html new file mode 100644 index 0000000000..6cf90b76dc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-inside-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-inside with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside"> +<meta name="assert" content="break-inside supports only the grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("break-inside", "region"); +test_invalid_value("break-inside", "auto avoid"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/break-inside-valid.html b/testing/web-platform/tests/css/css-break/parsing/break-inside-valid.html new file mode 100644 index 0000000000..49b4e5c8ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/break-inside-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing break-inside with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-break-inside"> +<meta name="assert" content="break-inside supports the full grammar 'auto | avoid | avoid-page | avoid-column | avoid-region'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("break-inside", "auto"); +test_valid_value("break-inside", "avoid"); +test_valid_value("break-inside", "avoid-page"); +test_valid_value("break-inside", "avoid-column"); +test_valid_value("break-inside", "avoid-region"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/orphans-computed.html b/testing/web-platform/tests/css/css-break/parsing/orphans-computed.html new file mode 100644 index 0000000000..ba98cd5256 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/orphans-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().orphans</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans"> +<meta name="assert" content="orphans computed value is specified integer."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("orphans", "1"); +test_computed_value("orphans", "234"); +test_computed_value("orphans", "calc(1 + 234)", "235"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/orphans-invalid.html b/testing/web-platform/tests/css/css-break/parsing/orphans-invalid.html new file mode 100644 index 0000000000..e27fd6b29d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/orphans-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing orphans with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans"> +<meta name="assert" content="orphans supports only the grammar '<integer>'."> +<meta name="assert" content="Negative values and zero are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("orphans", "auto"); +test_invalid_value("orphans", "1 234"); +test_invalid_value("orphans", "-234"); +test_invalid_value("orphans", "-1"); +test_invalid_value("orphans", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/orphans-valid.html b/testing/web-platform/tests/css/css-break/parsing/orphans-valid.html new file mode 100644 index 0000000000..996b911af8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/orphans-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing orphans with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-orphans"> +<meta name="assert" content="orphans supports the full grammar '<integer>'."> +<meta name="assert" content="Negative values and zero are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("orphans", "1"); +test_valid_value("orphans", "234"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/widows-computed.html b/testing/web-platform/tests/css/css-break/parsing/widows-computed.html new file mode 100644 index 0000000000..1dfb65c516 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/widows-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: getComputedStyle().widows</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows"> +<meta name="assert" content="widows computed value is specified integer."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("widows", "1"); +test_computed_value("widows", "234"); +test_computed_value("widows", "calc(1 + 234)", "235"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/widows-invalid.html b/testing/web-platform/tests/css/css-break/parsing/widows-invalid.html new file mode 100644 index 0000000000..1fa3ea7055 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/widows-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing widows with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows"> +<meta name="assert" content="widows supports only the grammar '<integer>'."> +<meta name="assert" content="Negative values and zero are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("widows", "auto"); +test_invalid_value("widows", "1 234"); +test_invalid_value("widows", "-234"); +test_invalid_value("widows", "-1"); +test_invalid_value("widows", "0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/parsing/widows-valid.html b/testing/web-platform/tests/css/css-break/parsing/widows-valid.html new file mode 100644 index 0000000000..3930f1b4fb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/parsing/widows-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Fragmentation Module Level 3: parsing widows with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows"> +<meta name="assert" content="widows supports the full grammar '<integer>'."> +<meta name="assert" content="Negative values and zero are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("widows", "1"); +test_valid_value("widows", "234"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-break/reference/border-image-000-ref.html b/testing/web-platform/tests/css/css-break/reference/border-image-000-ref.html new file mode 100644 index 0000000000..70af9921ca --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/border-image-000-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>'box-decoration-break: clone' and 'border-image' (reference)</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .border-image { + font: 81px/1 Ahem; + color: transparent; + border-image: radial-gradient(green 50%, transparent 50%) 27 fill / 27px; + } +</style> +<p>There should be two green circles below.</p> +<div style="width: 81px"> + <span class="border-image">A</span> + <span class="border-image">A</span> +</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-001-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-001-ref.html new file mode 100644 index 0000000000..4f822f8fd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-001-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <!-- + Date created: November 7th 2020 + Last modified: November 17th 2020 + --> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 490px; + + columns: 3 auto; + column-fill: auto; + column-gap: 1em; /* computes to 20px */ + column-rule: blue solid 4px; + + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-block-in-inline-001-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-block-in-inline-001-ref.html new file mode 100644 index 0000000000..c2f4768613 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-block-in-inline-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +.columns { + columns: 3; + column-fill: auto; + line-height: 1; + height: 5em; + orphans: 3; + widows: 3; +} +</style> +<body> + <div class="columns"> + <div> + p1l1<br> + p1l2<br> + p1l3<br> + </div> + <div> + p2l1<br> + p2l2<br> + p2l3<br> + p2l4<br> + p2l5<br> + p2l6<br> + p2l7<br> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-001-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-001-ref.html new file mode 100644 index 0000000000..06108ac800 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Fragmentation level 3 Test Reference File</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> +div { + position: absolute; + columns: 2; + column-fill: balance-all; + column-gap: 0; +} +</style> +<body> + <p>Test passes if there are 4 “X” characters <strong>arranged in a 2 by 2 square</strong> below. + + <div>X<br>X<br>X<br>X</div> +</body> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-008-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-008-ref.html new file mode 100644 index 0000000000..431d37a4b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-008-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 104px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-009-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-009-ref.html new file mode 100644 index 0000000000..77e8bd7b46 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-009-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 104px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-010-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-010-ref.html new file mode 100644 index 0000000000..431d37a4b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-010-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 104px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-011-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-011-ref.html new file mode 100644 index 0000000000..8977e4729c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-011-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 156px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br><br><br><br><br>9<br>10<br>11<br>12<br>13<br>14</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br><br><br><br><br>9<br>10<br>11<br>12<br>13<br>14</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-012-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-012-ref.html new file mode 100644 index 0000000000..a03a7993d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-012-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 208px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br><br><br><br><br>13<br>14<br>15<br>16<br>17<br>18<br>19</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br><br><br><br><br>13<br>14<br>15<br>16<br>17<br>18<br>19</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-013-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-013-ref.html new file mode 100644 index 0000000000..7872ac730b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-013-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 234px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br><br><br><br>16<br>17<br>18<br>19</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br><br><br><br>16<br>17<br>18<br>19</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-014-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-014-ref.html new file mode 100644 index 0000000000..795350a028 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-014-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 234px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-016-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-016-ref.html new file mode 100644 index 0000000000..77e8bd7b46 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-016-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 104px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> diff --git a/testing/web-platform/tests/css/css-break/reference/widows-orphans-017-ref.html b/testing/web-platform/tests/css/css-break/reference/widows-orphans-017-ref.html new file mode 100644 index 0000000000..0a65a50c29 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/reference/widows-orphans-017-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + height: 182px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7</div> + + <div>1<br>2<br>3<br>4<br>5<br>6<br>7</div> diff --git a/testing/web-platform/tests/css/css-break/relpos-inline-hit-testing.html b/testing/web-platform/tests/css/css-break/relpos-inline-hit-testing.html new file mode 100644 index 0000000000..ca0c961ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/relpos-inline-hit-testing.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-break-3/#transforms"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> +<link rel="match" href="relpos-inline-ref.html"> +<style> + body { + margin: 8px; + } + #target { + position: relative; + left: -100px; + top: 100px; + border: 1px solid; + background: hotpink; + } +</style> +<div style="columns:4; column-gap:0; column-fill:auto; line-height:30px; width:600px; height:60px; orphans:1; widows:1;"> + <br><br><br> + <span id="target"> + line1<br> + line2<br> + line3<br> + line4<br> + </span> +</div> +<div id="log" style="margin-top:100px;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { assert_equals(document.elementFromPoint(58, 153), target); }, "line1"); + test(()=> { assert_equals(document.elementFromPoint(208, 123), target); }, "line2"); + test(()=> { assert_equals(document.elementFromPoint(208, 153), target); }, "line3"); + test(()=> { assert_equals(document.elementFromPoint(358, 123), target); }, "line4"); + test(()=> { assert_not_equals(document.elementFromPoint(58, 123), target); }, "Above line1"); + test(()=> { assert_not_equals(document.elementFromPoint(358, 153), target); }, "Below line4"); + test(()=> { assert_not_equals(document.elementFromPoint(158, 48), target); }, "line1 before offsetting"); +</script> diff --git a/testing/web-platform/tests/css/css-break/relpos-inline-ref.html b/testing/web-platform/tests/css/css-break/relpos-inline-ref.html new file mode 100644 index 0000000000..8c19f1cf4c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/relpos-inline-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + span { + position: relative; + left: -100px; + top: 100px; + border: 1px solid; + background:hotpink; + } + .fakecol { + float: left; + width: 150px; + height: 100%; + } +</style> +<div style="line-height:30px; height:60px;"> + <div class="fakecol"></div> + <div class="fakecol"> + <br> + <span style="border-right:none;"> + line1<br> + </span> + </div> + <div class="fakecol"> + <span style="border-left:none; border-right:none;"> + line2<br> + line3<br> + </span> + </div> + <div class="fakecol"> + <span style="border-left:none;"> + line4<br> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/relpos-inline.html b/testing/web-platform/tests/css/css-break/relpos-inline.html new file mode 100644 index 0000000000..a296f0ae7e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/relpos-inline.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> +<link rel="match" href="relpos-inline-ref.html"> +<div style="columns:4; column-gap:0; column-fill:auto; line-height:30px; width:600px; height:60px; orphans:1; widows:1;"> + <br><br><br> + <span style="position:relative; left:-100px; top:100px; border:1px solid; background:hotpink;"> + line1<br> + line2<br> + line3<br> + line4<br> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/remove-inline-child.html b/testing/web-platform/tests/css/css-break/remove-inline-child.html new file mode 100644 index 0000000000..64f4d0b1ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/remove-inline-child.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=1075517"> +<div style="columns:2; column-fill:auto; line-height:20px; height:50px;"> + <div> + <span id="removeme"> + line1<br> + line2<br> + line3<br> + line4<br> + </span> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + document.body.offsetTop; + removeme.style.display = "none"; + }, "no crash"); +</script> diff --git a/testing/web-platform/tests/css/css-break/resumed-float-and-inline-block-crash.html b/testing/web-platform/tests/css/css-break/resumed-float-and-inline-block-crash.html new file mode 100644 index 0000000000..c86034c372 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/resumed-float-and-inline-block-crash.html @@ -0,0 +1,7 @@ +<!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=1249828"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="float:left; width:50px; height:150px;"></div> + <div style="display:inline-block; width:30px; height:10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/rounded-clipped-border-ref.html b/testing/web-platform/tests/css/css-break/rounded-clipped-border-ref.html new file mode 100644 index 0000000000..be08126fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/rounded-clipped-border-ref.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + +<style> + .container { + float: left; + margin: 10px; + text-align: center; + inline-size: fit-content; + } + .multicol { + inline-size: 320px; + block-size: 120px; + border: solid; + background: lightgray; + } + .column { + float: left; + inline-size: 100px; + margin-inline-start: 10px; + } + .column:first-child { + margin-inline-start:0; + } + .clipper { + position: relative; + border-radius: 50px; + border: 20px solid blue; + overflow: clip; + background: red; + } + .clipper.part1 { + block-size: 100px; + border-block-end: none; + border-end-start-radius: 0; + border-end-end-radius: 0; + } + .clipper.part2 { + block-size: 120px; + border-block-start: none; + border-block-end: none; + border-radius: 0; + } + .clipper.part3 { + block-size: 80px; + border-block-start: none; + border-start-start-radius: 0; + border-start-end-radius: 0; + } + .child { + block-size: 300px; + background: yellow; + } +</style> + +<p>In each figure there should be a yellow box with a rounded blue border around + it, split into three columns. There should be no red.</p> + +<div class="container"> + horizontal-tb: + <div class="multicol"> + <div class="column"> + <div class="clipper part1"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part2"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part3"> + <div class="child"></div> + </div> + </div> + </div> +</div> + +<div class="container"> + vertical-rl: + <div class="multicol" style="writing-mode:vertical-rl;"> + <div class="column"> + <div class="clipper part1"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part2"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part3"> + <div class="child"></div> + </div> + </div> + </div> +</div> + +<div class="container"> + vertical-lr: + <div class="multicol" style="writing-mode:vertical-lr;"> + <div class="column"> + <div class="clipper part1"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part2"> + <div class="child"></div> + </div> + </div> + <div class="column"> + <div class="clipper part3"> + <div class="child"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/rounded-clipped-border.html b/testing/web-platform/tests/css/css-break/rounded-clipped-border.html new file mode 100644 index 0000000000..60f4dfd8ba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/rounded-clipped-border.html @@ -0,0 +1,64 @@ +<!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=1433413"> +<link rel="match" href="rounded-clipped-border-ref.html"> +<meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-900"> + +<style> + .container { + float: left; + margin: 10px; + text-align: center; + inline-size: fit-content; + } + .multicol { + columns: 3; + column-fill: auto; + gap: 10px; + inline-size: 320px; + block-size: 120px; + border: solid; + background: lightgray; + } + .clipper { + block-size: 300px; + border-radius: 50px; + border: 20px solid blue; + overflow: clip; + background: red; + } + .child { + block-size: 300px; + background: yellow; + } +</style> + +<p>In each figure there should be a yellow box with a rounded blue border around + it, split into three columns. There should be no red.</p> + +<div class="container"> + horizontal-tb: + <div class="multicol"> + <div class="clipper"> + <div class="child"></div> + </div> + </div> +</div> + +<div class="container"> + vertical-rl: + <div class="multicol" style="writing-mode:vertical-rl;"> + <div class="clipper"> + <div class="child"></div> + </div> + </div> +</div> + +<div class="container"> + vertical-lr: + <div class="multicol" style="writing-mode:vertical-lr;"> + <div class="clipper"> + <div class="child"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/ruby-000.html b/testing/web-platform/tests/css/css-break/ruby-000.html new file mode 100644 index 0000000000..0b4e5ea274 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ruby-000.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-break-3/#breaking-rules"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + ruby div { + display: inline-block; + vertical-align: top; + width: 25px; + background: green; + } + .main { + height: 75px; + } + .annotation { + height: 25px; + } +</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; column-fill:auto; column-gap:0; height:175px; orphans:1; widows:1;"> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/ruby-001.html b/testing/web-platform/tests/css/css-break/ruby-001.html new file mode 100644 index 0000000000..d302bca1c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ruby-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + ruby { + ruby-position: under; + } + ruby div { + display: inline-block; + vertical-align: top; + width: 25px; + background: green; + } + .main { + height: 75px; + } + .annotation { + height: 25px; + } +</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; column-fill:auto; column-gap:0; height:175px; orphans:1; widows:1;"> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + <ruby><div class="main"></div><rt><div class="annotation"></div></rt></ruby><br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/ruby-002.html b/testing/web-platform/tests/css/css-break/ruby-002.html new file mode 100644 index 0000000000..d17cc563f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ruby-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules"> +<link rel="help" href="https://www.w3.org/TR/css-ruby-1/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + ruby.under { + ruby-position: under; + } + ruby div { + display: inline-block; + vertical-align: top; + width: 25px; + background: green; + } + .main { + height: 50px; + } + .annotation { + height: 25px; + } + .filler { + position: absolute; + width: 25px; + height: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:relative; width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; column-gap:0; height:175px; orphans:1; widows:1;"> + <ruby> + <div class="main"></div><rt><div class="annotation"></div></rt> + </ruby><ruby class="under"> + <div class="main"></div><rt><div class="annotation"></div></rt> + </ruby> + <br> + <ruby> + <div class="main"></div><rt><div class="annotation"></div></rt> + </ruby><ruby class="under"> + <div class="main"></div><rt><div class="annotation"></div></rt> + </ruby> + <br> + </div> + <div class="filler" style="left:0; top:75px;"></div> + <div class="filler" style="left:25px; top:0;"></div> + <div class="filler" style="left:50px; top:75px;"></div> + <div class="filler" style="left:75px; top:0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/ruby-003.html b/testing/web-platform/tests/css/css-break/ruby-003.html new file mode 100644 index 0000000000..dc56458dd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/ruby-003.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=1253341"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + .ib { + display: inline-block; + width: 100px; + height: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:1; width:100px; column-fill:auto; height:60px; background:red;"> + <ruby> + <div class="ib"></div> + <rt> + <div class="ib"></div> + </rt> + </ruby> +</div> diff --git a/testing/web-platform/tests/css/css-break/soft-break-before-margin-001.html b/testing/web-platform/tests/css/css-break/soft-break-before-margin-001.html new file mode 100644 index 0000000000..6907c33586 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/soft-break-before-margin-001.html @@ -0,0 +1,16 @@ +<!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=1457515"> +<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; columns:2; gap:0; column-fill:auto; line-height:20px; height:100px; orphans:1; widows:1; background:red;"> + <div style="height:80px; background:green;"></div> + <div style="display:grid;"> + <div> + <span> + <div style="display:inline-block; vertical-align:top; width:100%; height:20px; background:green;"></div> + <div style="margin-top:33px; break-inside:avoid; height:100px; background:green;"></div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/svg-with-transform.html b/testing/web-platform/tests/css/css-break/svg-with-transform.html new file mode 100644 index 0000000000..3aa7facf2d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/svg-with-transform.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=1334213"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:100px; background:green;"></div> + <svg style="position:relative;"> + <rect transform="scale(2)" width="25" height="50" fill="green"/> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-break/table-cell-padding-block-in-inline-crash.html b/testing/web-platform/tests/css/css-break/table-cell-padding-block-in-inline-crash.html new file mode 100644 index 0000000000..745f35ade0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table-cell-padding-block-in-inline-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=1453643"> +<div style="columns:3; column-fill:auto; height:400px;"> + <div style="display:table;"> + <span> + <table style="border-spacing:0; margin-top:16px; line-height:18px;"> + <tr> + <td style="padding:0;"> + <div style="height:300px;"> + Should not freeze or crash. + </div> + </td> + </tr> + <tr> + <td style="padding-top:0; padding-bottom:100px;"><br><br><br><br><br></td> + <td style="padding-top:0; padding-bottom:100px;"><br><br><br></td> + </tr> + </table> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/border-collapse-001.html b/testing/web-platform/tests/css/css-break/table/border-collapse-001.html new file mode 100644 index 0000000000..626935f249 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/border-collapse-001.html @@ -0,0 +1,26 @@ +<!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=1428930"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> + td { padding:0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:200px; height:200px; margin-left:-100px; margin-top:-40px;"> + <table style="border-collapse:collapse;"> + <tr> + <td rowspan="3"></td> + <td><div style="height:100px;"></div></td> + </tr> + <tr> + <td><div style="height:100px;"></div></td> + </tr> + <tr> + <td><div style="height:40px;"></div></td> + </tr> + <tr style="background:red;"> + <td style="border:10px solid green;"><div style="width:35px; height:80px; background:green;"></div></td> + <td style="border:10px solid green;"><div style="width:35px; height:80px; background:green;"></div></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html b/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html new file mode 100644 index 0000000000..67588f28b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/border-spacing-at-breaks.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%; border-spacing:0 10px;"> + <div style="display:table-row;"> + <div style="width:100%; height:85px; background:green;"></div> + </div> + <div style="display:table-row;"> + <div style="width:25px; height:100px; background:green;"> + <div style="margin-left:-25px; width:25px; height:10px; background:green;"></div> + <div style="height:85px;"></div> + <div style="margin-left:-25px; width:25px; height:5px; background:green;"></div> + </div> + </div> + <div style="display:table-row-group;"> + <div style="width:25px; height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/border-spacing.html b/testing/web-platform/tests/css/css-break/table/border-spacing.html new file mode 100644 index 0000000000..fc5e87e35d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/border-spacing.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=534751"> +<style> + .cell > div { background:white; } +</style> +<p>No red should be seen below.</p> +<div id="multicol" style="columns:2; column-fill:auto; height:70px; width:200px; line-height:20px;"> + <div style="position:relative; display:table; border-spacing:10px;"> + <div class="cell" style="display:table-cell; width:30px; background:red;"> + <div id="child1">1<br></div> + <div id="child2">2<br></div> + <div id="child3">3<br></div> + <div id="child4">4<br></div> + <div id="child5">5<br></div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + assert_equals(document.getElementById("child1").offsetTop, 10); + assert_equals(document.getElementById("child1").offsetHeight, 20); + assert_equals(document.getElementById("child2").offsetTop, 30); + assert_equals(document.getElementById("child2").offsetHeight, 20); + assert_equals(document.getElementById("child3").offsetTop, 50); + assert_equals(document.getElementById("child3").offsetHeight, 20); + assert_equals(document.getElementById("child4").offsetTop, 70); + assert_equals(document.getElementById("child4").offsetHeight, 20); + assert_equals(document.getElementById("child5").offsetTop, 90); + assert_equals(document.getElementById("child5").offsetHeight, 20); + }, "Table with border spacing"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html b/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html new file mode 100644 index 0000000000..e9c567d3b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/bottom-padding-repeated-header-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1356236"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="display:table; padding-bottom:101px;"> + <div style="display:table-caption;"></div> + <div style="display:table-header-group; break-inside:avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html b/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html new file mode 100644 index 0000000000..60e0924892 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-after-table-cell-child.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;"> + <div style="background: green; height: 100px; width: 100%; display: table; break-after: avoid;"> + <div style="display: table-cell;"> + <div style="break-after: column;"></div> <!-- Should be propagated to the outer table. --> + </div> + <div style="display: table-cell;"></div> + </div> + <div style="background: green; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html b/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html new file mode 100644 index 0000000000..8f7e1ba1f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-after-table-cell.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;"> + <div style="background: green; height: 100px; width: 100%; display: table; break-after: avoid;"> + <div style="display: table-cell; break-after: column;"></div> <!-- Should be propagated to the outer table. --> + <div style="display: table-cell;"></div> + </div> + <div style="background: green; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html new file mode 100644 index 0000000000..6dc765c82a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. --> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> + <tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr> + </table> + <div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html new file mode 100644 index 0000000000..25c4496e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table> + <tbody> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. --> + </tbody> + <tbody> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> + <tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr> + </tbody> + </table> + <div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html new file mode 100644 index 0000000000..e09eaccfa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-003.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table style="background: green;"> + <tr><td style="height: 50px; width: 50px;"></td></tr> <!-- We should have a column break after this row. --> + <tr><td style="height: 50px; width: 50px;"></td></tr> + <tr><td style="height: 50px; width: 50px; break-before: avoid;"></td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html new file mode 100644 index 0000000000..e8eb516fec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-004.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table> + <tbody><tr><td style="height: 50px; width: 50px; background: green;"></td></tr></tbody> <!-- We should have a column break after this section. --> + <tbody><tr><td style="height: 50px; width: 50px; background: green;"></td></tr></tbody> + <tbody><tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr></tbody> + </table> + <div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html new file mode 100644 index 0000000000..a9d53e2455 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-005.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table> + <tbody> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> <!-- We should have a column break after this row. --> + <tr><td style="height: 50px; width: 50px; background: green;"></td></tr> + </tbody> + <tbody> + <tr><td style="height: 50px; width: 50px; background: green; break-before: avoid;"></td></tr> + </tbody> + </table> + <div style="position: absolute; height: 50px; width: 50px; bottom: 0; left: 0; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html new file mode 100644 index 0000000000..b8dc0f4144 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-006.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; break-inside: avoid; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table style="background: green;"> + <tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody> <!-- We should have a column break after this section. --> + <tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody> + <tbody><tr><td style="height: 50px; width: 50px; break-before: avoid;"></td></tr></tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html new file mode 100644 index 0000000000..4429edb2c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; line-height:20px; height:250px;"> + <div style="display:table-caption;"> + <div style="contain:size; width:50px; height:100px; background:green;"></div> + <div style="contain:size; width:50px; height:100px; background:green;"></div> + </div> + <div style="break-before:avoid;"> + <div style="contain:size; width:10px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html b/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html new file mode 100644 index 0000000000..6250ea7e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-avoidance-in-table-in-grid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="display:grid;"> + <div style="height:100px; background:green;"></div> + <div> + <div style="contain:size; height:40px; background:green;"></div> + </div> + <div> + <div style="display:table; width:100%;"> + <div style="break-before:avoid; contain:size; height:60px; background:green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html b/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html new file mode 100644 index 0000000000..1f10eb59f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-expansion-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table style="background: green;"> + <tr><td style="height: 50px; width: 50px;"></td></tr> <!-- We should have a column break after this row. --> + <tr><td style="height: 100px; width: 50px; break-before: column;"></td></tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html b/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html new file mode 100644 index 0000000000..6c413caa7e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-expansion-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<div style="columns: 2; height: 100px; width: 100px; gap: 0; background: red; position: relative;"> + <table style="background: green;"> + <tbody><tr><td style="height: 50px; width: 50px;"></td></tr></tbody> <!-- We should have a column break after this section. --> + <tbody><tr><td style="height: 100px; width: 50px; break-before: column;"></td></tr></tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html b/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html new file mode 100644 index 0000000000..b277001f4d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-repeated-footer-instead-of-border-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353998"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:70px;"></div> + <div style="display:table; border-bottom:40px solid;"> + <div></div> + <div style="display:table-footer-group; break-inside:avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-second-row.html b/testing/web-platform/tests/css/css-break/table/break-before-second-row.html new file mode 100644 index 0000000000..3a8d307aa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-second-row.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:green;"> + <div style="height:40px;"></div> + <div style="position:relative; z-index:-1; display:table; border-spacing:0 20px; width:100%; background:red;"> + <div style="display:table-row;"> + <br> + </div> + <div style="display:table-row;"> + <div style="height:80px; background:red;"> + <br> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html b/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html new file mode 100644 index 0000000000..3f07edf9ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-table-cell-child.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;"> + <div style="background: green; height: 100px;"></div> + <div style="background: green; height: 100px; width: 100%; display: table; break-before: avoid;"> + <div style="display: table-cell;"></div> + <div style="display: table-cell;"> + <div style="break-before: column;"></div> <!-- Should be propagated to the outer table. --> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html b/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html new file mode 100644 index 0000000000..1d50080f76 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-before-table-cell.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#forced-breaks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns: 2; column-fill: auto; gap: 0; width: 100px; height: 200px;"> + <div style="background: green; height: 100px;"></div> + <div style="background: green; height: 100px; width: 100%; display: table; break-before: avoid;"> + <div style="display: table-cell;"></div> + <div style="display: table-cell; break-before: column;"></div> <!-- Should be propagated to the outer table. --> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html b/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html new file mode 100644 index 0000000000..2982eed1e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-inside-cell-000.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="display:table; width:100%; background:red;"> + <div style="display:table-cell; vertical-align:top; background:green;"> + <br> + </div> + <div style="display:table-cell; vertical-align:top; background:green;"> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html b/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html new file mode 100644 index 0000000000..cd55f46889 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/break-inside-cell-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%; background:red;"> + <div style="display:table-row;"> + <div style="display:table-cell; vertical-align:top; background:green;"> + <br> + <br> + </div> + <div style="display:table-cell; vertical-align:top; background:green;"></div> + </div> + <div style="display:table-row;"> + <div style="display:table-cell; vertical-align:top; background:green;"> + <br> + </div> + <div style="display:table-cell; vertical-align:top; background:green;"> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + <br> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html b/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html new file mode 100644 index 0000000000..edca663567 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-bottom-margin-at-boundary-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1353558"> +<div style="columns:2; column-fill:auto; line-height:20px; height:42px;"> + <div style="display:table-caption; margin-bottom:10px;"> + <br><br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-001.html b/testing/web-platform/tests/css/css-break/table/caption-margin-001.html new file mode 100644 index 0000000000..cb2746ef15 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-caption; margin-top:-30px;"> + <div style="width:50px;"> + <div style="height:30px;"></div> + <div style="height:150px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-002.html b/testing/web-platform/tests/css/css-break/table/caption-margin-002.html new file mode 100644 index 0000000000..3bb06bde1d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="display:table;"> + <div style="display:table-caption;"></div> + <!-- We want a break opportunity before the second caption inside the + table, which is why we need another empty caption before it. --> + <div style="display:table-caption; margin-top:200px; contain:size; width:50px; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-003.html b/testing/web-platform/tests/css/css-break/table/caption-margin-003.html new file mode 100644 index 0000000000..e591c9e058 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table;"> + <div style="display:table-caption; margin-bottom:20px; width:50px; height:50px; background:green;"></div> + <div style="margin-top:-20px; width:50px; height:150px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-004.html b/testing/web-platform/tests/css/css-break/table/caption-margin-004.html new file mode 100644 index 0000000000..5c70c70728 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-004.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="display:table-caption; caption-side:bottom; margin-bottom:50px; width:50px; height:100px; background:green;"></div> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/caption-margin-005.html b/testing/web-platform/tests/css/css-break/table/caption-margin-005.html new file mode 100644 index 0000000000..a77e2d83b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/caption-margin-005.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="height:100px; background:green;"></div> + <div style="background:red;"> + <div style="display:table;"> + <div style="display:table-caption;"></div> + <div style="display:table-caption; margin-top:200px; contain:size; width:50px; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/cell-large-bottom-padding-crash.html b/testing/web-platform/tests/css/css-break/table/cell-large-bottom-padding-crash.html new file mode 100644 index 0000000000..e87df1fe7a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/cell-large-bottom-padding-crash.html @@ -0,0 +1,6 @@ +<!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=1420637"> +<div style="columns:2; height:100px; column-fill:auto;"> + <div style="display:table-cell; padding-bottom:400px;">boo</div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html new file mode 100644 index 0000000000..c57f412016 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1379473"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; height:500px;"> + <div style="display:table-caption; overflow:hidden;"> + <span> + <div style="display:inline-block; width:100px; height:100px; background:red;"> + <div id="target" style="width:0px; height:100px; background:green;"></div> + </div> + + </span> + </div> +</div> +<script> + document.body.offsetTop; + target.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html new file mode 100644 index 0000000000..983f8bb95b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/dynamic-caption-child-change-002-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1379473"> +<div style="columns:2; column-fill:auto; height:500px;"> + <div style="display:table-caption; overflow:hidden;"> + <span> + <div style="display:inline-block;"> + <div id="target"></div> + <div style="width:300px; height:150px;"></div> + </div> + x + </span> + </div> +</div> +<script> + document.body.offsetTop; + target.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html b/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html new file mode 100644 index 0000000000..2e0540d745 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/final-border-spacing-at-fragmentainer-boundary.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p style="position:relative; z-index:1;">Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:flow-root; margin-top:-20px;"> + <div style="position:relative; height:20px; background:white;"></div> + <div style="width:100px; overflow-x:clip;"> + <div style="columns:2; gap:0; column-fill:auto; width:200px; height:100px;"> + <div style="display:table; margin-top:-20px; border-spacing:0 20px; background:red;"> + <div style="width:100px; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/inside-flex-001.html b/testing/web-platform/tests/css/css-break/table/inside-flex-001.html new file mode 100644 index 0000000000..db3064fa8c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/inside-flex-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1403509"> +<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:flex; flex-flow:column;"> + <div style="display:table; width:100%; background:green;"> + <div style="height:60px;"></div> + <div style="break-inside:avoid; height:80px;"></div> + </div> + </div> + <div style="height:20px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-001.tentative.html new file mode 100644 index 0000000000..34487c4327 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-001.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:table; width:100%; height:100px; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-002.tentative.html new file mode 100644 index 0000000000..74b63fb68c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-002.tentative.html @@ -0,0 +1,12 @@ +<!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=1425077"> +<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:1; column-fill:auto; height:60px;"> + <div style="display:table; width:100%; background:green;"> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-003.tentative.html new file mode 100644 index 0000000000..296a309335 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-003.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:table; width:100%; height:200px; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-004.tentative.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-004.tentative.html new file mode 100644 index 0000000000..6f62f433e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-004.tentative.html @@ -0,0 +1,13 @@ +<!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=1425077"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:60px;"> + <div style="display:table; width:100%; background:green;"> + <div style="contain:size; height:100px;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-005.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-005.html new file mode 100644 index 0000000000..7204359ad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-005.html @@ -0,0 +1,26 @@ +<!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=1425077"> +<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> +<!-- Check that monolithic overflow in one cell doesn't mess up the other cell. --> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:green;"> + <div style="display:table; width:100%;"> + <div style="display:table-row;"> + <div style="display:table-cell; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="display:table-cell; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + </div> + <div style="display:table-row;"> + <div style="display:table-cell; width:50%;"> + <div style="contain:size; height:150px;"></div> + </div> + <div style="display:table-cell; width:50%; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/monolithic-overflow-006.html b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-006.html new file mode 100644 index 0000000000..a8ebd11511 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/monolithic-overflow-006.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425077"> +<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> +<!-- Check that monolithic overflow in one table cell doesn't mess up percentage resolution in the other cell. --> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%; height:200px;"> + <div style="display:table-cell; width:50%;"> + <div style="height:100%; background:green;"></div> + </div> + <div style="display:table-cell; width:50%;"> + <div style="contain:size; height:130px;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-001.html b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-001.html new file mode 100644 index 0000000000..7933012cb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-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=1395836"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; height:200px;"> + <div style="display:table;"> + <div style="display:table-cell; vertical-align:bottom;"> + <div style="position:relative; width:50px; height:50px; background:red;"> + <div style="position:absolute; top:0; left:0; width:50px; height:50px; background:green;"></div> + </div> + </div> + <div style="display:table-cell;"> + <div style="height:100px;"> + <div style="width:100px; height:50px; margin-left:-50px; background:green;"></div> + <div style="width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-002.html b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-002.html new file mode 100644 index 0000000000..1b9629c9ed --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-002.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=1395836"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; height:200px;"> + <div style="display:table;"> + <div style="display:table-cell; vertical-align:bottom;"> + <div style="will-change:transform; width:50px; height:50px; background:red;"> + <div style="position:absolute;"> + <div style="position:fixed; top:0; left:0; width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> + <div style="display:table-cell;"> + <div style="height:100px;"> + <div style="width:100px; height:50px; margin-left:-50px; background:green;"></div> + <div style="width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-003.html b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-003.html new file mode 100644 index 0000000000..8d026e42fc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-003.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=1395836"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; height:200px;"> + <div style="display:table;"> + <div style="display:table-cell; vertical-align:bottom;"> + <div style="position:relative; width:50px; height:50px; background:red;"> + <div style="position:absolute; width:50px; height:50px; background:green;"></div> + </div> + </div> + <div style="display:table-cell;"> + <div style="height:100px;"> + <div style="width:100px; height:50px; margin-left:-50px; background:green;"></div> + <div style="width:50px; height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-004.html b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-004.html new file mode 100644 index 0000000000..5805415de7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/oof-in-cell-with-alignment-004.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=1395836"> +<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-row;"> + <div style="display:table-cell; height:150px;"></div> + </div> + <div style="display:table-row;"> + <div style="display:table-cell; vertical-align:bottom;"> + <div style="position:relative; width:50px; height:10px;"> + <div style="position:absolute; bottom:0; width:50px; height:200px; background:green;"></div> + </div> + </div> + <div style="display:table-cell;"> + <div style="height:50px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html b/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html new file mode 100644 index 0000000000..8ed379e5dd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/overflow-scroll-row.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1365306"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:30px; background:green;"></div> + <div style="display:table; width:100%;"> + <!-- The overflow property doesn't apply to table rows. --> + <div style="display:table-row; overflow:scroll; height:170px; background:green;"> + <br> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html b/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html new file mode 100644 index 0000000000..62b3071ae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/overflow-scroll-section.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1365306"> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="height:30px; background:green;"></div> + <div style="display:table; width:100%;"> + <!-- The overflow property doesn't apply to table sections. --> + <div style="display:table-row-group; overflow:scroll; height:170px; background:green;"> + <br> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html new file mode 100644 index 0000000000..6ec70d030d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-in-monolithic.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="position:relative; top:-5px; left:-5px; contain:size; width:50px; height:20px;"> + <div style="position:absolute; top:5px; left:5px; width:50px; height:20px; background:green;"></div> + </div> + </div> + <div style="height:160px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html new file mode 100644 index 0000000000..a7c2eeb5b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word PASS should be seen <em>once</em> below.</p> +PASS diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html new file mode 100644 index 0000000000..e0485816bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained-text.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<link rel="match" href="abspos-uncontained-text-ref.html"> +<p>The word PASS should be seen <em>once</em> below.</p> +<div style="columns:4; column-fill:auto; gap:0; width:100px; height:100px;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="height:20px;"> + <div style="position:absolute;">PASS</div> + </div> + </div> + <div style="width:25px; height:320px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html new file mode 100644 index 0000000000..d8b84ce72e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos-uncontained.tentative.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-fill:auto; gap:0; width:100px; height:100px; overflow:hidden; background:red;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="position:absolute; width:10px; height:20px; background:green;"></div> + <div style="margin-left:10px; width:25px; height:20px; background:green;"></div> + </div> + <div style="width:25px; height:320px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html new file mode 100644 index 0000000000..a7297f1dd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/abspos.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="display:table;"> + <div style="position:relative; display:table-header-group; break-inside:avoid;"> + <div style="height:20px;"> + <div style="position:absolute; width:25px; height:20px; background:green;"></div> + </div> + </div> + <div style="width:25px; height:320px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/background-001.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/background-001.tentative.html new file mode 100644 index 0000000000..2084f4ad31 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/background-001.tentative.html @@ -0,0 +1,13 @@ +<!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=1418818"> +<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:400px;"> + <div style="display:table; width:100%;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="height:100px; background:linear-gradient(green 100px, red 100px);"></div> + </div> + <div style="height:400px;"></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/fixedpos-in-footer-forced-break-print-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/fixedpos-in-footer-forced-break-print-ref.html new file mode 100644 index 0000000000..38dfe20d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/fixedpos-in-footer-forced-break-print-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:100vh;"> + On the first page. +</div> +<div style="height:100vh;"> + On the second page. +</div> +<div style="height:100vh;"> + On the third page. +</div> +On the fourth page.<br> +On every page. + +<div style="position:absolute; bottom:0; height:3em;"> + On every page. +</div> +<div style="position:absolute; bottom:-100vh; height:3em;"> + On every page. +</div> +<div style="position:absolute; bottom:-200vh; height:3em;"> + On every page. +</div> +<div style="position:absolute; bottom:0;"> + At the bottom of every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + At the bottom of every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + At the bottom of every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + At the bottom of every page. +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/fixedpos-in-footer-forced-break-print.html b/testing/web-platform/tests/css/css-break/table/repeated-section/fixedpos-in-footer-forced-break-print.html new file mode 100644 index 0000000000..43a54cbe7d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/fixedpos-in-footer-forced-break-print.html @@ -0,0 +1,25 @@ +<!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=1414682"> +<link rel="match" href="fixedpos-in-footer-forced-break-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:table-row;"> + On the first page. + <div style="break-before:page;"> + On the second page. + </div> + <div style="break-before:page; break-after:page;"> + On the third page. + </div> + On the fourth page. +</div> +<div style="display:table-footer-group; break-inside:avoid;"> + <div style="height:3em;"> + On every page. + </div> + <div style="position:fixed; bottom:0;"> + <div>At the bottom of every page.</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/repeated-section-in-clipped-overflow-001.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-001.tentative.html new file mode 100644 index 0000000000..96cd60286d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-001.tentative.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=1410896"> +<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="height:400px; overflow:clip;"> + <div style="display:table; width:100%;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="height:25px; background:green;"></div> + </div> + <div style="height:500px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-002.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-002.tentative.html new file mode 100644 index 0000000000..b55d8a3890 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-002.tentative.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=1410896"> +<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="height:400px; overflow:clip;"> + <div style="display:table; width:100%;"> + <div style="height:500px; background:green;"></div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="height:25px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-003.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-003.tentative.html new file mode 100644 index 0000000000..794a596fdc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/repeated-section-in-clipped-overflow-003.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1410896"> +<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="height:400px; overflow:clip;"> + <div style="display:table; width:100%;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="height:25px; background:green;"></div> + </div> + <div style="height:500px; background:green;"></div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="height:25px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html new file mode 100644 index 0000000000..469e53460e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/special-elements-crash.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<style> + body { + margin: 0; + } + .table { + display: table; + width: 100%; + } + .header { + display: table-header-group; + break-inside: avoid; + } + .filler { + display: table-row; + break-inside: avoid; + height: 2600px; + } + .header > * { + /* Don't make stuff too tall. We want everything (in the header) to be + within the viewport. */ + height: 10px; + } +</style> +<div style="columns:3; column-fill:auto; width:600px; height:5000px;"> + <div class="table"> + <div class="header"> + <input type="text" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> + <input type="submit" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> + <input type="radio"> + <input type="checkbox"> + <input type="date"> + <input type="range"> + <input type="number"> + <input type="color"> + <input type="password"> + <canvas id="canvas" style="width:40px; height:40px;"></canvas> + <iframe src="data:text/html,<div style='position:absolute; height:200px;'>x</div>" style="width:100px; height:40px;"></iframe> + <div style="overflow:scroll; width:100px; height:30px;"> + <div style="height:200px;"></div> + </div> + <select size="0"><option>xxx</option></select> + <select size="5"><option>xxx</option></select> + <svg style="width:100px; height:30px;"> + <circle cx="20" cy="15" r="7" fill="hotpink"/> + </svg> + <textarea style="width:50px; height:30px;"> + xxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxx + </textarea> + <video style="width:100px; height:50px;" controls></video> + <video style="width:100px; height:50px;"></video> + <meter></meter> + <button>xxxxxx</button> + <fieldset><legend>epic</legend></fieldset> + <!-- The image src is a 1x1 green pixel. --> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII="> + </div> + <div class="filler"></div> + <div class="filler"></div> + <div class="filler"></div> + </div> +</div> +<script> + var ctx = canvas.getContext('2d'); + ctx.fillStyle = "hotpink"; + ctx.fillRect(0, 0, 50, 50); + + function paintDone() { + return new Promise(function(resolve) { + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + resolve(); + }); + }); + }); + } + async function toggleStyles(elements) { + for (const display of ['block', 'inline-block', 'inline']) { + for (const position of ['static', 'relative']) { + for (const cssfloat of ['none', 'left']) { + for (var elm of elements) { + elm.style.display = display; + elm.style.position = position; + elm.style.cssFloat = cssfloat; + } + await paintDone(); + for (var elm of elements) { + var rect = elm.getClientRects()[0]; + var x = rect.left; + var y = rect.top; + x += 2; + y += 2; + document.elementFromPoint(x, y); + document.elementFromPoint(x + 200, y); + document.elementFromPoint(x + 400, y); + } + } + } + } + } + + toggleStyles(document.querySelectorAll(".header > *")); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html b/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html new file mode 100644 index 0000000000..8ded5f5f17 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/tall-monolithic-after-repeated-header.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378576"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> +<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:flow-root; width:100px; height:100px; background:red;"> + <div style="columns:2; column-fill:auto; gap:0; margin-top:-20px; height:100px;"> + <div style="display:table; width:100%;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px;"></div> + </div> + <div style="contain:size; height:100px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html new file mode 100644 index 0000000000..bea1ace1c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be three blue squares and three hotpink ones.</p> +<div style="width:300px;"> + <div style="float:left; width:100px;"> + <div style="width:20px; height:20px; background:blue;"></div> + <div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="float:left; width:100px;"> + <div style="width:20px; height:20px; background:blue;"></div> + <div style="margin-top:60px; width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="float:left; width:100px;"> + <div style="width:20px; height:20px; background:blue;"></div> + <div style="margin-top:10px; width:20px; height:20px; background:hotpink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html new file mode 100644 index 0000000000..f75a8cf216 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<link rel="match" href="variable-fragmentainer-size-001-ref.html"> +<p>There should be three blue squares and three hotpink ones.</p> +<!-- The first two inner fragmentainers are tall enough to allow a 20px tall + table header / footer, but the last one isn't. --> +<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;"> + <div style="columns:1; column-fill:auto; height:250px;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:130px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html new file mode 100644 index 0000000000..b457b1f7ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be one blue square and one hotpink one.</p> +<div style="width:300px;"> + <div style="float:left; width:100px;"> + <div style="margin-top:50px; width:20px; height:20px; background:blue;"></div> + </div> + <div style="float:left; width:100px; height:100px;"></div> + <div style="float:left; width:100px;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html new file mode 100644 index 0000000000..c3aceac5ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<link rel="match" href="variable-fragmentainer-size-002-ref.html"> +<p>There should be one blue square and one hotpink one.</p> +<!-- The first inner fragmentainer isn't tall enough to allow a 20px tall table + header / footer, but the two other fragmentainers are. --> +<div style="columns:3; width:300px; gap:0; column-fill:auto; height:100px;"> + <div style="height:50px;"></div> + <div style="columns:1; column-fill:auto; height:250px;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:130px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html new file mode 100644 index 0000000000..90834c806b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-003-crash.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<!-- All fragmentainers but the first just have room for the repeated headers + and footers, and no room for regular, unrepeated, stuff. We should still + fit 1px of unrepeated content in every fragmentainer, because that should + be a sensible way of interpretating + https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are + assumed to have a minimum block size of 1px"). --> +<div style="margin:100px; columns:4; column-fill:auto; height:40px; background:yellow;"> + <div style="margin-bottom:-60px;"></div> + <div style="columns:1; column-fill:auto; background:lime;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:100px; background:black;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html new file mode 100644 index 0000000000..9c4699da93 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-004-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<!-- Only the first fragmentainer actually has room for repeated headers and + footers. We should still fit 1px of unrepeated content in every + fragmentainer, because that should be a sensible way of interpretating + https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are + assumed to have a minimum block size of 1px"). --> +<div style="margin:100px; columns:4; column-fill:auto; height:30px; background:yellow;"> + <div style="margin-bottom:-60px;"></div> + <div style="columns:1; column-fill:auto; background:lime;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:100px; background:black;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html new file mode 100644 index 0000000000..b17d0cc810 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-005-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<!-- Only the first fragmentainer actually has room for repeated headers and + footers. We should still fit 1px of unrepeated content in every + fragmentainer, because that should be a sensible way of interpretating + https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are + assumed to have a minimum block size of 1px"). --> +<div style="margin:100px; columns:4; column-fill:auto; height:20px; background:yellow;"> + <div style="margin-bottom:-60px;"></div> + <div style="columns:1; column-fill:auto; background:lime;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:100px; background:black;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html new file mode 100644 index 0000000000..1345c6eca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/repeated-section/variable-fragmentainer-size-006-crash.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378294"> +<!-- Only the first fragmentainer actually has room for repeated headers and + footers. We should still fit 1px of unrepeated content in every + fragmentainer, because that should be a sensible way of interpretating + https://www.w3.org/TR/css-break-3/#breaking-rules ("fragmentainers are + assumed to have a minimum block size of 1px"). --> +<div style="margin:100px; columns:4; column-fill:auto; height:10px; background:yellow;"> + <div style="margin-bottom:-60px;"></div> + <div style="columns:1; column-fill:auto; background:lime;"> + <div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:blue;"></div> + </div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="width:20px; height:20px; background:hotpink;"></div> + </div> + <div style="height:100px; background:black;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html new file mode 100644 index 0000000000..909052765b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-000.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<style> + .halfsquare { + margin: -10px; /* Cover the border-spacing. */ + width: 50px; + height: 100px; + background: green; + } +</style> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:200px;"> + <div style="display:table; border-spacing:10px; background:red;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:50px;"> + <div class="halfsquare"></div> + <div style="height:120px;"></div> + <div class="halfsquare" style="position:relative; z-index:-1;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html new file mode 100644 index 0000000000..665f5247ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%;"> + <div style="display:table-footer-group;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:30px; background:green;"></div> + </div> + </div> + <div style="display:table-row-group;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:40px; background:green;"> + <div style="height:70px;"></div> + <div style="height:130px; background:green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html b/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html new file mode 100644 index 0000000000..c6c63abe0e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/section-with-overflow-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%;"> + <div style="display:table-caption; caption-side:bottom;"> + <div style="width:25px; height:40px; background:green;"> + </div> + </div> + <div style="display:table-footer-group;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:240px;"></div> + </div> + </div> + <div style="display:table-caption;"> + <div style="width:25px; height:40px; background:green;"> + <div style="height:220px;"></div> + <div style="height:60px; background:green;"></div> + </div> + </div> + <div style="display:table-row-group;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:40px; background:green;"> + <div style="height:40px;"></div> + <div style="height:100px; background:green;"></div> + </div> + </div> + </div> + <div style="display:table-header-group;"> + <div style="display:table-cell; vertical-align:top;"> + <div style="height:40px; background:green;"> + <div style="height:240px;"></div> + <div style="height:80px; background:green;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html new file mode 100644 index 0000000000..b3265c92c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .fakecolumn { + float: left; + width: 50px; + height: 100px; + background: green; + } +</style> +<p>There should be four columns with the numbers from 1 to 20 in ascending + order. No red should be seen.</p> +<div style="width:200px; line-height:20px;"> + <div class="fakecolumn"> + 1<br> + 2<br> + 3<br> + 4<br> + 5<br> + </div> + <div class="fakecolumn"> + 6<br> + 7<br> + 8<br> + 9<br> + 10<br> + </div> + <div class="fakecolumn"> + 11<br> + 12<br> + 13<br> + 14<br> + 15<br> + </div> + <div class="fakecolumn"> + 16<br> + 17<br> + 18<br> + 19<br> + 20<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html new file mode 100644 index 0000000000..67d20e3a46 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/sections-and-captions-mixed-order.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> +<style> + #table > div { + background: green; + } +</style> +<link rel="match" href="sections-and-captions-mixed-order-ref.html"> +<p>There should be four columns with the numbers from 1 to 20 in ascending + order. No red should be seen.</p> +<div style="columns:4; column-gap:0; column-fill:auto; width:200px; line-height:20px; height:100px; orphans:1; widows:1; background:red;"> + <div id="table" style="display:table; width:100%;"> + <div style="display:table-caption; caption-side:bottom;">14</div> + <div style="display:table-caption;">1</div> + <div style="display:table-footer-group;">8<br>9<br>10<br>11<br>12<br>13</div> + <div style="display:table-row-group;">4</div> + <div style="display:table-row-group;">5<br>6</div> + <div style="display:table-footer-group;">7</div> + <div style="display:table-header-group;">3</div> + <div style="display:table-caption; caption-side:bottom;">15<br>16<br>17<br>18<br>19<br>20</div> + <div style="display:table-caption;">2</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html new file mode 100644 index 0000000000..ad235534be --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="display:table; height:400px; width:100%; background:red;"> + <div style="height:400px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html new file mode 100644 index 0000000000..9605abe343 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; height:400px; width:100%; background:green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html new file mode 100644 index 0000000000..694ef40e3e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; height:300px; width:100%; background:green;"> + <div style="display:table-caption; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html new file mode 100644 index 0000000000..ca436aba67 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; height:300px; width:100%; background:green;"> + <div style="display:table-caption; caption-side:bottom; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html new file mode 100644 index 0000000000..b1528509de --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; height:200px; width:100%; background:green;"> + <div style="display:table-caption; caption-side:top; height:100px; background:green;"></div> + <div style="display:table-caption; caption-side:bottom; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html new file mode 100644 index 0000000000..a78af3faf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; height:300px; width:100%; background:green;"> + <div style="display:table-caption; caption-side:top; height:50px; background:green;"></div> + <div style="display:table-caption; caption-side:bottom; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html new file mode 100644 index 0000000000..28fcfd0a35 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-007-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be four columns. The first one should be yellow, the three + others should be cyan. No red should be seen.</p> +<div style="float:left; width:25px; height:100px; margin-right:10px; background:yellow;"></div> +<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div> +<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div> +<div style="float:left; width:25px; height:100px; margin-right:10px; background:cyan;"></div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html new file mode 100644 index 0000000000..f342e2a8fa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="match" href="specified-block-size-007-ref.html"> +<p>There should be four columns. The first one should be yellow, the three + others should be cyan. No red should be seen.</p> +<div style="columns:4; gap:10px; column-fill:auto; width:130px; height:100px;"> + <div style="display:table; height:400px; width:100%; background:red;"> + <div style="display:table-row; background:yellow;"> + <div style="height:1px;"></div> + </div> + <div style="display:table-row; background:cyan;"> + <div style="height:3px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html b/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html new file mode 100644 index 0000000000..6b4cd11637 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/specified-block-size-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%; height:80px; background:green;"> + <div style="display:table-caption; height:120px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-000.html b/testing/web-platform/tests/css/css-break/table/table-border-000.html new file mode 100644 index 0000000000..1ec0efa299 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-000.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; border:10px green; border-style:solid none; width:100%; background:red;"> + <div style="height:380px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-001.html b/testing/web-platform/tests/css/css-break/table/table-border-001.html new file mode 100644 index 0000000000..97e4ba8daf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; gap:0; column-fill:auto; width:300px; height:100px; margin-left:-100px;"> + <div style="display:table; border:solid green; border-width:10px 0; width:100%; background:red;"> + <div style="display:table-caption;"> + <div style="height:100px;"></div> + <div style="height:20px; background:green;"></div> + </div> + <div> + <div style="height:40px; background:green;"></div> + </div> + <div style="display:table-caption; caption-side:bottom;"> + <div style="height:20px; background:green;"></div> + <div style="height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-002.html b/testing/web-platform/tests/css/css-break/table/table-border-002.html new file mode 100644 index 0000000000..16c2a50395 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; border:solid green; border-width:10px 0; width:100%;"> + <div style="display:table-caption;"> + <div style="height:50px; background:green;"></div> + </div> + <div> + <div style="height:80px; background:green;"></div> + </div> + <div style="display:table-caption; caption-side:bottom;"> + <div style="height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-003.html b/testing/web-platform/tests/css/css-break/table/table-border-003.html new file mode 100644 index 0000000000..26b01599ad --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; border:solid green; border-width:10px 0; width:100%;"> + <div style="display:table-caption;"> + <div style="height:150px; background:green;"></div> + </div> + <div> + <div style="height:180px; background:green;"></div> + </div> + <div style="display:table-caption; caption-side:bottom;"> + <div style="height:150px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-004.html b/testing/web-platform/tests/css/css-break/table/table-border-004.html new file mode 100644 index 0000000000..ed8314f1d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-004.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; border:solid green; border-width:20px 0; width:100%;"> + <div style="display:table-caption;"> + <div style="height:110px; background:green;"></div> + </div> + <div style="display:table-caption; caption-side:bottom;"> + <div style="height:250px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-005.html b/testing/web-platform/tests/css/css-break/table/table-border-005.html new file mode 100644 index 0000000000..3f8efe9d0a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:150px;"> + <div style="display:table; border-top:30px solid red; width:100%;"> + <div style="display:table-caption;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="contain:size; height:70px;"> + <div style="margin-top:-30px; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-006.html b/testing/web-platform/tests/css/css-break/table/table-border-006.html new file mode 100644 index 0000000000..f0ebf25c08 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; height:170px;"> + <div style="display:table; width:100%; border-bottom:30px solid green;"> + <div style="break-inside:avoid; display:table-row;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="break-inside:avoid; display:table-row;"> + <div style="height:70px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html b/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html new file mode 100644 index 0000000000..6f994082e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-007-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a pink table with a black border. The table should be split + into two columns.</p> +<div style="float:left; border:10px solid; border-bottom:none; width:50px; height:90px; margin-right:30px; background:pink;"></div> +<div style="float:left; border:10px solid; border-top:none; width:50px; height:90px; background:pink;"></div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-007.html b/testing/web-platform/tests/css/css-break/table/table-border-007.html new file mode 100644 index 0000000000..66363cd0ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-007.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="table-border-007-ref.html"> +<p>There should be a pink table with a black border. The table should be split + into two columns.</p> +<div style="columns:2; gap:0; column-fill:auto; width:200px; height:100px;"> + <div style="display:table; border:10px solid; height:180px; width:50px; background:pink;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html b/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html new file mode 100644 index 0000000000..01253d3026 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-008-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .fragment { + float: left; + width: 50px; + border: 10px solid; + background: pink; + } +</style> +<p>There should be a pink table box with a black border. The table box should be + split into three columns.</p> +<div class="fragment" style="height:40px; margin-left:100px; margin-top:50px; border-bottom:none;"></div> +<div class="fragment" style="height:100px; margin-left:30px; border-top:none; border-bottom:none;"></div> +<div class="fragment" style="height:40px; margin-left:30px; border-top:none;"></div> diff --git a/testing/web-platform/tests/css/css-break/table/table-border-008.html b/testing/web-platform/tests/css/css-break/table/table-border-008.html new file mode 100644 index 0000000000..6140df1674 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-border-008.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="table-border-008-ref.html"> +<p>There should be a pink table box with a black border. The table box should be + split into three columns.</p> +<div style="columns:6; gap:0; column-fill:auto; width:600px; height:100px;"> + <div style="display:table; border:10px solid; height:180px; width:50px; background:pink;"> + <div style="display:table-caption; caption-side:top; height:150px;"></div> + <div style="display:table-caption; caption-side:bottom; height:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html new file mode 100644 index 0000000000..c41a4a515a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<p>Check that a table caption at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="margin-left:15em; width:10em; line-height:2em; text-align:center;"> + PASS<br> + <div style="height:2em; background:black;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html new file mode 100644 index 0000000000..11984c3ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-fixed-width.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421"> +<link rel="match" href="table-caption-and-cells-fixed-width-ref.html"> +<p>Check that a table caption at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; width:30em; height:9em;"> + <div style="height:8em;"></div> + <table style="height:2em; width:10em; background:black;" cellspacing="0" cellpadding="0"> + <caption>PASS</caption> + <tr> + <td></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html new file mode 100644 index 0000000000..1ca93e64f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<p>Check that a table caption at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="margin-left:50%; width:10em; line-height:2em; text-align:center;"> + PASS<br> + <div style="height:2em; background:black;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html new file mode 100644 index 0000000000..365786f49e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-and-cells.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421"> +<link rel="match" href="table-caption-and-cells-ref.html"> +<p>Check that a table caption at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; height:9em;"> + <div style="height:8em;"></div> + <table style="width:10em; height:2em; background:black;" cellspacing="0" cellpadding="0"> + <caption>PASS</caption> + <tr> + <td></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html b/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html new file mode 100644 index 0000000000..ca210636a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-with-block-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<p>Check that a table caption with a block at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="margin-left:20em; line-height:2em;"> + PASS +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html b/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html new file mode 100644 index 0000000000..1d3aa3317e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-caption-with-block.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=329421"> +<link rel="match" href="table-caption-with-block-ref.html"> +<p>Check that a table caption with a block at a column boundary is properly pushed to the next column.</p> +<p>The word "PASS" should be seen below, fully visible and unbroken.</p> +<div style="columns:2; column-gap:0; column-fill:auto; line-height:2em; width:40em; height:3em;"> + <div style="height:2em;"></div> + <table cellspacing="0" cellpadding="0"> + <caption> + <div>PASS</div> + </caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-border-001.html b/testing/web-platform/tests/css/css-break/table/table-cell-border-001.html new file mode 100644 index 0000000000..062cd9f92e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-border-001.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-break-3/#box-splitting"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1425075"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%;"> + <div style="display:table-cell; border-bottom:50px solid green; background:red;"> + <div style="height:150px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-border-002.html b/testing/web-platform/tests/css/css-break/table/table-cell-border-002.html new file mode 100644 index 0000000000..9aa05f2ace --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-border-002.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-break-3/#box-splitting"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1468664"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="display:table; width:100%;"> + <div style="display:table-cell; border-bottom:50px solid green; background:red;"> + <div style="float:left; width:100%; height:150px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html new file mode 100644 index 0000000000..b10d516787 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <div style="display: table-cell; background: green;"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html new file mode 100644 index 0000000000..6df44aa763 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <div style="display: table-cell; background: green; height: 200px;"> + <div style="width: 50px; height: 200%;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html new file mode 100644 index 0000000000..32e12012ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="border-spacing: 0;"> + <td style="background: green; padding: 0;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html new file mode 100644 index 0000000000..2390e218c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="border-spacing: 0;"> + <tr> + <td><div style="height: 180px;"></div></td> + <td style="background: green;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + <tr> + <td></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html new file mode 100644 index 0000000000..23fcc73e16 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="border-spacing: 0;"> + <tr> + <td><div style="height: 180px;"></div></td> + <td style="background: green;" rowspan="2"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + <tr> + <td style="height: 20px;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html new file mode 100644 index 0000000000..1028664774 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="border-spacing: 0;"> + <td style="background: green; padding: 0; writing-mode: vertical-rl;"> + <div style="min-width: 100px; width: 200%; height: 100px;"></div> + </td> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html new file mode 100644 index 0000000000..bafe31200d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-007.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="background: green; border-spacing: 0;"> + <tr> + <td style="padding: 0;"> + <div style="height: 70px; width: 50px; break-inside: avoid;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html new file mode 100644 index 0000000000..7e4cf16970 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-008.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 50px;"></div> + <div style="height: 10px; break-before: column;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 90px;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html new file mode 100644 index 0000000000..ec34d0b707 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-009.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 2; gap: 0; column-fill: auto; height: 100px; width: 100px; background: red;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 50px;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 10px;"></div> + <div style="height: 100px; width: 50px; break-inside: avoid;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html new file mode 100644 index 0000000000..0e6b849c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-cell-expansion-010.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +table { border-spacing: 0; } +td { padding: 0; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns: 4; gap: 0; column-fill: balance; height: 100px; width: 100px; background: red;"> + <table style="background: green;"> + <tr> + <td> + <div style="height: 10px; width: 25px;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 10px; break-before: column;"></div> + <div style="height: 10px; break-before: column;"></div> + </td> + </tr> + <tr> + <td> + <div style="height: 90px;"></div> + </td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..df7b50c84e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html new file mode 100644 index 0000000000..ea066d1354 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-htb-ltr.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..4c00507249 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to right, lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html new file mode 100644 index 0000000000..ab45d31404 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vlr-rtl.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to right,lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..0fde8bacc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to left, lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html new file mode 100644 index 0000000000..e31d1d4dc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-col-paint-vrl-rtl.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-col-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern1 { + background: repeating-linear-gradient(to left,lime, lime 20px, blue 20px, blue 40px); +} +.pattern2 { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <col class="pattern1"></col> + <col class="pattern2"></col> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html new file mode 100644 index 0000000000..04d643437f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + width: 500px; + height: 100px; + columns: 5; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; height: 150px;"></div> + <div style="height: 35px; border: solid 10px lime; border-bottom-width: 5px; margin-left: 2.5px; margin-right: 2.5px;"></div> + <div style="height: 95px; border: solid black; border-width: 0 10px 5px 15px; margin-right: 2.5px;"> + <div style="border-top: solid lime 5px;"></div> + </div> + <div style="height: 5px; background: black; border-right: solid blue 15px; margin-left: 2.5px;"></div> + <div style="height: 40px; border: solid blue; border-width: 0 15px 10px 10px; margin-left: 2.5px;"></div> + <div style="height: 40px; border: solid blue; border-width: 0 10px 5px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div> + <div style="height: 70px; border: solid blue; border-width: 5px 10px 10px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html new file mode 100644 index 0000000000..0227b571a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-at-boundary-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + width: 500px; + height: 100px; + columns: 5; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; width: 100%;"> + <caption style="background: dodgerblue; height: 150px;"></caption> + <tbody> + <tr style="height: 45px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="height: 100px;"> + <td style="border: solid 10px; border-left-width: 15px;"></td> + </tr> + </tbody> + <tbody> + <tr style="height: 50px;"> + <td style="border: solid blue 10px; border-right-width: 15px;"></td> + </tr> + <tr style="height: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="height: 80px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..1841ff5821 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-top: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-top: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-top: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html new file mode 100644 index 0000000000..60e146296b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-htb-ltr.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..e17497a270 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-left: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-left: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-left: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html new file mode 100644 index 0000000000..d03968ec4d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vlr-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html new file mode 100644 index 0000000000..2721bc0af0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <div style="background: dodgerblue; block-size: 120px;"></div> + <div style="block-size: 40px; border: solid 10px lime;"></div> + <div style="block-size: 135px; border: solid 10px; border-right: none;"></div> + <div style="block-size: 40px; border: solid 10px blue; border-right: none;"></div> + <div style="block-size: 15px; border: solid 10px blue; border-right: none;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html new file mode 100644 index 0000000000..6dff501fec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-collapsed-borders-paint-vrl-ltr.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="match" href="table-collapsed-borders-paint-vrl-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 10px; + padding: 10px; + border: solid 3px; +} +</style> +<div class="multicol"> + <table style="border-collapse: collapse; inline-size: 100%;"> + <caption style="background: dodgerblue; block-size: 120px;"></caption> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid 10px lime;"></td> + </tr> + <tr style="block-size: 145px;"> + <td style="border: solid 10px;"></td> + </tr> + </tbody> + <tbody> + <tr style="block-size: 50px;"> + <td style="border: solid blue 10px;"></td> + </tr> + <tr style="block-size: 25px;"> + <td style="border: solid blue 10px;"></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..5830aa5fd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html new file mode 100644 index 0000000000..e2be9ce16c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-htb-ltr.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..5f069ea053 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html new file mode 100644 index 0000000000..b26363056b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vlr-rtl.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..2080a4e450 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <div style="block-size: 140px; background: lime"></div> + <div class="pattern" style="border: solid 10px; block-size: 225px;"></div> + <div style="block-size: 15px; background: lime"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html new file mode 100644 index 0000000000..0d83c6c402 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-grid-paint-vrl-rtl.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="match" href="table-grid-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 25px, dodgerblue 25px, dodgerblue 50px); +} +</style> +<div class="multicol"> + <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;"> + <caption style="block-size: 140px; background: lime"></caption> + <tbody><td style="padding: 0; block-size: 225px;"></td></tbody> + <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html b/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html new file mode 100644 index 0000000000..363324b225 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-in-abspos-multicol-with-nested-meter-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1351677"> +<p>PASS if no crash or DCHECK failure.</p> +<div style="position:absolute; column-count:1;"> + <table> + <caption> + <meter style="column-count:1;"></meter> + </caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html b/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html new file mode 100644 index 0000000000..5bdc33b521 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-parts-offsetheight.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> +<div style="columns:3; column-fill:auto; height:70px; background:yellow;"> + <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> + <div id="colgroup" style="display:table-column-group;"> + <div id="col" style="display:table-column;"></div> + </div> + <div id="rowgroup" style="display:table-row-group;"> + <div id="row" style="display:table-row;"> + <div id="cell" style="display:table-cell;"> + <div id="content" style="width:100px; height:100px; background:blue;"></div> + </div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { assert_equals(table.offsetHeight, 120); }, "table"); + test(()=> { assert_equals(colgroup.offsetHeight, 100); }, "colgroup"); + test(()=> { assert_equals(col.offsetHeight, 100); }, "col"); + test(()=> { assert_equals(rowgroup.offsetHeight, 100); }, "rowgroup"); + test(()=> { assert_equals(row.offsetHeight, 100); }, "row"); + test(()=> { assert_equals(cell.offsetHeight, 100); }, "cell"); + test(()=> { assert_equals(content.offsetHeight, 100); }, "content"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-lr.tentative.html b/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-lr.tentative.html new file mode 100644 index 0000000000..bdac1f4060 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-lr.tentative.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> +<div + style="column-width:200px; column-gap: 0; column-fill:auto; width:70px; height:600px; background:yellow; writing-mode: vertical-lr;"> + <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> + <div id="colgroup" style="display:table-column-group;"> + <div id="col" style="display:table-column;"></div> + <div id="col2" style="display:table-column;"></div> + </div> + <div id="colgroup2" style="display:table-column-group;"> + <div id="col3" style="display:table-column;"></div> + </div> + <div id="rowgroup" style="display:table-row-group;"> + <div id="row" style="display:table-row;"> + <div id="cell" style="display:table-cell;"> + <div id="content" style="width:100px; height:50px; background:blue;"></div> + </div> + <div id="cell2" style="display:table-cell;"> + <div id="content2" style="width:100px; height:50px; background:blue;"></div> + </div> + <div id="cell3" style="display:table-cell;"> + <div id="content3" style="width:100px; height:50px; background:blue;"></div> + </div> + </div> + <div id="row2" style="display:table-row;"> + <div id="cell4" style="display:table-cell;"> + <div id="content4" style="width:50px; height: 50px; background: blue;"></div> + </div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + assert_equals(table.offsetTop, 8, "offsetTop"); + assert_equals(table.offsetLeft, 8, "offsetLeft"); + assert_equals(table.offsetWidth, 177, "offsetWidth"); + assert_equals(table.offsetHeight, 184, "offsetHeight"); + }, "table"); + test(() => { + assert_equals(colgroup.offsetTop, 18, "offsetTop"); + assert_equals(colgroup.offsetLeft, 18, "offsetLeft"); + assert_equals(colgroup.offsetWidth, 157, "offsetWidth"); + assert_equals(colgroup.offsetHeight, 107, "offsetHeight"); + }, "colgroup"); + test(() => { + assert_equals(col.offsetTop, 18, "offsetTop"); + assert_equals(col.offsetLeft, 18, "offsetLeft"); + assert_equals(col.offsetWidth, 157, "offsetWidth"); + assert_equals(col.offsetHeight, 50, "offsetHeight"); + }, "col"); + test(() => { + assert_equals(col2.offsetTop, 75, "offsetTop"); + assert_equals(col2.offsetLeft, 18, "offsetLeft"); + assert_equals(col2.offsetWidth, 157, "offsetWidth"); + assert_equals(col2.offsetHeight, 50, "offsetHeight"); + }, "col2"); + test(() => { + assert_equals(colgroup2.offsetTop, 132, "offsetTop"); + assert_equals(colgroup2.offsetLeft, 18, "offsetLeft"); + assert_equals(colgroup2.offsetWidth, 157, "offsetWidth"); + assert_equals(colgroup2.offsetHeight, 50, "offsetHeight"); + }, "colgroup2"); + test(() => { + assert_equals(col3.offsetTop, 132, "offsetTop"); + assert_equals(col3.offsetLeft, 18, "offsetLeft"); + assert_equals(col3.offsetWidth, 157, "offsetWidth"); + assert_equals(col3.offsetHeight, 50, "offsetHeight"); + }, "col3"); + test(() => { + assert_equals(rowgroup.offsetTop, 18, "offsetTop"); + assert_equals(rowgroup.offsetLeft, 18, "offsetLeft"); + assert_equals(rowgroup.offsetWidth, 157, "offsetWidth"); + assert_equals(rowgroup.offsetHeight, 164, "offsetHeight"); + }, "rowgroup"); + test(() => { + assert_equals(row.offsetTop, 18, "offsetTop"); + assert_equals(row.offsetLeft, 18, "offsetLeft"); + assert_equals(row.offsetWidth, 100, "offsetWidth"); + assert_equals(row.offsetHeight, 164, "offsetHeight"); + }, "row"); + test(() => { + assert_equals(cell.offsetTop, 18, "offsetTop"); + assert_equals(cell.offsetLeft, 18, "offsetLeft"); + assert_equals(cell.offsetWidth, 100, "offsetWidth"); + assert_equals(cell.offsetHeight, 50, "offsetHeight"); + }, "cell"); + test(() => { + assert_equals(content.offsetTop, 18, "offsetTop"); + assert_equals(content.offsetLeft, 18, "offsetLeft"); + assert_equals(content.offsetWidth, 100, "offsetWidth"); + assert_equals(content.offsetHeight, 50, "offsetHeight"); + }, "content"); + test(() => { + assert_equals(cell2.offsetTop, 75, "offsetTop"); + assert_equals(cell2.offsetLeft, 18, "offsetLeft"); + assert_equals(cell2.offsetWidth, 100, "offsetWidth"); + assert_equals(cell2.offsetHeight, 50, "offsetHeight"); + }, "cell2"); + test(() => { + assert_equals(content2.offsetTop, 75, "offsetTop"); + assert_equals(content2.offsetLeft, 18, "offsetLeft"); + assert_equals(content2.offsetWidth, 100, "offsetWidth"); + assert_equals(content2.offsetHeight, 50, "offsetHeight"); + }, "content2"); + test(() => { + assert_equals(cell3.offsetTop, 132, "offsetTop"); + assert_equals(cell3.offsetLeft, 18, "offsetLeft"); + assert_equals(cell3.offsetWidth, 100, "offsetWidth"); + assert_equals(cell3.offsetHeight, 50, "offsetHeight"); + }, "cell3"); + test(() => { + assert_equals(content3.offsetTop, 132, "offsetTop"); + assert_equals(content3.offsetLeft, 18, "offsetLeft"); + assert_equals(content3.offsetWidth, 100, "offsetWidth"); + assert_equals(content3.offsetHeight, 50, "offsetHeight"); + }, "content3"); + test(() => { + assert_equals(row2.offsetTop, 218, "offsetTop"); + assert_equals(row2.offsetLeft, 55, "offsetLeft"); + assert_equals(row2.offsetWidth, 50, "offsetWidth"); + assert_equals(row2.offsetHeight, 164, "offsetHeight"); + }, "row2"); + test(() => { + assert_equals(cell4.offsetTop, 218, "offsetTop"); + assert_equals(cell4.offsetLeft, 55, "offsetLeft"); + assert_equals(cell4.offsetWidth, 50, "offsetWidth"); + assert_equals(cell4.offsetHeight, 50, "offsetHeight"); + }, "cell4"); + test(() => { + assert_equals(content4.offsetTop, 218, "offsetTop"); + assert_equals(content4.offsetLeft, 55, "offsetLeft"); + assert_equals(content4.offsetWidth, 50, "offsetWidth"); + assert_equals(content4.offsetHeight, 50, "offsetHeight"); + }, "content4"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-rl.tentative.html b/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-rl.tentative.html new file mode 100644 index 0000000000..9d4a472d43 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-parts-offsets-vertical-rl.tentative.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> +<div + style="column-width:200px; column-gap: 0; column-fill:auto; width:70px; height:600px; background:yellow; writing-mode: vertical-rl;"> + <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> + <div id="colgroup" style="display:table-column-group;"> + <div id="col" style="display:table-column;"></div> + <div id="col2" style="display:table-column;"></div> + </div> + <div id="colgroup2" style="display:table-column-group;"> + <div id="col3" style="display:table-column;"></div> + </div> + <div id="rowgroup" style="display:table-row-group;"> + <div id="row" style="display:table-row;"> + <div id="cell" style="display:table-cell;"> + <div id="content" style="width:100px; height:50px; background:blue;"></div> + </div> + <div id="cell2" style="display:table-cell;"> + <div id="content2" style="width:100px; height:50px; background:blue;"></div> + </div> + <div id="cell3" style="display:table-cell;"> + <div id="content3" style="width:100px; height:50px; background:blue;"></div> + </div> + </div> + <div id="row2" style="display:table-row;"> + <div id="cell4" style="display:table-cell;"> + <div id="content4" style="width:50px; height: 50px; background: blue;"></div> + </div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + assert_equals(table.offsetTop, 408, "offsetTop"); + assert_equals(table.offsetLeft, 41, "offsetLeft"); + assert_equals(table.offsetWidth, 177, "offsetWidth"); + assert_equals(table.offsetHeight, 184, "offsetHeight"); + }, "table"); + test(() => { + assert_equals(colgroup.offsetTop, 418, "offsetTop"); + assert_equals(colgroup.offsetLeft, 51, "offsetLeft"); + assert_equals(colgroup.offsetWidth, 157, "offsetWidth"); + assert_equals(colgroup.offsetHeight, 107, "offsetHeight"); + }, "colgroup"); + test(() => { + assert_equals(col.offsetTop, 418, "offsetTop"); + assert_equals(col.offsetLeft, 51, "offsetLeft"); + assert_equals(col.offsetWidth, 157, "offsetWidth"); + assert_equals(col.offsetHeight, 50, "offsetHeight"); + }, "col"); + test(() => { + assert_equals(col2.offsetTop, 475, "offsetTop"); + assert_equals(col2.offsetLeft, 51, "offsetLeft"); + assert_equals(col2.offsetWidth, 157, "offsetWidth"); + assert_equals(col2.offsetHeight, 50, "offsetHeight"); + }, "col2"); + test(() => { + assert_equals(colgroup2.offsetTop, 532, "offsetTop"); + assert_equals(colgroup2.offsetLeft, 51, "offsetLeft"); + assert_equals(colgroup2.offsetWidth, 157, "offsetWidth"); + assert_equals(colgroup2.offsetHeight, 50, "offsetHeight"); + }, "colgroup2"); + test(() => { + assert_equals(col3.offsetTop, 532, "offsetTop"); + assert_equals(col3.offsetLeft, 51, "offsetLeft"); + assert_equals(col3.offsetWidth, 157, "offsetWidth"); + assert_equals(col3.offsetHeight, 50, "offsetHeight"); + }, "col3"); + test(() => { + assert_equals(rowgroup.offsetTop, 418, "offsetTop"); + assert_equals(rowgroup.offsetLeft, 51, "offsetLeft"); + assert_equals(rowgroup.offsetWidth, 157, "offsetWidth"); + assert_equals(rowgroup.offsetHeight, 164, "offsetHeight"); + }, "rowgroup"); + test(() => { + assert_equals(row.offsetTop, 218, "offsetTop"); + assert_equals(row.offsetLeft, 38, "offsetLeft"); + assert_equals(row.offsetWidth, 100, "offsetWidth"); + assert_equals(row.offsetHeight, 164, "offsetHeight"); + }, "row"); + test(() => { + assert_equals(cell.offsetTop, 218, "offsetTop"); + assert_equals(cell.offsetLeft, 38, "offsetLeft"); + assert_equals(cell.offsetWidth, 100, "offsetWidth"); + assert_equals(cell.offsetHeight, 50, "offsetHeight"); + }, "cell"); + test(() => { + assert_equals(content.offsetTop, 218, "offsetTop"); + assert_equals(content.offsetLeft, 38, "offsetLeft"); + assert_equals(content.offsetWidth, 100, "offsetWidth"); + assert_equals(content.offsetHeight, 50, "offsetHeight"); + }, "content"); + test(() => { + assert_equals(cell2.offsetTop, 275, "offsetTop"); + assert_equals(cell2.offsetLeft, 38, "offsetLeft"); + assert_equals(cell2.offsetWidth, 100, "offsetWidth"); + assert_equals(cell2.offsetHeight, 50, "offsetHeight"); + }, "cell2"); + test(() => { + assert_equals(content2.offsetTop, 275, "offsetTop"); + assert_equals(content2.offsetLeft, 38, "offsetLeft"); + assert_equals(content2.offsetWidth, 100, "offsetWidth"); + assert_equals(content2.offsetHeight, 50, "offsetHeight"); + }, "content2"); + test(() => { + assert_equals(cell3.offsetTop, 332, "offsetTop"); + assert_equals(cell3.offsetLeft, 38, "offsetLeft"); + assert_equals(cell3.offsetWidth, 100, "offsetWidth"); + assert_equals(cell3.offsetHeight, 50, "offsetHeight"); + }, "cell3"); + test(() => { + assert_equals(content3.offsetTop, 332, "offsetTop"); + assert_equals(content3.offsetLeft, 38, "offsetLeft"); + assert_equals(content3.offsetWidth, 100, "offsetWidth"); + assert_equals(content3.offsetHeight, 50, "offsetHeight"); + }, "content3"); + test(() => { + assert_equals(row2.offsetTop, 418, "offsetTop"); + assert_equals(row2.offsetLeft, 51, "offsetLeft"); + assert_equals(row2.offsetWidth, 50, "offsetWidth"); + assert_equals(row2.offsetHeight, 164, "offsetHeight"); + }, "row2"); + test(() => { + assert_equals(cell4.offsetTop, 418, "offsetTop"); + assert_equals(cell4.offsetLeft, 51, "offsetLeft"); + assert_equals(cell4.offsetWidth, 50, "offsetWidth"); + assert_equals(cell4.offsetHeight, 50, "offsetHeight"); + }, "cell4"); + test(() => { + assert_equals(content4.offsetTop, 418, "offsetTop"); + assert_equals(content4.offsetLeft, 51, "offsetLeft"); + assert_equals(content4.offsetWidth, 50, "offsetWidth"); + assert_equals(content4.offsetHeight, 50, "offsetHeight"); + }, "content4"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/table-parts-offsets.tentative.html b/testing/web-platform/tests/css/css-break/table/table-parts-offsets.tentative.html new file mode 100644 index 0000000000..265d761ffb --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-parts-offsets.tentative.html @@ -0,0 +1,140 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> +<div style="column-width:200px; column-gap: 0; column-fill:auto; height:70px; width:600px; background:yellow;"> + <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> + <div id="colgroup" style="display:table-column-group;"> + <div id="col" style="display:table-column;"></div> + <div id="col2" style="display:table-column;"></div> + </div> + <div id="colgroup2" style="display:table-column-group;"> + <div id="col3" style="display:table-column;"></div> + </div> + <div id="rowgroup" style="display:table-row-group;"> + <div id="row" style="display:table-row;"> + <div id="cell" style="display:table-cell;"> + <div id="content" style="width:50px; height:100px; background:blue;"></div> + </div> + <div id="cell2" style="display:table-cell;"> + <div id="content2" style="width:50px; height:100px; background:blue;"></div> + </div> + <div id="cell3" style="display:table-cell;"> + <div id="content3" style="width:50px; height:100px; background:blue;"></div> + </div> + </div> + <div id="row2" style="display:table-row;"> + <div id="cell4" style="display:table-cell;"> + <div id="content4" style="width:50px; height: 50px; background: blue;"></div> + </div> + </div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + assert_equals(table.offsetTop, 8, "offsetTop"); + assert_equals(table.offsetLeft, 8, "offsetLeft"); + assert_equals(table.offsetWidth, 184, "offsetWidth"); + assert_equals(table.offsetHeight, 177, "offsetHeight"); + }, "table"); + test(() => { + assert_equals(colgroup.offsetTop, 18, "offsetTop"); + assert_equals(colgroup.offsetLeft, 18, "offsetLeft"); + assert_equals(colgroup.offsetWidth, 107, "offsetWidth"); + assert_equals(colgroup.offsetHeight, 157, "offsetHeight"); + }, "colgroup"); + test(() => { + assert_equals(col.offsetTop, 18, "offsetTop"); + assert_equals(col.offsetLeft, 18, "offsetLeft"); + assert_equals(col.offsetWidth, 50, "offsetWidth"); + assert_equals(col.offsetHeight, 157, "offsetHeight"); + }, "col"); + test(() => { + assert_equals(col2.offsetTop, 18, "offsetTop"); + assert_equals(col2.offsetLeft, 75, "offsetLeft"); + assert_equals(col2.offsetWidth, 50, "offsetWidth"); + assert_equals(col2.offsetHeight, 157, "offsetHeight"); + }, "col2"); + test(() => { + assert_equals(colgroup2.offsetTop, 18, "offsetTop"); + assert_equals(colgroup2.offsetLeft, 132, "offsetLeft"); + assert_equals(colgroup2.offsetWidth, 50, "offsetWidth"); + assert_equals(colgroup2.offsetHeight, 157, "offsetHeight"); + }, "colgroup2"); + test(() => { + assert_equals(col3.offsetTop, 18, "offsetTop"); + assert_equals(col3.offsetLeft, 132, "offsetLeft"); + assert_equals(col3.offsetWidth, 50, "offsetWidth"); + assert_equals(col3.offsetHeight, 157, "offsetHeight"); + }, "col3"); + test(() => { + assert_equals(rowgroup.offsetTop, 18, "offsetTop"); + assert_equals(rowgroup.offsetLeft, 18, "offsetLeft"); + assert_equals(rowgroup.offsetWidth, 164, "offsetWidth"); + assert_equals(rowgroup.offsetHeight, 157, "offsetHeight"); + }, "rowgroup"); + test(() => { + assert_equals(row.offsetTop, 18, "offsetTop"); + assert_equals(row.offsetLeft, 18, "offsetLeft"); + assert_equals(row.offsetWidth, 164, "offsetWidth"); + assert_equals(row.offsetHeight, 100, "offsetHeight"); + }, "row"); + test(() => { + assert_equals(cell.offsetTop, 18, "offsetTop"); + assert_equals(cell.offsetLeft, 18, "offsetLeft"); + assert_equals(cell.offsetWidth, 50, "offsetWidth"); + assert_equals(cell.offsetHeight, 100, "offsetHeight"); + }, "cell"); + test(() => { + assert_equals(content.offsetTop, 18, "offsetTop"); + assert_equals(content.offsetLeft, 18, "offsetLeft"); + assert_equals(content.offsetWidth, 50, "offsetWidth"); + assert_equals(content.offsetHeight, 100, "offsetHeight"); + }, "content"); + test(() => { + assert_equals(cell2.offsetTop, 18, "offsetTop"); + assert_equals(cell2.offsetLeft, 75, "offsetLeft"); + assert_equals(cell2.offsetWidth, 50, "offsetWidth"); + assert_equals(cell2.offsetHeight, 100, "offsetHeight"); + }, "cell2"); + test(() => { + assert_equals(content2.offsetTop, 18, "offsetTop"); + assert_equals(content2.offsetLeft, 75, "offsetLeft"); + assert_equals(content2.offsetWidth, 50, "offsetWidth"); + assert_equals(content2.offsetHeight, 100, "offsetHeight"); + }, "content2"); + test(() => { + assert_equals(cell3.offsetTop, 18, "offsetTop"); + assert_equals(cell3.offsetLeft, 132, "offsetLeft"); + assert_equals(cell3.offsetWidth, 50, "offsetWidth"); + assert_equals(cell3.offsetHeight, 100, "offsetHeight"); + }, "cell3"); + test(() => { + assert_equals(content3.offsetTop, 18, "offsetTop"); + assert_equals(content3.offsetLeft, 132, "offsetLeft"); + assert_equals(content3.offsetWidth, 50, "offsetWidth"); + assert_equals(content3.offsetHeight, 100, "offsetHeight"); + }, "content3"); + test(() => { + assert_equals(row2.offsetTop, 55, "offsetTop"); + assert_equals(row2.offsetLeft, 218, "offsetLeft"); + assert_equals(row2.offsetWidth, 164, "offsetWidth"); + assert_equals(row2.offsetHeight, 50, "offsetHeight"); + }, "row2"); + test(() => { + assert_equals(cell4.offsetTop, 55, "offsetTop"); + assert_equals(cell4.offsetLeft, 218, "offsetLeft"); + assert_equals(cell4.offsetWidth, 50, "offsetWidth"); + assert_equals(cell4.offsetHeight, 50, "offsetHeight"); + }, "cell4"); + test(() => { + assert_equals(content4.offsetTop, 55, "offsetTop"); + assert_equals(content4.offsetLeft, 218, "offsetLeft"); + assert_equals(content4.offsetWidth, 50, "offsetWidth"); + assert_equals(content4.offsetHeight, 50, "offsetHeight"); + }, "content4"); +</script> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html new file mode 100644 index 0000000000..3947dbdada --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-border-1-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr style="border-bottom: 10px solid;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html new file mode 100644 index 0000000000..e5c37cbdcf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-border-2-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table> + <tbody> + <tr style="border-bottom: 10px solid;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html b/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html new file mode 100644 index 0000000000..2fd7feb15d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-end-padding-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336163"> +<div style="columns: 2; height: 1px;"> + <table> + <tbody> + <tr style="padding-bottom: 10px;"> + <td></td> + </tr> + </tbody> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..74e99b0143 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html new file mode 100644 index 0000000000..ecc156bd38 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-htb-ltr.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..587b6c1ee4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html new file mode 100644 index 0000000000..f3d32c9df6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vlr-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..ea81d9bcff --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html new file mode 100644 index 0000000000..a74a952b4b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-row-paint-vrl-rtl.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="match" href="table-row-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tr class="pattern" style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr class="pattern" style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-rowspan-001.html b/testing/web-platform/tests/css/css-break/table/table-rowspan-001.html new file mode 100644 index 0000000000..fe431d79a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-rowspan-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1396218"> +<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; width:100px; gap:0; column-fill:auto; height:100px; background:red;"> + <table cellpadding="0" cellspacing="0"> + <tr> + <td style="width:25px; height:20px; background:green;"></td> + <td style="width:25px; height:20px; background:green;"></td> + </tr> + <tr> + <td rowspan="2" style="background:green;"></td> + <td style="height:20px; background:green;"></td> + </tr> + <tr> + <td style="height:160px; background:green;"></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html new file mode 100644 index 0000000000..75b2078c14 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html new file mode 100644 index 0000000000..ff0eda1be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-htb-ltr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-htb-ltr-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html new file mode 100644 index 0000000000..a2e65520ec --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html new file mode 100644 index 0000000000..1dbdb212ac --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vlr-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-vlr-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-lr; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html new file mode 100644 index 0000000000..bc860a560f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <div style="position: relative; inline-size: 100%; block-size: 400px;"> + <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> + <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> + <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> + <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> + <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html new file mode 100644 index 0000000000..d079c35818 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/table-section-paint-vrl-rtl.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="match" href="table-section-paint-vrl-rtl-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation"> +<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering"> +<style> +body { + writing-mode: vertical-rl; + direction: rtl; +} +.multicol { + inline-size: 400px; + block-size: 100px; + columns: 4; + column-fill: auto; + gap: 0; +} +.pattern { + background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); +} +</style> +<div class="multicol"> + <table style="border-spacing: 10px; inline-size: 100%;"> + <caption style="background: red; block-size: 50px;"></caption> + <tbody class="pattern"> + <tr style="block-size: 110px;"> + <td></td> + <td></td> + </tr> + <tr style="block-size: 135px;"> + <td></td> + <td></td> + </tr> + </tbody> + <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html b/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html new file mode 100644 index 0000000000..1e7ff9b12e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/tall-bottom-aligned-cell-with-bottom-padding.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:20px; background:green;"></div> + <div style="display:table; width:100%;"> + <div style="display:table-cell; vertical-align:bottom; padding-bottom:30px;"> + <div style="height:150px; background:green;"></div> + </div> + </div> + <div style="margin-top:-30px; height:30px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html b/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html new file mode 100644 index 0000000000..2b588586bf --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/tall-padding-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1357123"> +<div style="columns:3; column-fill:auto; height:40px;"> + <div style="height:30px;"></div> + <div style="display:table; padding-top:20px; padding-bottom:100px;"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html b/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html new file mode 100644 index 0000000000..0a93b64275 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/truncated-border-spacing-at-fragmentainer-end.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1368054"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="columns:1; column-fill:auto; width:100px; height:60px; background:red;"> + <div style="display:table; width:100%; border-spacing:40px; background:green;"> + <div style="height:20px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + mc.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html b/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html new file mode 100644 index 0000000000..4feca8344b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/table/zero-height-repeated-footer-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1354141"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:70px;"></div> + <div style="display:table;"> + <div style="height:150px;"></div> + <div style="display:table-footer-group; break-inside:avoid;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-break-inside-avoid-at-start.html b/testing/web-platform/tests/css/css-break/tall-break-inside-avoid-at-start.html new file mode 100644 index 0000000000..6e9ab8bd9f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-break-inside-avoid-at-start.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Cannot break before a child if we're at the block-start of a fragmentainer"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div></div> + <div style="break-inside:avoid; height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-000.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-000.tentative.html new file mode 100644 index 0000000000..7cae4b9393 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-000.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="height:25px; background:red;"> + <div style="contain:size; height:50px; 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/tall-content-inside-constrained-block-001.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-001.tentative.html new file mode 100644 index 0000000000..5584995b00 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-001.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="height:25px; background:red;"> + <div style="background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-002.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-002.tentative.html new file mode 100644 index 0000000000..e92a811b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-002.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="background:red;"> + <div style="height:25px; background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-003.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-003.tentative.html new file mode 100644 index 0000000000..78148780a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-003.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="position:relative;"> + <div style="position:absolute; height:25px; width:100%; background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-004.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-004.tentative.html new file mode 100644 index 0000000000..c44a65841c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-004.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="position:relative; height:25px;"> + <div style="position:absolute; width:100%; background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-005.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-005.tentative.html new file mode 100644 index 0000000000..6e834e78da --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-005.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="transform:translateX(0);"> + <div style="position:relative;"> + <div style="position:absolute"> + <div style="position:fixed; height:25px; width:100%; background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-006.tentative.html b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-006.tentative.html new file mode 100644 index 0000000000..f907e38a2a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-content-inside-constrained-block-006.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6056#issuecomment-951767882"> +<meta name="assert" content=""> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0; column-fill:auto; height:75px;"> + <div style="height:50px; background:green;"></div> + <div style="transform:translateX(0); height:25px;"> + <div style="position:relative;"> + <div style="position:absolute"> + <div style="position:fixed; width:100%; background:red;"> + <div style="contain:size; height:50px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-000.html b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-000.html new file mode 100644 index 0000000000..a5f0218468 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-000.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A float that doesn't fit in the current fragmentainer will be pushed to next fragmentainer, while subsequent content may still fit in the former fragmentainer, without being affected by the float"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="width:100px; background:red;"> + <div style="width:200px;"> + <div style="width:100px; height:50px; background:green;"></div> + <div style="float:left; width:50px; line-height:60px;"><br></div> + <div style="clear:right; width:100px; height:50px; display:flow-root; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-001.html b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-001.html new file mode 100644 index 0000000000..d172f93574 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A float that doesn't fit in the current fragmentainer will be pushed to next fragmentainer, while subsequent content may still fit in the former fragmentainer, without being affected by the float"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; column-gap:0; width:150px; height:100px;"> + <div style="background:red;"> + <div style="width:50px; height:50px; background:green;"></div> + <div style="float:left; width:50px; line-height:70px; background:green;"><br></div> + <div style="float:left; width:50px; line-height:30px; background:green;"><br></div> + <div style="width:50px; height:50px; display:flow-root; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-002.html b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-002.html new file mode 100644 index 0000000000..1ba22353c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="A float that doesn't fit in the current fragmentainer will be pushed to next fragmentainer, while subsequent content may still fit in the former fragmentainer, but it still needs to apply clearance as needed."> +<p>Test passes if there is a filled green square.</p> +<div style="columns:3; column-fill:auto; column-gap:0; width:150px; height:120px;"> + <div style="height:100px; background:green;"></div> + <div style="float:right; width:10px; line-height:100px; background:green;"><br></div> + <div style="float:left; width:40px; line-height:60px; background:green;"><br></div> + <div style="clear:left; height:40px;background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-003.html b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-003.html new file mode 100644 index 0000000000..3e28c5c347 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<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; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="height:100px; background:green;"> + <div style="float:left; break-inside:avoid; width:100%; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-004.html b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-004.html new file mode 100644 index 0000000000..3f4d39fc1c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-float-pushed-to-next-fragmentainer-004.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-break-3/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; columns:5; gap:0; column-fill:auto; height:100px; background:red;"> + <div style="width:1px; font:20px/20px Ahem; color:green;"> + x + <div style="float:left; width:25px; height:200px; break-inside:avoid; background:green;"></div> + x x x x x x x x x x x x x x + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-000.html b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-000.html new file mode 100644 index 0000000000..8e9515c4b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; column-gap:0; width:300px; height:50px;"> + <div style="width:200px; height:0;"> + <div style="height:20px; background:red;"></div> + </div> + <!-- No valid breakpoint here, since the preceding sibling takes up no space + (and its overflowing child ends up in a parallel flow). --> + <div style="height:120px;"> + <!-- Can't break inside lines. Let it overflow the (shorter) fragmentainer, + but not its container. Consume 100px from it. --> + <div style="display:inline-block; vertical-align:top; width:100px; height:100px; background:green;"></div> + </div> + <div style="margin-top:-20px; height:20px; background:white;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-001.html b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-001.html new file mode 100644 index 0000000000..8f74878187 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:50px; background:red;"> + <div> + <div style="display:inline-block; vertical-align:top; width:50px; height:100px; background:green;"></div> + </div> + <!-- We're at the very beginning of the second column here, so inserting a + forced break will have no effect. --> + <div style="break-before:column;"> + <div style="display:inline-block; vertical-align:top; width:50px; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-002.html b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-002.html new file mode 100644 index 0000000000..ee27754963 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/tall-line-in-short-fragmentainer-002.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-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:50px; background:red;"> + <div style="width:50px; height:100px; line-height:200px; background:green;"> + <br> + </div> + <div style="break-before:column; width:50px; line-height:100px; background:green;"> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/trailing-child-margin-000.html b/testing/web-platform/tests/css/css-break/trailing-child-margin-000.html new file mode 100644 index 0000000000..d204483a33 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/trailing-child-margin-000.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-break-3/#break-margins"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; width:100px; column-fill:auto; height:100px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="height:70px; margin-bottom:50px;"></div> + </div> + <!-- We're at the very beginning of the second column here, so inserting a + forced break will have no effect. --> + <div style="break-before:column; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/trailing-child-margin-001.html b/testing/web-platform/tests/css/css-break/trailing-child-margin-001.html new file mode 100644 index 0000000000..7f13b8953d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/trailing-child-margin-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-margins"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; width:100px; column-fill:auto; height:100px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="height:70px; margin-bottom:50px;"></div> + <div style="height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/trailing-child-margin-002.html b/testing/web-platform/tests/css/css-break/trailing-child-margin-002.html new file mode 100644 index 0000000000..3011d23711 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/trailing-child-margin-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-margins"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-gap:0; width:100px; column-fill:auto; height:100px; background:red;"> + <fieldset style="margin:0; border:none; padding:0; background:green;"> + <div style="height:70px; margin-bottom:50px;"></div> + </fieldset> + <div style="break-before:column; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-000.html b/testing/web-platform/tests/css/css-break/transform-000.html new file mode 100644 index 0000000000..7f8bfa8ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-000.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + left: -60px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translateX(60px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-001.html b/testing/web-platform/tests/css/css-break/transform-001.html new file mode 100644 index 0000000000..37985dd3f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + top: -60px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode:vertical-lr; inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translateY(60px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-002.html b/testing/web-platform/tests/css/css-break/transform-002.html new file mode 100644 index 0000000000..10c62cd45c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + top: -60px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode:vertical-rl; inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translateY(60px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-003.html b/testing/web-platform/tests/css/css-break/transform-003.html new file mode 100644 index 0000000000..1879bab383 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + left: -60px; + top: -50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translate(60px, 50px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-004.html b/testing/web-platform/tests/css/css-break/transform-004.html new file mode 100644 index 0000000000..df7e92ac5d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + left: -60px; + top: -50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode:vertical-lr; inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translate(60px, 50px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-005.html b/testing/web-platform/tests/css/css-break/transform-005.html new file mode 100644 index 0000000000..83f674f8fd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .relpos { + position: relative; + left: -60px; + top: -50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="writing-mode:vertical-rl; inline-size:100px; block-size:100px; columns:4; column-fill:auto; column-gap:0; background:red;"> + <div style="block-size:50px; background:green;"></div> + <div style="will-change:transform; transform:translate(60px, 50px);"> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:100px;"></div> + <div class="relpos" style="block-size:150px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-006-ref.html b/testing/web-platform/tests/css/css-break/transform-006-ref.html new file mode 100644 index 0000000000..ffb859017d --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-006-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .transformed { + transform: rotate(25deg); + transform-origin: bottom right; + background: hotpink; + } + .child { + margin-left: auto; + width: 50px; + background: lime; + } + .fake-column { + float: left; + width: 100px; + height: 100px; + } + .fake-column:not(:last-child) { + margin-right: 20px; + } +</style> +<div style="width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;"> + <div class="fake-column"> + <div class="transformed" style="margin-top:50px; height:50px;"> + <div class="child" style="height:50px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:100px;"> + <div class="child" style="height:100px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:25px;"> + <div class="child" style="height:100px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:0;"> + <div class="child" style="height:50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-006.html b/testing/web-platform/tests/css/css-break/transform-006.html new file mode 100644 index 0000000000..eb0500318b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<meta name="assert" content="Test that transform-origin is calculated correctly and individually for each fragment, also when the transform-establishing element is overflowed."> +<link rel="match" href="transform-006-ref.html"> +<style> + .transformed { + transform: rotate(25deg); + transform-origin: bottom right; + background: hotpink; + } + .child { + margin-left: auto; + width: 50px; + background: lime; + } +</style> +<div style="columns:4; column-fill:auto; width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;"> + <div class="transformed" style="margin-top:50px; height:175px;"> + <div class="child" style="height:300px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-007-ref.html b/testing/web-platform/tests/css/css-break/transform-007-ref.html new file mode 100644 index 0000000000..50599b119a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-007-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .transformed { + will-change: transform; + transform: rotate(25deg); + transform-origin: bottom right; + background: hotpink; + } + .child { + margin-left: auto; + width: 50px; + background: lime; + } + .fake-column { + float: left; + width: 100px; + height: 100px; + } + .fake-column:not(:last-child) { + margin-right: 20px; + } +</style> +<div style="width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;"> + <div class="fake-column"> + <div class="transformed" style="margin-top:50px; height:50px;"> + <div class="child" style="height:50px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:100px;"> + <div class="child" style="height:100px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:25px;"> + <div class="child" style="height:100px;"></div> + </div> + </div> + <div class="fake-column"> + <div class="transformed" style="height:0;"> + <div class="child" style="height:50px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-007.html b/testing/web-platform/tests/css/css-break/transform-007.html new file mode 100644 index 0000000000..22b8276f28 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<meta name="assert" content="Test that transform-origin is calculated correctly and individually for each fragment, also when the transform-establishing element is overflowed."> +<link rel="match" href="transform-007-ref.html"> +<style> + .transformed { + will-change: transform; + transform: rotate(25deg); + transform-origin: bottom right; + background: hotpink; + } + .child { + margin-left: auto; + width: 50px; + background: lime; + } +</style> +<div style="columns:4; column-fill:auto; width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;"> + <div class="transformed" style="margin-top:50px; height:175px;"> + <div class="child" style="height:300px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-008-ref.html b/testing/web-platform/tests/css/css-break/transform-008-ref.html new file mode 100644 index 0000000000..2a16079545 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-008-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .fakecolumn { + width: 100px; + height: 100px; + } + .relpos { + position: relative; + top: 50px; + left: 50px; + width: 50px; + } + .transform { + transform: rotate(45deg); + height: 100%; + } + .abspos { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Below there should be two green squares, and one green rectangle between + them. They should all be rotated.</p> +<div style="display:flex;"> + <div class="fakecolumn"> + <div class="relpos" style="margin-top:50px; height:50px;"> + <div class="transform"> + <div class="abspos"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos" style="height:100px;"> + <div class="transform"> + <div class="abspos"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos" style="height:50px;"> + <div class="transform"> + <div class="abspos"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-008.html b/testing/web-platform/tests/css/css-break/transform-008.html new file mode 100644 index 0000000000..b3b80d72d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-008.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="transform-008-ref.html"> +<style> + .relpos { + position: relative; + top: 50px; + left: 50px; + width: 50px; + } + .transform { + transform: rotate(45deg); + height: 200px; + } + .abspos { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Below there should be two green squares, and one green rectangle between + them. They should all be rotated.</p> +<div style="columns:3; column-gap:0; column-fill:auto; width:300px; height:100px;"> + <div class="relpos" style="margin-top:50px;"> + <div class="transform"> + <div class="abspos"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-009-ref.html b/testing/web-platform/tests/css/css-break/transform-009-ref.html new file mode 100644 index 0000000000..d7d3ebf604 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-009-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<style> + .fakecolumn { + width: 100px; + height: 100px; + } + .relpos { + position: relative; + width: 30px; + top: 50px; + left: 50px; + } + .transform { + transform: rotate(45deg); + height: 100%; + } + .abspos { + position: absolute; + width: 100%; + height: 100%; + background: green; + } +</style> +<p>Below there should be six rotated green rectangles (not all with the same + size).</p> +<div style="display:flex;"> + <div class="fakecolumn"> + <div class="relpos" style="margin-top:50px;"> + <div class="transform" style="height:0;"> + <div class="abspos" style="height:50px;"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos"> + <div class="transform" style="height:0;"> + <div class="abspos" style="height:100px;"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos" style="margin-top:50px;"> + <div class="transform" style="height:50px;"> + <div class="abspos" style="top:-50px; height:100px;"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos"> + <div class="transform" style="height:100px;"> + <div class="abspos"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos"> + <div class="transform" style="height:0;"> + <div class="abspos" style="height:100px;"></div> + </div> + </div> + </div> + <div class="fakecolumn"> + <div class="relpos"> + <div class="transform" style="height:0;"> + <div class="abspos" style="height:50px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-009.html b/testing/web-platform/tests/css/css-break/transform-009.html new file mode 100644 index 0000000000..f0653f7976 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-009.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="match" href="transform-009-ref.html"> +<style> + .relpos { + position: relative; + width: 30px; + top: 50px; + left: 50px; + } + .transform { + transform: rotate(45deg); + height: 150px; + } + .abspos { + position: absolute; + width: 100%; + height: 500px; + top: -200px; + background: green; + } +</style> +<p>Below there should be six rotated green rectangles (not all with the same + size).</p> +<div style="columns:5; column-gap:0; column-fill:auto; width:500px; height:100px;"> + <div style="height:250px;"></div> + <div class="relpos"> + <div class="transform"> + <div class="abspos"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-010.html b/testing/web-platform/tests/css/css-break/transform-010.html new file mode 100644 index 0000000000..8418551cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-010.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-break/#transforms"> +<div id="container" style="width:300px; overflow-x:scroll;"> + <div style="columns:3; column-gap:0; column-fill:auto; height:100px;"> + <div> + <div id="target" style="transform:translateX(0); width:100px; height:150px;"></div> + </div> + </div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + // We have three columns. The column width is 100px. + // #target occurs in the first two columns. + assert_equals(container.scrollWidth, 300); + + // This shouldn't affect the size of the scrollable area, since everything + // still fits within the scrollport. + target.style.transform = "translateX(100px)"; + assert_equals(container.scrollWidth, 300); + + // #target should now overflow the scrollport. + target.style.transform = "translateX(200px)"; + assert_equals(container.scrollWidth, 400); + + // Check that we're not stuck with the overflow. + target.style.transform = "translateX(100px)"; + assert_equals(container.scrollWidth, 300); + }, "Changing a transformed element should update overflow area."); +</script> diff --git a/testing/web-platform/tests/css/css-break/transform-011.html b/testing/web-platform/tests/css/css-break/transform-011.html new file mode 100644 index 0000000000..58008e509e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-011.html @@ -0,0 +1,16 @@ +<!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=1442522"> +<div id="container" style="overflow:auto; width:100px; height:100px;"> + <div style="columns:5; gap:0; column-fill:auto; height:100px;"> + <div style="transform:rotate(180deg); height:500px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(container.scrollHeight, 100); + assert_equals(container.scrollWidth, 100); + }, "Rotating 180 degrees with transform origin at the center"); +</script> diff --git a/testing/web-platform/tests/css/css-break/transform-012.html b/testing/web-platform/tests/css/css-break/transform-012.html new file mode 100644 index 0000000000..4156aff629 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-012.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-break-3/#transforms"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> +<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:3; margin-top:100px; margin-left:-50px; column-fill:auto; gap:0; width:150px; height:100px;"> + <div style="transform:rotate(180deg); transform-origin:bottom center; height:77px;"> + <div style="position:absolute; top:100px; width:100%; height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-013.html b/testing/web-platform/tests/css/css-break/transform-013.html new file mode 100644 index 0000000000..31cce10b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-013.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> +<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:3; margin-top:100px; column-fill:auto; gap:0; width:150px; height:100px;"> + <div style="transform:rotate(180deg); transform-origin:bottom left; height:120px;"> + <div style="position:absolute; top:100px; width:100%;"> + <!-- The containing block (the transformed element) takes up 20px in the + second column. To compensate for the 180 degree rotation with a + transform origin at the bottom, move the green rectangle by the + double. --> + <div style="position:relative; top:40px; height:100px; background:green;"></div> + <!-- The containing block doesn't exist in third column, meaning that the + block-size of the non-existing fragment is 0. --> + <div style="height:100px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-014.html b/testing/web-platform/tests/css/css-break/transform-014.html new file mode 100644 index 0000000000..16fc15d760 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-014.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-break-3/#transforms"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> +<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; writing-mode:vertical-rl; width:100px; height:100px; background:red;"> + <div style="columns:3; column-fill:auto; gap:0; inline-size:150px; block-size:100px; margin-block-start:100px; margin-inline-start:-50px;"> + <div style="transform:rotate(180deg); transform-origin:middle left; block-size:77px;"> + <div style="position:absolute; inset-block-start:100px; inline-size:100%; block-size:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-015.html b/testing/web-platform/tests/css/css-break/transform-015.html new file mode 100644 index 0000000000..676c291b6e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-015.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=1371426"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:5; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="transform:scale(10); transform-origin:top left;"> + <div style="position:absolute;"> + <div style="width:2px; height:10px; background:green;"></div> + <div style="height:90px;"></div> + <div style="width:2px; height:10px; background:green;"></div> + <div style="height:90px;"></div> + <div style="width:2px; height:10px; background:green;"></div> + <div style="height:90px;"></div> + <div style="width:2px; height:10px; background:green;"></div> + <div style="height:90px;"></div> + <div style="width:2px; height:10px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-016.html b/testing/web-platform/tests/css/css-break/transform-016.html new file mode 100644 index 0000000000..5a10d860c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-016.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1371426"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container" style="columns:2; gap:0; column-fill:auto; width:101px; height:100px; background:red;"> + <div style="transform:rotate(180deg); height:100px; background:green;"> + <div style="position:absolute; width:100%; transform:translateY(-100px); top:100px; height:100px; background:green;"></div> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + container.style.width = "100px"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/transform-017.html b/testing/web-platform/tests/css/css-break/transform-017.html new file mode 100644 index 0000000000..b01e3ccee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-017.html @@ -0,0 +1,13 @@ +<!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=1442211"> +<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:1; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px;"></div> + <div style="transform:scaleY(2); transform-origin:bottom; width:100px; height:50px;"> + <div style="position:absolute; top:150px;"> + <div style="position:absolute; top:-150px; width:100px; height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-018.html b/testing/web-platform/tests/css/css-break/transform-018.html new file mode 100644 index 0000000000..dc9a791e6a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-018.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211"> +<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; position:relative; width:100px; height:100px; background:red;"> + <div style="position:absolute; width:25%; height:40px; background:green;"></div> + <div style="position:absolute; right:0; top:0; width:25%; height:30px; background:green;"></div> + <div style="position:absolute; right:0; bottom:0; width:25%; height:30px; background:green;"></div> + <div style="margin-top:50px; columns:4; gap:0; column-fill:auto; height:50px;"> + <div style="height:20px;"></div> + <div style="transform:scaleY(2); transform-origin:bottom; height:150px;"> + <div> + <div style="position:absolute; width:100%; height:100%; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-019.html b/testing/web-platform/tests/css/css-break/transform-019.html new file mode 100644 index 0000000000..758ff713ba --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-019.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=1442211"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px;"> + <div style="height:150px; background:green;"></div> + </div> + <div style="transform:scaleY(2); transform-origin:bottom; width:50px; height:100px;"> + <div> + <div style="position:absolute; top:100px; width:50px; height:25px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-020.html b/testing/web-platform/tests/css/css-break/transform-020.html new file mode 100644 index 0000000000..e15df5f734 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-020.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211"> +<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; position:relative; width:100px; height:100px; background:red;"> + <div style="position:absolute; width:25%; height:50px; background:green;"></div> + <div style="position:absolute; right:0; width:25%; height:50px; background:green;"></div> + <div style="columns:4; margin-top:50px; gap:0; column-fill:auto; width:100px; height:50px;"> + <div style="position:relative; height:50px; background:green;"> + <div style="position:absolute; transform:scaleY(2); transform-origin:bottom; top:50px; width:100%; height:100px;"> + <div> + <div style="position:absolute; top:50px; width:100%; height:75px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/transform-021.html b/testing/web-platform/tests/css/css-break/transform-021.html new file mode 100644 index 0000000000..c97ef30b7f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/transform-021.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=1442211"> +<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; position:relative; width:100px; height:100px; background:red;"> + <div style="position:absolute; width:25%; height:50px; background:green;"></div> + <div style="position:absolute; right:0; width:25%; height:50px; background:green;"></div> + <div style="columns:4; margin-top:50px; gap:0; column-fill:auto; width:100px; height:50px;"> + <div style="position:relative; height:50px; background:green;"> + <div style="position:absolute; transform:scaleY(2); transform-origin:bottom; top:50px; width:100%; height:100px;"> + <div style="position:absolute; top:50px; width:100%; height:75px; background:green;"></div> + <div style="height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-001.html b/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-001.html new file mode 100644 index 0000000000..cfb8590f90 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1368054"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="columns:1; column-fill:auto; width:100px; height:60px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="margin-bottom:40px; height:60px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + mc.style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-002.html b/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-002.html new file mode 100644 index 0000000000..1539927dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/truncated-margin-at-fragmentainer-end-002.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=1368054"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:1; column-fill:auto; width:100px; height:100px; background:red;"> + <div id="child" style="height:40px;"></div> + <div style="display:flow-root; background:green;"> + <div style="margin-bottom:40px; height:60px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + child.style.height = "0"; +</script> diff --git a/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-000-crash.html b/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-000-crash.html new file mode 100644 index 0000000000..4d301e4977 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-000-crash.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285743"> + <div style="columns:2; line-height:20px;"> + <div id="b" style="height:20px; column-fill:auto;"> + <br> + <span> + x + <div id="c" style="position:absolute; top:0; left:0; width:10px; column-fill:auto; height:40px;"> + <br><br><br><br><br> + </div> + </span> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + b.style.columns = "2"; + c.style.columns = "3"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-001-crash.html b/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-001-crash.html new file mode 100644 index 0000000000..37b8d3504a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/uncontained-oof-in-inline-after-break-001-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285743"> +<div style="columns:2; column-fill:auto; height:20px; line-height:20px; orphans:1; widows:1;"> + <br> + <br> + <span> + <div style="position:absolute;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-break/underflow-from-next-page-print-ref.html b/testing/web-platform/tests/css/css-break/underflow-from-next-page-print-ref.html new file mode 100644 index 0000000000..5c444b7220 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/underflow-from-next-page-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<p>The word PASS should be seen below.</p> +<div style="position:absolute; top:50vh;">PASS</div> +<div style="break-before:page;"><br></div> diff --git a/testing/web-platform/tests/css/css-break/underflow-from-next-page-print.html b/testing/web-platform/tests/css/css-break/underflow-from-next-page-print.html new file mode 100644 index 0000000000..57fd12a831 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/underflow-from-next-page-print.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=1401085"> +<link rel="match" href="underflow-from-next-page-print-ref.html"> +<style> + body { margin: 0; } +</style> +<p>The word PASS should be seen below.</p> +<div style="break-before:page; margin-top:-50vh;">PASS</div> diff --git a/testing/web-platform/tests/css/css-break/wide-line-after-floats-crash.html b/testing/web-platform/tests/css/css-break/wide-line-after-floats-crash.html new file mode 100644 index 0000000000..c2ced71e19 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/wide-line-after-floats-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1249769"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="float:left; width:50px; height:250px;"></div> + <br> + <div style="display:inline-block; width:100%; height:10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-break/widows-001.html b/testing/web-platform/tests/css/css-break/widows-001.html new file mode 100644 index 0000000000..d3b3af6ff0 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-001.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-001-ref.html"> + + <!-- + Date created: November 7th 2020 + Last modified: November 17th 2020 + --> + + <!-- + + Bug 1562420: Implement orphans and widows for individual columns of a multicolumn element + https://bugzilla.mozilla.org/show_bug.cgi?id=1562420 + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be adjusted and fragmented in accordance with the 'widows' declaration. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point is allowed and should occur before the last line box of the 2nd column box and after the next-to-last line box of the 2nd column box so that there is a minimum of 2 line boxes at the top of the 3rd column box."> + + <!-- + + Breaking at a class B break point is allowed only if (...) + the number of line boxes between the break and the end + of the box is the value of widows or more. + 4.4 Unforced Breaks + https://www.w3.org/TR/css-break-3/#unforced-breaks + + --> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 490px; + + columns: 3 auto; + column-fill: auto; + column-gap: 1em; + column-rule: blue solid 4px; + } + + div#test + { + widows: 2; /* widows' initial value is 2 */ + + /* + "The widows property specifies the minimum number of line boxes of a + block container that must be left in a fragment <em>after</em> a + column break." + + coming from + CSS Fragmentation Module Level 3, section 3.3 Breaks Between Lines: orphans, widows + https://www.w3.org/TR/css-break-3/#widows-orphans + */ + } + + div#reference + { + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <!-- Same as div#test except 1 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-block-in-inline-001.html b/testing/web-platform/tests/css/css-break/widows-block-in-inline-001.html new file mode 100644 index 0000000000..8b5438bbc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-block-in-inline-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Fragmentation level 3 Test: widows and orphans in block-in-inline</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="match" href="reference/widows-block-in-inline-001-ref.html"> +<style> +.columns { + columns: 3; + column-fill: auto; + line-height: 1; + height: 5em; + orphans: 3; + widows: 3; +} +</style> +<body> + <div class="columns"> + <div> + p1l1<br> + p1l2<br> + p1l3<br> + </div> + <span> + <div> + p2l1<br> + p2l2<br> + p2l3<br> + p2l4<br> + p2l5<br> + p2l6<br> + p2l7<br> + </div> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-001.html b/testing/web-platform/tests/css/css-break/widows-orphans-001.html new file mode 100644 index 0000000000..b21146d12e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Fragmentation level 3 Test: widows and block level boxes</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="match" href="reference/widows-orphans-001-ref.html"> +<meta name="assert" content="The widows property has no effect on block container boxes that contains only block-level boxes."> +<style> +div p { margin: 0; } + +div { + columns: 2; + column-gap: 0; + position: absolute; /* shrinkwrap. Using an explicit width in 'ch' with a monospace font would be fine as well if all UAs supported 'ch', but some don't. */ + column-fill: balance-all; /* to make sure it balances as well on paged media */ + + widows: 4; +} + +/* If the property applied to block container boxes that contain block-level boxes, + it would force the two two-line paragraphs to stick together.*/ + +</style> +<body> + <p>Test passes if there are 4 “X” characters <strong>arranged in a 2 by 2 square</strong> below. + + <div> + <p>X<br>X + <p>X<br>X + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-002.html b/testing/web-platform/tests/css/css-break/widows-orphans-002.html new file mode 100644 index 0000000000..d13cc848ae --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Fragmentation level 3 Test: widows and line boxes</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="match" href="reference/widows-orphans-001-ref.html"> +<meta name="assert" content="The widows property affects block containers that establish an inline formatting context"> +<style> +div p { margin: 0; } + +div { + columns: 4; + column-gap: 0; + position: absolute; /* shrinkwrap. Using an explicit width in 'ch' with a monospace font would be fine as well if all UAs supported 'ch', but some don't. */ + column-fill: balance-all; /* to make sure it balances as well on paged media */ +} +div p { + orphans: 1; /* to avoid interference */ + widows: 2; +} + +/* The lines of each paragraphs should be kept together if the widows property applies, + or spread over the 4 columns if it fails to, + or all above one-another in a single column if multicol doesn't work. */ + +</style> +<body> + <p>Test passes if there are 4 “X” characters <strong>arranged in a 2 by 2 square</strong> below. + + <div> + <p>X<br>X + <p>X<br>X + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-003.html b/testing/web-platform/tests/css/css-break/widows-orphans-003.html new file mode 100644 index 0000000000..ed7bee4701 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Fragmentation level 3 Test: orphans and block level boxes</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="match" href="reference/widows-orphans-001-ref.html"> +<meta name="assert" content="The orphans property has no effect on block container boxes that contains only block-level boxes."> +<style> +div p { margin: 0; } + +div { + columns: 2; + column-gap: 0; + position: absolute; /* shrinkwrap. Using an explicit width in 'ch' with a monospace font would be fine as well if all UAs supported 'ch', but some don't. */ + column-fill: balance-all; /* to make sure it balances as well on paged media */ + + orphans: 4; +} + +/* If the property applied to block container boxes that contain block-level boxes, + it would force the two two-line paragraphs to stick together.*/ + +</style> +<body> + <p>Test passes if there are 4 “X” characters <strong>arranged in a 2 by 2 square</strong> below. + + <div> + <p>X<br>X + <p>X<br>X + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-004.html b/testing/web-platform/tests/css/css-break/widows-orphans-004.html new file mode 100644 index 0000000000..1507086efa --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Fragmentation level 3 Test: orphans and line boxes</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="match" href="reference/widows-orphans-001-ref.html"> +<meta name="assert" content="The orphans property affects block containers that establish an inline formatting context"> +<style> +div p { margin: 0; } + +div { + columns: 4; + column-gap: 0; + position: absolute; /* shrinkwrap. Using an explicit width in 'ch' with a monospace font would be fine as well if all UAs supported 'ch', but some don't. */ + column-fill: balance-all; /* to make sure it balances as well on paged media */ +} +div p { + widows: 1; /* to avoid interference */ + orphans: 2; +} + +/* The lines of each paragraphs should be kept together if the orphans property applies, + or spread over the 4 columns if it fails to, + or all above one-another in a single column if multicol doesn't work. */ + +</style> +<body> + <p>Test passes if there are 4 “X” characters <strong>arranged in a 2 by 2 square</strong> below. + + <div> + <p>X<br>X + <p>X<br>X + </div> +</body> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-005.html b/testing/web-platform/tests/css/css-break/widows-orphans-005.html new file mode 100644 index 0000000000..713849703c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-005.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-break/#widows-orphans"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1022348"> +<meta name="assert" content="Here's a multicol container with four lines, and a widows requirement of 2. We cannot honor that requirement, because the third line alone is too tall to fit in a column."> +<style> + .multicol { + position: relative; + columns: 3; + column-fill: auto; + column-gap: 10px; + width: 320px; + height: 200px; + orphans: 1; + widows: 2; + column-rule: 1px dotted; + line-height: 20px; + } + .ibk { + display: inline-block; + width: 70px; + } +</style> +<p> + There should be three columns below. In the first column there should be a + black rectangle and a yellow rectangle. In the second column there should be a + cyan rectangle. In the third column there should be a hotpink rectangle.</p> +<div class="multicol"> + <div class="ibk" style="height:50px; background:black;" data-offset-x="0"></div><br> + <div class="ibk" style="height:50px; background:yellow;" data-offset-x="0"></div><br> + <div class="ibk" style="height:285px;" data-offset-x="110"> + <!-- The implementations differ here. Gecko lets the inline-block overflow + the column, while Blink slices the inline-block and puts what doesn't + fit in the second column into the third. Blink has a bug, but that's + not the bug we want to test here. --> + <div style="height:100px; background:cyan;"></div> + </div><br> + <div class="ibk" style="height:10px; background:hotpink;" data-offset-x="220"></div><br> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("[data-offset-x]"); +</script> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-006.html b/testing/web-platform/tests/css/css-break/widows-orphans-006.html new file mode 100644 index 0000000000..3991326641 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1153517"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #mc > div { display:inline-block; width:100%; height:20px; } + #mc > div.red { background:red; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="mc" style="overflow:hidden; columns:1; column-fill:auto; width:100px; height:100px; orphans:1; widows:1; line-height:0; background:green;"> + <div></div> + <div class="red"></div> + <div class="red"></div> + <div class="red"></div> + <div class="red"></div> + <div class="red"></div> +</div> +<script> + document.body.offsetTop, + mc.style.widows = 5; +</script> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-007.html b/testing/web-platform/tests/css/css-break/widows-orphans-007.html new file mode 100644 index 0000000000..23809c8ffe --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1153517"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #mc > div { display:inline-block; width:100%; height:20px; } + #mc > div.green { height:100px; background:green; } +</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 id="mc" style="columns:4; orphans:3; widows:1; column-gap:0; line-height:0;"> + <div class="green"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="green"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="green"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="green"></div> + </div> +</div> +<script> + document.body.offsetTop; + mc.style.orphans = 5; +</script> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-008.html b/testing/web-platform/tests/css/css-break/widows-orphans-008.html new file mode 100644 index 0000000000..02fdb1332b --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-008.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-008-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '6' and the '7' so that there is a minimum of 3 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 1; + widows: 3; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> + + <!-- Same as div#test except 2 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-009.html b/testing/web-platform/tests/css/css-break/widows-orphans-009.html new file mode 100644 index 0000000000..8b71d5a73e --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-009.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-009-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '7' and the '8' so that there is a minimum of 2 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 2' declaration is still honored."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 2; + widows: 2; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <!-- Same as div#test except 1 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-010.html b/testing/web-platform/tests/css/css-break/widows-orphans-010.html new file mode 100644 index 0000000000..99a76921a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-010.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-010-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '6' and the '7' so that there is a minimum of 3 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 2; + widows: 3; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br><br><br>7<br>8<br>9</div> + + <!-- Same as div#test except 2 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-011.html b/testing/web-platform/tests/css/css-break/widows-orphans-011.html new file mode 100644 index 0000000000..c3741a977a --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-011.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-011-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 2 line boxes, then a class B break point should occur between '8' and the '9' so that there is a minimum of 6 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 156px; /* Therefore, exactly 6 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 2; + widows: 6; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br><br><br><br><br>9<br>10<br>11<br>12<br>13<br>14</div> + <!-- Same as div#test except 4 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-012.html b/testing/web-platform/tests/css/css-break/widows-orphans-012.html new file mode 100644 index 0000000000..f24f8cbbf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-012.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-012-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 3 line boxes, then a class B break point should occur between the '12' and the '13' so that there is a minimum of 7 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 208px; /* Therefore, exactly 8 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 3; + widows: 7; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br><br><br><br><br>13<br>14<br>15<br>16<br>17<br>18<br>19</div> + + <!-- Same as div#test except 4 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-013.html b/testing/web-platform/tests/css/css-break/widows-orphans-013.html new file mode 100644 index 0000000000..c9eae4375f --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-013.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-013-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '15' and the '16' so that there is a minimum of 4 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 6' declaration is still honored."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 234px; /* Therefore, exactly 9 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 6; + widows: 4; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the numbers inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br><br><br><br>16<br>17<br>18<br>19</div> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-014.html b/testing/web-platform/tests/css/css-break/widows-orphans-014.html new file mode 100644 index 0000000000..96cccecc80 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-014.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-014-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '7' and the '8' so that there is a minimum of 3 line boxes at the top of the 3rd column box. In doing so, the 'orphans: 7' declaration is still honored."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 234px; /* Therefore, exactly 9 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 7; + widows: 3; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br><br>8<br>9<br>0</div> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-015.html b/testing/web-platform/tests/css/css-break/widows-orphans-015.html new file mode 100644 index 0000000000..054490a785 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-015.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: initial 'widows' value and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-016-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="This test checks that 'widows' applies to multi-column containers and that the initial value of 'widows' is '2'. When an UA succeeds at applying 'widows', then there is 2 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 1; + widows: initial; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <!-- Same as div#test except 1 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-016.html b/testing/web-platform/tests/css/css-break/widows-orphans-016.html new file mode 100644 index 0000000000..e9597acab4 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-016.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-016-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In the test, since the 3rd column box was going to get only 1 line box, then a class B break point should occur between the '7' and the '8' so that there is a minimum of 2 line boxes at the top of the 3rd column box."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 1; + widows: 2; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <!-- Same as div#test except 1 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-017.html b/testing/web-platform/tests/css/css-break/widows-orphans-017.html new file mode 100644 index 0000000000..2bc99b8188 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-017.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and auto-height multicolumn container with 'column-fill: auto'</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-017-ref.html"> + + <!-- + Date created: November 26th 2020 + Last modified: December 6th 2020 + --> + + <meta name="assert" content="If a multi-column container fills column boxes sequentially and its 'height' is 'auto', then soft breaks are inoperative since content can not overflow the fragmentainer. Therefore, in this test, the 'orphans' and 'widows' requirements can not be honored."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + } + + div#test + { + height: auto; + + columns: 4 auto; + column-fill: auto; + column-gap: 1em; /* computes to 20px */ + column-rule: blue solid 4px; + + orphans: 1; + widows: 2; + } + + div#reference + { + height: 182px; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7</div> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-018.html b/testing/web-platform/tests/css/css-break/widows-orphans-018.html new file mode 100644 index 0000000000..3ffd3dbddd --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-018.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Fragmentation level 3 Test: 'orphans', 'widows' and content distribution in columns</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> + <link rel="match" href="reference/widows-orphans-009-ref.html"> + + <!-- + Date created: December 16th 2020 + Last modified: December 16th 2020 + --> + + <!-- + + Bug 137367: Implement orphans and widows + https://bugzilla.mozilla.org/show_bug.cgi?id=137367 + + --> + + <meta name="assert" content="When column boxes are filled sequentially, their content should be distributed and fragmented in accordance with the 'orphans' and the 'widows' declarations. In this test, the 3rd column box is going to get only 1 line box which is insufficient to honor 'widows: 3'. If a class B break point would occur between the '6' and the '7' so that 3 line boxes would be at the top of the 3rd column box, then this would leave only 2 line boxes in the 2nd column box and this would violate the 'orphans: 3' constraint. For that reason, a class B break must not happen in the 2nd column between the '6' and the '7'. On the other hand, a class B break can occur between the '7' and the '8' in the 2nd column box and doing so does not violate the 'orphans: 3' constraint."> + + <style> + div + { + border: orange solid 4px; + font-size: 20px; + line-height: 1.3; /* computes to 26px */ + height: 104px; /* Therefore, exactly 4 line boxes */ + margin-bottom: 1em; + padding: 0.5em; /* computes to 10px */ + width: 460px; + + columns: 4 auto; + + column-fill: auto; + + column-gap: 1em; /* computes to 20px */ + + column-rule: blue solid 4px; + } + + div#test + { + orphans: 3; + widows: 3; + } + + div#reference + { + orphans: 1; + widows: 1; + } + </style> + + <p>Test passes if the digits inside both orange-bordered rectangles are <strong>distributed identically</strong>. + + <div id="test">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div> + + <div id="reference">1<br>2<br>3<br>4<br>5<br>6<br>7<br><br>8<br>9</div> + + <!-- Same as div#test except 1 extra br here ^ --> diff --git a/testing/web-platform/tests/css/css-break/widows-orphans-019.html b/testing/web-platform/tests/css/css-break/widows-orphans-019.html new file mode 100644 index 0000000000..cf5ff7572c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/widows-orphans-019.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486252"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .multicol { + width: 100px; + columns: 4; + column-fill: auto; + gap: 0; + height: 100px; + line-height:25px; + orphans: 4; + widows: 4; + background: red; + } + .float { + float: left; + width: 20%; + height: 400px; + background: green; + } + .ib { + display: inline-block; + vertical-align: top; + width: 40%; + height: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib" style="height:100px;"></div><br> +</div> + diff --git a/testing/web-platform/tests/css/css-break/will-change-filter.html b/testing/web-platform/tests/css/css-break/will-change-filter.html new file mode 100644 index 0000000000..2970ddf37c --- /dev/null +++ b/testing/web-platform/tests/css/css-break/will-change-filter.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-break-3/"> +<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<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; columns: 2; column-gap: 0"> + <div style="filter: saturate(1); will-change: filter"> + <div style="height: 200px; background: green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print-ref.html b/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print-ref.html new file mode 100644 index 0000000000..d56687c9e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <title>Zero height box immediately after a forced page-break</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <body> + <div style="break-after: page; height: 100%">Page 1</div> + <div style="height: 1in"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print.html b/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print.html new file mode 100644 index 0000000000..3e3fb82628 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/zero-height-page-break-001-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <title>Zero height box immediately after a forced page-break</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="zero-height-page-break-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#page-break-values"/> + <meta name="assert" content="Ensures that a zero-height frame after a forced page-break appears on the following page."/> + <!-- This will cause a failure of there is only one page, regardless of matching the ref --> + <meta name="reftest-pages" content="1,2"/> + <body> + <div style="break-after: page; height: 100%">Page 1</div> + <div></div> + </body> +</html> |