mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision b'afdce893ed51bc1a7a7ac03b16b5a575caad071a'
This commit is contained in:
WPT Sync Bot
parent
a8da28e55d
commit
3b420af385
393 changed files with 17484 additions and 4185 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue