mirror of
https://github.com/servo/servo.git
synced 2025-08-04 21:20:23 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ div { font: 10px/1 Ahem; }
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid min-content" data-expected-width="30" data-expected-height="20" style="grid-template-columns:minmax(0, 1fr);">
|
||||
<div class="grid min-content" data-expected-width="0" data-expected-height="20" style="grid-template-columns:minmax(0, 1fr);">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
position: relative;
|
||||
grid-template-columns: minmax(0, .5fr);
|
||||
grid-template-rows: minmax(0, .5fr);
|
||||
}
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(green, green) no-repeat;
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
.abspos {
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="grid">
|
||||
<div class="item"></div>
|
||||
<div class="abspos"></div>
|
||||
</div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
also consider Content Alignment, so that grid container width is 40px.
|
||||
https://github.com/w3c/csswg-drafts/issues/2697 -->
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
<div class="grid justifyContentStart alignContentSpaceBetween" data-expected-width="80" data-expected-height="200">
|
||||
<div class="grid justifyContentStart alignContentSpaceBetween" data-expected-width="40" data-expected-height="200">
|
||||
<div class="item" data-expected-width="40" data-expected-height="200">XXX XX X XX X XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Restart the algorithm to find the size of an 'fr'</title>
|
||||
<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-find-fr-size" title="12.7.1. Find the Size of an 'fr'">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible.">
|
||||
<style>
|
||||
.grid {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: repeat(2, 0fr 1fr);
|
||||
}
|
||||
|
||||
div > div { background: green }
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="grid">
|
||||
<div></div>
|
||||
<div style="width: 30px"></div>
|
||||
<div style="width: 50px"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -74,8 +74,8 @@ checkTrackSizes(2, "1fr auto", "100px 0px");
|
|||
checkTrackSizes(2, "1fr max-content", "100px 0px");
|
||||
|
||||
// Item spanning a fixed flexible track and an intrinsic non-flexible track
|
||||
checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 100px");
|
||||
checkTrackSizes(2, "minmax(0, 1fr) auto", "0px 100px");
|
||||
checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 75px");
|
||||
checkTrackSizes(2, "minmax(25px, 1fr) auto", "25px 75px");
|
||||
checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 50px");
|
||||
checkTrackSizes(2, "minmax(0, 1fr) auto", "50px 0px");
|
||||
checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 25px");
|
||||
checkTrackSizes(2, "minmax(25px, 1fr) auto", "50px 0px");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -54,21 +54,16 @@ function checkTrackSizes(trackList, expected) {
|
|||
// ├─╫─┼─┼─╢
|
||||
// └─╚═╧═╧═╝
|
||||
|
||||
// The 1st item has spans less tracks (2) than the 2nd item (3),
|
||||
// therefore its contribution (60px) is distributed first.
|
||||
// All the 60px go to the 2nd track, since the 1st track is not intrinsic.
|
||||
// Then the 2nd item only needs to distribute 150px-60px=90px
|
||||
// among the 3rd and 4th tracks.
|
||||
checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 60px 45px 45px");
|
||||
|
||||
// The 1st item now spans a flexible track with an intrinsic minimum,
|
||||
// therefore its contribution (60px) is distributed last.
|
||||
// The 1st item spans a flexible track, therefore its contribution (60px) is distributed last.
|
||||
// The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks.
|
||||
// Then the 1st item only needs to distribute 60px-50px=10px to the 1st track.
|
||||
checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px");
|
||||
|
||||
// Now both items span a flexible track with an intrinsic minimum,
|
||||
// so their contributions are handled simultaneously,
|
||||
// Now the 1st item still spans a flexible track, but it's not intrinsic.
|
||||
// Therefore, no track receives its intrinsic contribution.
|
||||
checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 50px 50px 50px");
|
||||
|
||||
// Now both items span a flexible track, so their contributions are handled simultaneously,
|
||||
// even if the 1st item still spans less tracks than the 2nd one.
|
||||
// Therefore the distribution is as follows:
|
||||
// - 1st track: 60px/2 = 30px
|
||||
|
|
@ -97,7 +92,7 @@ document.getElementById("grid").style.gridTemplateAreas = `
|
|||
// Now the 1st item has a span of 1, so usually we would handle its contribution
|
||||
// at the very beginning, before items that span multiple tracks.
|
||||
// But not if its track is flexible, then it's still handled at the end,
|
||||
// simultaneously with other items that span some intrinsic flexible track.
|
||||
// simultaneously with other items that span some flexible track.
|
||||
// - 1nd track: max(60px, 150px/3) = 60px
|
||||
// - 2nd track: 150px/3 = 50px
|
||||
// - 3rd track: 150px/3 = 50px
|
||||
|
|
|
|||
|
|
@ -33,25 +33,25 @@
|
|||
|
||||
<pre>rows: auto</pre>
|
||||
|
||||
<div class="grid" data-expected-width="25" data-expected-height="150">
|
||||
<div class="grid" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<pre>rows: minmax(100px, 200px)</pre>
|
||||
|
||||
<div class="grid minmax-100-200" data-expected-width="50" data-expected-height="150">
|
||||
<div class="grid minmax-100-200" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<pre>rows: minmax(auto, 200px)</pre>
|
||||
|
||||
<div class="grid minmax-auto-200" data-expected-width="50" data-expected-height="150">
|
||||
<div class="grid minmax-auto-200" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<pre>rows: minmax(100px, auto)</pre>
|
||||
|
||||
<div class="grid minmax-100-auto" data-expected-width="25" data-expected-height="150">
|
||||
<div class="grid minmax-100-auto" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,13 +63,13 @@
|
|||
|
||||
<pre>rows: minmax(100px, fit-content)</pre>
|
||||
|
||||
<div class="grid minmax-auto-fitcontent" data-expected-width="25" data-expected-height="150">
|
||||
<div class="grid minmax-auto-fitcontent" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
<pre>rows: minmax(100px, 1fr)</pre>
|
||||
|
||||
<div class="grid minmax-auto-1fr" data-expected-width="25" data-expected-height="150">
|
||||
<div class="grid minmax-auto-1fr" data-expected-width="75" data-expected-height="150">
|
||||
<div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue