mirror of
https://github.com/servo/servo.git
synced 2025-08-12 17:05:33 +01:00
Update web-platform-tests to revision 9f31d497bf87bdf5ebc3ba70b5cb9f87786f4071
This commit is contained in:
WPT Sync Bot
parent
1f64024655
commit
4bc7277be1
145 changed files with 3112 additions and 1980 deletions
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout test: align-content property</title>
|
||||
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
|
||||
<meta name="assert" content="This test checks that the align-content property is applied correctly in both directions RTL and LTR.">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid: 100px 100px / 50px 50px;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.verticalGrid {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
</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">
|
||||
<p>direction: LTR | align-content: 'center'</p>
|
||||
<div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'left'</p>
|
||||
<div class="grid alignContentLeft" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'right'</p>
|
||||
<div class="grid alignContentRight" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'start'</p>
|
||||
<div class="grid alignContentStart" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'end'</p>
|
||||
<div class="grid alignContentEnd" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'flex-start'</p>
|
||||
<div class="grid alignContentFlexStart" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'flex-end</p>
|
||||
<div class="grid alignContentFlexEnd" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Default alignment and initial values. -->
|
||||
<div style="position: relative">
|
||||
<p>direction: LTR | align-content: 'auto' (resolved to 'start')</p>
|
||||
<div class="grid" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL direction. -->
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'center'</p>
|
||||
<div class="grid directionRTL alignContentCenter" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'left'</p>
|
||||
<div class="grid directionRTL alignContentLeft" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'right'</p>
|
||||
<div class="grid directionRTL alignContentRight" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'start'</p>
|
||||
<div class="grid directionRTL alignContentStart" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative">
|
||||
<p>direction: RTL | align-content: 'end'</p>
|
||||
<div class="grid directionRTL alignContentEnd" data-expected-width="200" data-expected-height="300">
|
||||
<div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
|
||||
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -38,5 +38,20 @@ x { background: grey; }
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"subgrid [] [] [] []",
|
||||
];
|
||||
[...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -50,5 +50,20 @@ x { background: grey; }
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"subgrid [x] [b] [] [] [b]",
|
||||
];
|
||||
[...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -151,5 +151,32 @@ x {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"subgrid [] [] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [b] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] [] [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [] []",
|
||||
];
|
||||
[...document.querySelectorAll('div > div')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -390,5 +390,44 @@ html,body {
|
|||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"subgrid [z] [z] [z] [z] [z]",
|
||||
"subgrid [x] [z] [z] [z] [z]",
|
||||
"subgrid [x] [x] [z] [z] [z]",
|
||||
"subgrid [x] [x] [x] [z] [z]",
|
||||
"subgrid [x] [x] [x] [x] [z]",
|
||||
"subgrid [x] [x] [x] [x] [x]",
|
||||
"subgrid [x] [x] [x] [x] [x]",
|
||||
"subgrid [x] [x] [x] [x] [x]",
|
||||
"subgrid [x] [x] [x] [x] [x]",
|
||||
"subgrid [x] [x] [x] [x] [x]",
|
||||
"subgrid [y] [z] [z] [z] [z]",
|
||||
"subgrid [x] [y] [z] [z] [z]",
|
||||
"subgrid [x] [x] [y] [z] [z]",
|
||||
"subgrid [x] [x] [x] [y] [z]",
|
||||
"subgrid [x] [x] [x] [x] [y]",
|
||||
"subgrid [y] [y] [z] [z] [z]",
|
||||
"subgrid [x] [y] [y] [z] [z]",
|
||||
"subgrid [x] [x] [y] [y] [z]",
|
||||
"subgrid [x] [x] [x] [y] [y]",
|
||||
"subgrid [y] [y] [y] [z] [z]",
|
||||
"subgrid [x] [y] [y] [y] [z]",
|
||||
"subgrid [x] [x] [y] [y] [y]",
|
||||
"subgrid [y] [y] [y] [y] [z]",
|
||||
"subgrid [x] [y] [y] [y] [y]",
|
||||
"subgrid [y] [y] [y] [y] [y]",
|
||||
];
|
||||
[...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -165,5 +165,40 @@ item {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] []",
|
||||
"subgrid [x] [x] [] [] [x]",
|
||||
"subgrid [x] [x] [] [x] []",
|
||||
"subgrid [x] [x] [x] [x] []",
|
||||
"subgrid [] [] [] [] []",
|
||||
"subgrid [] [] [] [x] []",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] []",
|
||||
"subgrid [] [] [] [] []",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [x] [x] [] [] [x]",
|
||||
"subgrid [x] [x] [x] [] []",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] [x]",
|
||||
"subgrid [] [] [] [] []",
|
||||
];
|
||||
[...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-rows'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue