Update web-platform-tests to revision 78eae724c61bb01d858a01a324363e997ac66851

This commit is contained in:
WPT Sync Bot 2020-04-25 08:18:23 +00:00
parent 537e575d3d
commit 55139554ba
366 changed files with 10291 additions and 2008 deletions

View file

@ -11,7 +11,6 @@
background-color: green;
block-size: 100px;
display: flex;
gap: 20px;
}
section > div{
background-color: grey;

View file

@ -11,7 +11,6 @@
background-color: green;
block-size: 100px;
display: flex;
gap: 20px;
}
section > div{
background-color: grey;

View file

@ -11,7 +11,6 @@
background-color: green;
block-size: 100px;
display: flex;
gap: 20px;
}
section > div{
background-color: grey;

View file

@ -12,7 +12,6 @@
block-size: 200px;
display: flex;
flex-direction: column;
gap: 20px;
}
section > div{
background-color: gray;

View file

@ -12,7 +12,6 @@
block-size: 200px;
display: flex;
flex-direction: column;
gap: 20px;
}
section > div{
background-color: grey;

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-line-break">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Gaps are respected when gathering items into lines for row flexboxes." />
<style>
.item {
width: 100px;
height: 50px;
flex: 0 0 auto;
background: green;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=reference-overlapped-red></div>
<div style="display: flex; width: 200px; column-gap: 50px; flex-flow: row wrap">
<div class=item></div>
<div class=item></div>
</div>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-line-break">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Gaps are respected when gathering items into lines for column flexboxes." />
<style>
.item {
width: 50px;
height: 100px;
flex: 0 0 auto;
background: green;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=reference-overlapped-red></div>
<div style="display: flex; height: 200px; width: 100px; row-gap: 50px; flex-flow: column wrap;">
<div class=item></div>
<div class=item></div>
</div>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Main axis gap makes grow turn to shrink." />
<style>
.item {
width: 30px;
flex: 1 1 auto;
background: red;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex; height: 100px; width: 100px; column-gap: 100px; background: green;">
<div class=item></div>
<div class=item></div>
</div>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="There are gaps between 0-main-size items" />
<style>
.item {
height: 10px;
flex: 0 0 auto;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=reference-overlapped-red></div>
<div style="display: flex; width: 100px; row-gap: 40px; background: green; flex-direction: column;">
<div class=item></div>
<div class=item style="height: 0px"></div>
<div class=item></div>
</div>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Intrinsic min size includes gaps" />
<style>
.item {
flex: 0 0 auto;
line-height: 0px;
}
.inline-block {
display: inline-block;
width: 10px;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=reference-overlapped-red></div>
<div style="display: flex; column-gap: 80px; background: green; height: 100px; width: min-content">
<div class=item> <!-- min: 10 max: 20 -->
<div class=inline-block></div><div class=inline-block></div>
</div>
<div class=item style="width: 10px"></div>
</div>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<title>Flex gaps</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Intrinsic max size includes gaps" />
<style>
.item {
flex: 0 0 auto;
line-height: 0px;
}
.inline-block {
display: inline-block;
width: 10px;
}
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=reference-overlapped-red></div>
<div style="display: flex; column-gap: 70px; background: green; height: 100px; width: max-content">
<div class=item> <!-- min: 10 max: 20 -->
<div class=inline-block></div><div class=inline-block></div>
</div>
<div class=item style="width: 10px"></div>
</div>