Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 19:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 20a217cb8488e4339e0c9610aba99e2654b676c3

Browse source
This commit is contained in:
WPT Sync Bot 2020-04-17 08:19:21 +00:00
parent 3ca86eeba5
commit 21de781e2a
285 changed files with 5707 additions and 670 deletions
Download patch file Download diff file Expand all files Collapse all files

94
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE HTML>
<title>CSS Grid Layout Test: min and max size when computing the flex fraction</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
<meta name="assert" content="This test ensures that minimum and maximum sizes are used to compute the flex fraction for indefinite free spaces."/>
<style>
.grid {
margin: 3px;
grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
grid-column-gap: 33px;
border: 5px dashed;
padding: 2px;
}
.float { float: left; }
.item:nth-child(1) { background-color: purple; }
.item:nth-child(2) { background-color: blue; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<p>This test PASS if all the grids in the same row look the same.</p>
<div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="27"></div>
</div>
<div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="27"></div>
</div>
<div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="27"></div>
</div>
<br clear="all">
<div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122">
<div class="item" data-expected-height="50" data-expected-width="15"></div>
<div class="item" data-expected-height="50" data-expected-width="60"></div>
</div>
<div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122">
<div class="item" data-expected-height="50" data-expected-width="15"></div>
<div class="item" data-expected-height="50" data-expected-width="60"></div>
</div>
<div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122">
<div class="item" data-expected-height="50" data-expected-width="15"></div>
<div class="item" data-expected-height="50" data-expected-width="60"></div>
</div>
<br clear="all">
<div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
<div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
<div class="grid float max-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
<br clear="all">
<div class="float min-content">
<div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
</div>
<div class="float max-content">
<div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
</div>
<div class="float fit-content">
<div class="grid max-content" data-expected-height="64" data-expected-width="97">
<div class="item" data-expected-height="50" data-expected-width="10"></div>
<div class="item" data-expected-height="50" data-expected-width="40"></div>
</div>
</div>
</body>

96
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE HTML>
<title>CSS Grid Layout Test: min and max height when computing the flex row</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/height-keyword-classes.css" rel="stylesheet">
<meta name="assert" content="This test ensures that minimum and maximum heights are used to compute the flex fraction for grid rows."/>
<style>
.grid {
margin: 3px;
grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px;
grid-row-gap: 33px;
border: 5px dashed;
padding: 2px;
}
.float { float: left; }
.item:nth-child(1) { background-color: purple; }
.item:nth-child(2) { background-color: blue; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test PASS if all the grids in the same row look the same.</p>
<div class="grid float" style="max-height: 70px" data-expected-width="64" data-expected-height="84">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="27"></div>
</div>
<div class="grid float" style="min-height: 70px; max-height: 60px" data-expected-width="64" data-expected-height="84">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="27"></div>
</div>
<div class="grid float" style="height: 70px" data-expected-width="64" data-expected-height="84">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="27"></div>
</div>
<br clear="all">
<div class="grid float" style="min-height: 108px" data-expected-width="64" data-expected-height="122">
<div class="item" data-expected-width="50" data-expected-height="15"></div>
<div class="item" data-expected-width="50" data-expected-height="60"></div>
</div>
<div class="grid float" style="min-height: 108px; max-height: 60px" data-expected-width="64" data-expected-height="122">
<div class="item" data-expected-width="50" data-expected-height="15"></div>
<div class="item" data-expected-width="50" data-expected-height="60"></div>
</div>
<div class="grid float" style="height: 108px" data-expected-width="64" data-expected-height="122">
<div class="item" data-expected-width="50" data-expected-height="15"></div>
<div class="item" data-expected-width="50" data-expected-height="60"></div>
</div>
<br clear="all">
<div class="grid float min-height-max-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
<div class="grid float min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
<div class="grid float max-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
<br clear="all">
<div class="float min-content">
<div class="grid min-height-max-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
</div>
<div class="float max-content">
<div class="grid min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
</div>
<div class="float fit-content">
<div class="grid max-content" data-expected-width="64" data-expected-height="97">
<div class="item" data-expected-width="50" data-expected-height="10"></div>
<div class="item" data-expected-width="50" data-expected-height="40"></div>
</div>
</div>
</body>

262
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html Normal file
View file

@ -0,0 +1,262 @@
<!DOCTYPE html>
<title>CSS Grid: indefinite grid container and percentage columns.</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-columns-length-percentage"/>
<meta name="assert" content="Checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes."/>
<link rel="issue" href="https://crbug.com/616716"/>
<link rel="stylesheet" href="/css/support/grid.css"/>
<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<style>
.wrapper {
position: relative;
clear: both;
}
.grid {
font: 10px/1 Ahem;
}
.float {
float: left;
}
.abspos {
position: absolute;
}
.fixedSize {
width: 200px;
height: 200px;
}
.oneColumn100 {
grid-template-columns: 100%;
}
.oneColumn50 {
grid-template-columns: 50%;
}
.twoColumns {
grid-template-columns: 50% 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<div id="log"></div>
<div class="wrapper">
<div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid float twoColumns" data-expected-width="140" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
XX X
</div>
<div class="firstRowSecondColumn"
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
XX X
</div>
<div class="firstRowSecondColumn"
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
XX X
</div>
<div class="firstRowSecondColumn"
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
XX X
</div>
<div class="firstRowSecondColumn"
data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10">
XX X
</div>
<div class="firstRowSecondColumn"
data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid float twoColumns" data-expected-width="100" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
</div>
<div class="firstRowSecondColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
</div>
<div class="firstRowSecondColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
</div>
<div class="firstRowSecondColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
</div>
<div class="firstRowSecondColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
</div>
<div class="firstRowSecondColumn"
data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
XX X
</div>
</div>
</div>
</body>

86
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<title>CSS Grid: 'auto' sizes with item's margins with vertical-lr</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-lr writing mode."/>
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
<style>
.grid {
grid-template-rows: auto auto;
grid-template-columns: auto auto;
}
.gridItem {
width: 20px;
height: 40px;
}
.marginTop {
margin-top: 20px;
}
.marginBottom {
margin-bottom: 20px;
}
.borderTop {
border-top: 5px solid;
}
.borderBottom {
border-bottom: 5px solid;
}
.paddingTop {
padding-top: 10px;
}
.paddingBottom {
padding-bottom: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div>
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop firstRowFirstColumn"></div>
<div class="gridItem marginBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div>
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div>
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div>
<div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem paddingBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
</body>

86
tests/wpt/web-platform-tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<title>CSS Grid: 'auto' sizes with item's margins with vertical-rl</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-rl writing mode."/>
<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
<style>
.grid {
grid-template-rows: auto auto;
grid-template-columns: auto auto;
}
.gridItem {
width: 20px;
height: 40px;
}
.marginTop {
margin-top: 20px;
}
.marginBottom {
margin-bottom: 20px;
}
.borderTop {
border-top: 5px solid;
}
.borderBottom {
border-bottom: 5px solid;
}
.paddingTop {
padding-top: 10px;
}
.paddingBottom {
padding-bottom: 10px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div style="position: relative">
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop firstRowFirstColumn"></div>
<div class="gridItem marginBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div style="position: relative">
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div style="position: relative">
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
<div style="position: relative">
<div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
<div class="gridItem paddingBottom firstRowSecondColumn"></div>
<div class="gridItem secondRowFirstColumn"></div>
<div class="gridItem secondRowSecondColumn"></div>
</div>
</div>
</body>