diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-break/flexbox | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-break/flexbox')
294 files changed, 8416 insertions, 0 deletions
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..0ede74a118 --- /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 hieght 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-015.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-015.html new file mode 100644 index 0000000000..64c32c0692 --- /dev/null +++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-015.html @@ -0,0 +1,40 @@ +<!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-wrap: wrap; + background: green; + } + #flex > div { + 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> + <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> + <div style="contain: size; width: 10px; height: 80px;"></div> + <div style="contain: size; width: 10px; height: 30px;"></div> + </div> + <div style="height: 100px; width: 20px;"></div> + <div style="height: 20px; width: 20px;"></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/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-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/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> |