Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'

This commit is contained in:
WPT Sync Bot 2021-02-21 08:20:50 +00:00 committed by Josh Matthews
parent 8050c95e31
commit 87be1008de
2742 changed files with 142451 additions and 40667 deletions

View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
<p>Test passes if there is a filled green square.</p>
<div style="display: inline-grid; background: green; aspect-ratio: 1/1; min-height: 60px; grid-template-columns: repeat(auto-fill, 50px);"></div>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
<p>Test passes if there is a filled green square.</p>
<div style="width: min-content; height: 100px; background: green;">
<div style="height: 100%;">
<div style="display: grid; aspect-ratio: 1/1; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
</div>
</div>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block width changes the number of auto repeat columns.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 0px; height: 100px;">
<div style="display: inline-grid; background: green; height: 100px; min-width: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.width = '100px';
</script>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat rows.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 100px; height: 0px;">
<div style="display: inline-grid; background: green; width: 100px; min-height: 60%; grid-template-rows: repeat(auto-fill, 50px);"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat columns.">
<p>Test passes if there is a filled green square.</p>
<div id="target" style="width: 100px; height: 0px;">
<div style="display: inline-grid; background: green; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px); grid-template-rows: 100px; aspect-ratio: 1/1;"></div>
</div>
<script>
document.body.offsetTop;
document.getElementById('target').style.height = '100px';
</script>

View file

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title>
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
.columns {
border: 1px solid black;
width: 5px;
display: grid;
grid-template-columns: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z];
grid-auto-rows: 5px;
grid-column-gap: 3px;
/* Does not fit a whole-number of repetitions */
width: 94px;
}
div > div {
background: blue;
}
</style>
</head>
<body>
<!-- u -->
<div class="columns">
<div style="grid-column-start: u"></div>
</div>
<!-- Non-existant line name -->
<div class="columns">
<div style="grid-column-start: nonesuch"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -1"></div>
</div>
<!-- Also non-existant, there is only one u -->
<div class="columns">
<div style="grid-column-start: u 4"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 9"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -2"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -6"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -7"></div>
</div>
<!-- v -->
<div class="columns">
<div style="grid-column-start: v"></div>
</div>
<div class="columns">
<div style="grid-column-start: v 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: v 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -2"></div>
</div>
<!-- Also non-existant, there are only two v's -->
<div class="columns">
<div style="grid-column-start: v 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -3"></div>
</div>
<!-- w -->
<div class="columns">
<div style="grid-column-start: w"></div>
</div>
<div class="columns">
<div style="grid-column-start: w 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: w 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -2"></div>
</div>
<!-- Also non-existant, there are only two w's -->
<div class="columns">
<div style="grid-column-start: w 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -3"></div>
</div>
<!-- x -->
<div class="columns">
<div style="grid-column-start: x"></div>
</div>
<div class="columns">
<div style="grid-column-start: x 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: x 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -2"></div>
</div>
<!-- Also non-existant, there are only two x's -->
<div class="columns">
<div style="grid-column-start: x 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -3"></div>
</div>
<!-- y -->
<div class="columns">
<div style="grid-column-start: y"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: y -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: y -2"></div>
</div>
<!-- Also non-existant, there are only two y's -->
<div class="columns">
<div style="grid-column-start: y -3"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 3"></div>
</div>
<!-- z -->
<div class="columns">
<div style="grid-column-start: z"></div>
</div>
<div class="columns">
<div style="grid-column-start: z 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: z -1"></div>
</div>
<!-- Also non-existant, there is only one z -->
<div class="columns">
<div style="grid-column-start: z 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: z -2"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,168 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title>
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
<link rel="match" href="grid-auto-repeat-multiple-values-004-ref.html">
<style>
.columns {
border: 1px solid black;
display: grid;
grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z];
grid-auto-rows: 5px;
grid-column-gap: 3px;
/* Does not fit a whole-number of repetitions */
width: 94px;
}
div > div {
background: blue;
}
</style>
</head>
<body>
<!-- u -->
<div class="columns">
<div style="grid-column-start: u"></div>
</div>
<!-- Non-existant line name -->
<div class="columns">
<div style="grid-column-start: nonesuch"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -1"></div>
</div>
<!-- Also non-existant, there is only one u -->
<div class="columns">
<div style="grid-column-start: u 4"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 9"></div>
</div>
<div class="columns">
<div style="grid-column-start: u 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -2"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -6"></div>
</div>
<div class="columns">
<div style="grid-column-start: u -7"></div>
</div>
<!-- v -->
<div class="columns">
<div style="grid-column-start: v"></div>
</div>
<div class="columns">
<div style="grid-column-start: v 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: v 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -2"></div>
</div>
<!-- Also non-existant, there are only two v's -->
<div class="columns">
<div style="grid-column-start: v 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: v -3"></div>
</div>
<!-- w -->
<div class="columns">
<div style="grid-column-start: w"></div>
</div>
<div class="columns">
<div style="grid-column-start: w 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: w 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -2"></div>
</div>
<!-- Also non-existant, there are only two w's -->
<div class="columns">
<div style="grid-column-start: w 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: w -3"></div>
</div>
<!-- x -->
<div class="columns">
<div style="grid-column-start: x"></div>
</div>
<div class="columns">
<div style="grid-column-start: x 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: x 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -2"></div>
</div>
<!-- Also non-existant, there are only two x's -->
<div class="columns">
<div style="grid-column-start: x 3"></div>
</div>
<div class="columns">
<div style="grid-column-start: x -3"></div>
</div>
<!-- y -->
<div class="columns">
<div style="grid-column-start: y"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: y -1"></div>
</div>
<div class="columns">
<div style="grid-column-start: y -2"></div>
</div>
<!-- Also non-existant, there are only two y's -->
<div class="columns">
<div style="grid-column-start: y -3"></div>
</div>
<div class="columns">
<div style="grid-column-start: y 3"></div>
</div>
<!-- z -->
<div class="columns">
<div style="grid-column-start: z"></div>
</div>
<div class="columns">
<div style="grid-column-start: z 1"></div>
</div>
<div class="columns">
<div style="grid-column-start: z -1"></div>
</div>
<!-- Also non-existant, there is only one z -->
<div class="columns">
<div style="grid-column-start: z 2"></div>
</div>
<div class="columns">
<div style="grid-column-start: z -2"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title>
<link rel="author" title="Mozilla" href="https://mozilla.org">
<style>
.rows {
border: 1px solid black;
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z];
grid-auto-columns: 5px;
grid-row-gap: 3px;
width: min-content;
/* Does not fit a whole-number of repetitions */
height: 94px;
}
div > div {
background: blue;
}
</style>
</head>
<body>
<div class="rows">
<div style="grid-row-start: u"></div>
</div>
<!-- Non-existant line name -->
<div class="rows">
<div style="grid-row-start: nonesuch"></div>
</div>
<div class="rows">
<div style="grid-row-start: u 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -1"></div>
</div>
<!-- Also non-existant, there is only one u -->
<div class="rows">
<div style="grid-row-start: u 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -2"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -6"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -7"></div>
</div>
<!-- v -->
<div class="rows">
<div style="grid-row-start: v"></div>
</div>
<div class="rows">
<div style="grid-row-start: v 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: v 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -2"></div>
</div>
<!-- Also non-existant, there are only two v's -->
<div class="rows">
<div style="grid-row-start: v 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -3"></div>
</div>
<!-- w -->
<div class="rows">
<div style="grid-row-start: w"></div>
</div>
<div class="rows">
<div style="grid-row-start: w 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: w 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -2"></div>
</div>
<!-- Also non-existant, there are only two w's -->
<div class="rows">
<div style="grid-row-start: w 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -3"></div>
</div>
<!-- x -->
<div class="rows">
<div style="grid-row-start: x"></div>
</div>
<div class="rows">
<div style="grid-row-start: x 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: x 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -2"></div>
</div>
<!-- Also non-existant, there are only two x's -->
<div class="rows">
<div style="grid-row-start: x 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -3"></div>
</div>
<!-- y -->
<div class="rows">
<div style="grid-row-start: y"></div>
</div>
<div class="rows">
<div style="grid-row-start: y 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: y 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -2"></div>
</div>
<!-- Also non-existant, there are only two y's -->
<div class="rows">
<div style="grid-row-start: y 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -3"></div>
</div>
<!-- z -->
<div class="rows">
<div style="grid-row-start: z"></div>
</div>
<div class="rows">
<div style="grid-row-start: z 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: z -1"></div>
</div>
<!-- Also non-existant, there is only one z -->
<div class="rows">
<div style="grid-row-start: z 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: z -2"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,163 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title>
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
<link rel="match" href="grid-auto-repeat-multiple-values-005-ref.html">
<style>
.rows {
border: 1px solid black;
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z];
grid-auto-columns: 5px;
grid-row-gap: 3px;
width: min-content;
/* Does not fit a whole-number of repetitions */
height: 94px;
}
div > div {
background: blue;
}
</style>
</head>
<body>
<div class="rows">
<div style="grid-row-start: u"></div>
</div>
<!-- Non-existant line name -->
<div class="rows">
<div style="grid-row-start: nonesuch"></div>
</div>
<div class="rows">
<div style="grid-row-start: u 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -1"></div>
</div>
<!-- Also non-existant, there is only one u -->
<div class="rows">
<div style="grid-row-start: u 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -2"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -6"></div>
</div>
<div class="rows">
<div style="grid-row-start: u -7"></div>
</div>
<!-- v -->
<div class="rows">
<div style="grid-row-start: v"></div>
</div>
<div class="rows">
<div style="grid-row-start: v 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: v 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -2"></div>
</div>
<!-- Also non-existant, there are only two v's -->
<div class="rows">
<div style="grid-row-start: v 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: v -3"></div>
</div>
<!-- w -->
<div class="rows">
<div style="grid-row-start: w"></div>
</div>
<div class="rows">
<div style="grid-row-start: w 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: w 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -2"></div>
</div>
<!-- Also non-existant, there are only two w's -->
<div class="rows">
<div style="grid-row-start: w 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: w -3"></div>
</div>
<!-- x -->
<div class="rows">
<div style="grid-row-start: x"></div>
</div>
<div class="rows">
<div style="grid-row-start: x 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: x 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -2"></div>
</div>
<!-- Also non-existant, there are only two x's -->
<div class="rows">
<div style="grid-row-start: x 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: x -3"></div>
</div>
<!-- y -->
<div class="rows">
<div style="grid-row-start: y"></div>
</div>
<div class="rows">
<div style="grid-row-start: y 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: y 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -1"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -2"></div>
</div>
<!-- Also non-existant, there are only two y's -->
<div class="rows">
<div style="grid-row-start: y 3"></div>
</div>
<div class="rows">
<div style="grid-row-start: y -3"></div>
</div>
<!-- z -->
<div class="rows">
<div style="grid-row-start: z"></div>
</div>
<div class="rows">
<div style="grid-row-start: z 1"></div>
</div>
<div class="rows">
<div style="grid-row-start: z -1"></div>
</div>
<!-- Also non-existant, there is only one z -->
<div class="rows">
<div style="grid-row-start: z 2"></div>
</div>
<div class="rows">
<div style="grid-row-start: z -2"></div>
</div>
</body>
</html>