mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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; 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 style="position: relative;">
|
||||
<div style="contain: size; width: 10px; height: 40px;"></div>
|
||||
<div style="contain: size; width: 10px; height: 80px;"></div>
|
||||
<div style="position: absolute; width: 10px; height: 50px; background: green;"></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; top: -60px; width: 10px; height: 60px; background: green;"></div>
|
||||
</div>
|
||||
<div style="height: 100px; width: 20px;"></div>
|
||||
<div style="height: 70px; width: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: 70px; width: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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: 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="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 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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; 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>
|
||||
|
|
@ -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;">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue