mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision e91d7d8c9a1f14438e44000dcd05ce6e658e4ae5
This commit is contained in:
WPT Sync Bot
parent
242e7e2630
commit
1a3fdf7a13
567 changed files with 9823 additions and 2333 deletions
|
|
@ -0,0 +1,140 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
|
||||
<link rel="match" href="references/grid-baseline-align-001-ref.html">
|
||||
|
||||
<style>
|
||||
@import "/fonts/ahem.css";
|
||||
.grid {
|
||||
border: solid silver;
|
||||
margin: 1em 2px;
|
||||
font: 20px/1 Ahem;
|
||||
|
||||
display: inline-grid;
|
||||
vertical-align: top;
|
||||
grid-template-columns: repeat(4, max-content);
|
||||
}
|
||||
.grid > div {
|
||||
border: black 10px;
|
||||
border-style: solid none;
|
||||
color: orange;
|
||||
}
|
||||
div + div {
|
||||
font-size: 2em;
|
||||
}
|
||||
div + div + div {
|
||||
font-size: 50%;
|
||||
}
|
||||
.self > div {
|
||||
align-self: baseline;
|
||||
}
|
||||
.content > div {
|
||||
align-content: baseline;
|
||||
}
|
||||
div.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.ref {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 96px;
|
||||
}
|
||||
.ref > div {
|
||||
position: absolute;
|
||||
}
|
||||
.ref1 { top: 16px; }
|
||||
.ref2 { left: 20px; }
|
||||
.ref3 { top: 24px;
|
||||
left: 60px; }
|
||||
.ref4 { right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 10px; }
|
||||
|
||||
.ref.content > div:not(.stripe) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.stripe {
|
||||
width: 80px;
|
||||
height: 76px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if each pair of boxes is identical.</p>
|
||||
|
||||
<div class="grid self">
|
||||
<div>
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div class="stretch">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid content">
|
||||
<div>
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div class="stretch">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
|
||||
</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
|
||||
<link rel="match" href="references/grid-baseline-justify-001-ref.html">
|
||||
|
||||
<style>
|
||||
@import "/fonts/ahem.css";
|
||||
.grid {
|
||||
border: solid silver;
|
||||
margin: 1em 2px;
|
||||
font: 20px/1 Ahem;
|
||||
|
||||
display: inline-grid;
|
||||
vertical-align: top;
|
||||
grid-template-rows: repeat(4, max-content);
|
||||
}
|
||||
.grid > div {
|
||||
border: black 10px;
|
||||
border-style: none solid;
|
||||
color: orange;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div + div {
|
||||
font-size: 2em;
|
||||
}
|
||||
div + div + div {
|
||||
font-size: 50%;
|
||||
}
|
||||
.self > div {
|
||||
justify-self: baseline;
|
||||
}
|
||||
.content > div {
|
||||
align-content: baseline;
|
||||
}
|
||||
div.stretch {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.ref {
|
||||
position: relative;
|
||||
width: 96px;
|
||||
height: 80px;
|
||||
}
|
||||
.ref > div {
|
||||
position: absolute;
|
||||
}
|
||||
.ref1 { right: 16px; }
|
||||
.ref2 { top: 20px;
|
||||
right: 0px; }
|
||||
.ref3 { right: 24px;
|
||||
top: 60px; }
|
||||
.ref4 { bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
height: 10px; }
|
||||
|
||||
.ref.content > div:not(.stripe) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.stripe {
|
||||
width: 76px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if each pair of boxes is identical.</p>
|
||||
|
||||
<div class="grid self">
|
||||
<div>
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div class="stretch">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid content">
|
||||
<div>
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div>
|
||||
p
|
||||
</div>
|
||||
<div class="stretch">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title>
|
||||
<style>
|
||||
#grid {
|
||||
border: solid 5px teal;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
padding: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
float: left;
|
||||
border: solid 5px aqua;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* highlight manual pass condition */
|
||||
#grid > div:nth-child(even) {
|
||||
border-right: none;
|
||||
margin-left: 40px;
|
||||
}
|
||||
#grid > div:nth-child(n + 3) {
|
||||
border-bottom: none;
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
|
||||
<link rel="match" href="grid-gutters-014-ref.html">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.">
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
border: solid 5px teal;
|
||||
padding: 5px;
|
||||
grid-gap: 15% 10%;
|
||||
gap: 15% 10%;
|
||||
float: left;
|
||||
grid: auto auto / auto auto;
|
||||
/* content box width = 200px height = 100px -> gap x = 20px y = 15px */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
margin: 5px 10px;
|
||||
border: solid 5px aqua;
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
/* margin box height = 50px width = 100px */
|
||||
}
|
||||
|
||||
/* highlight manual pass condition */
|
||||
#grid > div:nth-child(even) {
|
||||
border-right-color: red;
|
||||
}
|
||||
#grid > div:nth-child(n + 3) {
|
||||
border-bottom-color: red;
|
||||
}
|
||||
#mask {
|
||||
position: absolute;
|
||||
border: 5px teal;
|
||||
border-style: none solid solid none;
|
||||
bottom: -5px; right: -5px;
|
||||
top: 10px; left: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<span id="mask"></span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
|
||||
</title>
|
||||
|
||||
<style>
|
||||
@import "/fonts/ahem.css";
|
||||
.grid {
|
||||
border: solid silver;
|
||||
margin: 1em 2px;
|
||||
font: 20px/1 Ahem;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.grid > div {
|
||||
border: black 10px;
|
||||
border-style: solid none;
|
||||
color: orange;
|
||||
}
|
||||
div + div {
|
||||
font-size: 2em;
|
||||
}
|
||||
div + div + div {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.ref {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 96px;
|
||||
}
|
||||
.ref > div {
|
||||
position: absolute;
|
||||
}
|
||||
.ref1 { top: 16px; }
|
||||
.ref2 { left: 20px; }
|
||||
.ref3 { top: 24px;
|
||||
left: 60px; }
|
||||
.ref4 { right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 10px; }
|
||||
|
||||
.ref.content > div:not(.stripe) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.stripe {
|
||||
width: 80px;
|
||||
height: 76px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if each pair of boxes is identical.</p>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<title>
|
||||
Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
|
||||
</title>
|
||||
|
||||
<style>
|
||||
@import "/fonts/ahem.css";
|
||||
.grid {
|
||||
border: solid silver;
|
||||
margin: 1em 2px;
|
||||
font: 20px/1 Ahem;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.grid > div {
|
||||
border: black 10px;
|
||||
border-style: none solid;
|
||||
color: orange;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div + div {
|
||||
font-size: 2em;
|
||||
}
|
||||
div + div + div {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.ref {
|
||||
position: relative;
|
||||
width: 96px;
|
||||
height: 80px;
|
||||
}
|
||||
.ref > div {
|
||||
position: absolute;
|
||||
}
|
||||
.ref1 { right: 16px; }
|
||||
.ref2 { top: 20px;
|
||||
right: 0px; }
|
||||
.ref3 { right: 24px;
|
||||
top: 60px; }
|
||||
.ref4 { bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
height: 10px; }
|
||||
|
||||
.ref.content > div:not(.stripe) {
|
||||
border-color: transparent;
|
||||
}
|
||||
.stripe {
|
||||
width: 76px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if each pair of boxes is identical.</p>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid self ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid content ref">
|
||||
<div class="ref1">
|
||||
p<br>
|
||||
p<br>
|
||||
p
|
||||
</div>
|
||||
<div class="ref2">
|
||||
p
|
||||
</div>
|
||||
<div class="ref3">
|
||||
p
|
||||
</div>
|
||||
<div class="ref4">
|
||||
|
||||
</div>
|
||||
<div class="stripe">
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue