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

Update web-platform-tests to revision 9d583db6a1a16763322dce912bf057490cd7b0c7

Browse source
This commit is contained in:
WPT Sync Bot 2020-04-19 08:19:10 +00:00
parent 306e8ac5f9
commit e116a19f0b
243 changed files with 6909 additions and 2244 deletions
Download patch file Download diff file Expand all files Collapse all files

129
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline-vertical.html Normal file
View file

@ -0,0 +1,129 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid align baseline vertical</title>
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
<meta name="assert" content="This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<style>
.grid {
height: 600px;
grid-auto-columns: 1fr;
margin-bottom: 20px;
position: relative;
text-orientation: sideways;
font: 20px/1 Ahem;
}
.grid :nth-child(1) { background-color: brown; }
.grid :nth-child(2) { background-color: green; }
.grid :nth-child(3) { background-color: red; }
.grid :nth-child(4) { background-color: yellow; }
.grid :nth-child(5) { background-color: purple; }
.grid :nth-child(6) { background-color: orange; }
.grid :nth-child(7) { background-color: lime; }
.grid :nth-child(8) { background-color: lightblue; }
.grid :nth-child(9) { background-color: darkred; }
.grid :nth-child(10) { background-color: gold; }
.grid :nth-child(11) { background-color: salmon; }
.firstRowThirdColumn {
grid-row: 1;
grid-column: 3;
}
.firstRowFourthColumn {
grid-row: 1;
grid-column: 4;
}
.firstRowFifthColumn {
grid-row: 1;
grid-column: 5;
}
.grid > div {
min-width: 0px;
}
</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(() => { runTests(); })">
<div class="grid" style="writing-mode: vertical-rl">
<div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>
<div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
<div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>
<div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
</div>
<div class="grid" style="writing-mode: vertical-rl">
<div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline2" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
<div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
</div>
<div class="grid" style="writing-mode: vertical-rl">
<div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
<div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
</div>
<div class="grid" style="writing-mode: vertical-lr">
<div id="baseline6" data-offset-x="13" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline7" data-offset-x="13" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
<div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
</div>
<div class="grid" style="writing-mode: vertical-lr">
<div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
<div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
<div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
</div>
<div id="log"></div>
</body>
<script>
function runTests() {
var baseline1 = document.getElementById("baseline1");
var baseline2 = document.getElementById("baseline2");
var baseline3 = document.getElementById("baseline3");
var baseline4 = document.getElementById("baseline4");
var baseline5 = document.getElementById("baseline5");
var baseline6 = document.getElementById("baseline6");
var baseline7 = document.getElementById("baseline7");
var baseline8 = document.getElementById("baseline8");
var baseline9 = document.getElementById("baseline9");
checkLayout('.grid', false);
test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1");
test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2");
test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3");
test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5");
test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6");
done();
};
</script>
</body>

109
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-align-baseline.html Normal file
View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: grid align baseline</title>
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
<meta name="assert" content="This test checks that baseline alignment works correctly for align-items and align-self properties">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<style>
.grid {
width: 600px;
grid-auto-columns: 1fr;
position: relative;
margin-bottom: 20px;
font: 20px/1 Ahem;
}
.grid :nth-child(1) { background-color: blue; }
.grid :nth-child(2) { background-color: green; }
.grid :nth-child(3) { background-color: red; }
.grid :nth-child(4) { background-color: yellow; }
.grid :nth-child(5) { background-color: purple; }
.grid :nth-child(6) { background-color: orange; }
.grid :nth-child(7) { background-color: lime; }
.grid :nth-child(8) { background-color: lightblue; }
.grid :nth-child(9) { background-color: darkred; }
.grid :nth-child(10) { background-color: gold; }
.grid :nth-child(11) { background-color: salmon; }
.firstRowThirdColumn {
grid-row: 1;
grid-column: 3;
}
.firstRowFourthColumn {
grid-row: 1;
grid-column: 4;
}
.firstRowFifthColumn {
grid-row: 1;
grid-column: 5;
}
</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(() => { runTests(); })">
<div class="grid alignItemsBaseline">
<div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
<div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset-x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
<div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="400" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
</div>
<div class="grid">
<div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn alignSelfBaseline" style="height: 20px;"></div>
<div data-expected-height="10" data-offset-y="30" class="firstRowSecondColumn alignSelfBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
<div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn alignSelfBaseline" style="height: 10px; margin: 20px 0 0;"></div>
<div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
</div>
<div class="grid">
<div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline2" data-offset-y="0" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
<div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
<div id="baseline3" data-expected-height="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
<div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn" style="height: 100px;"></div>
</div>
<div class="grid">
<div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
<div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
<div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
<div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
</div>
<div id="log"></div>
</body>
<script>
function runTests() {
var baseline1 = document.getElementById("baseline1");
var baseline2 = document.getElementById("baseline2");
var baseline3 = document.getElementById("baseline3");
var baseline4 = document.getElementById("baseline4");
var baseline5 = document.getElementById("baseline5");
checkLayout('.grid', false);
test(() => {assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline;")},
"Additional Check 1");
test(() => {assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item;")}, "Additional Check 2");
test(() => {assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other;")}, "Additional Check 3");
test(() => {assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
done();
};
</script>

30
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>CSS Grid Layout Test: Ignore auto-margins in the track sizing algorithm</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" 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/#auto-margins"/>
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=776581"/>
<link rel="match" href="../reference/grid-container-auto-margins-scrollbars-001-ref.html">
<meta name="assert" content="This test ensures that the grid logic ignores any 'auto' margin during the track sizing algorithm. Previously resolved auto-margins should not affect the track sizing computation."/>
<style>
body {
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr auto;
height: 100vh;
}
.item1 {
margin: 0px auto;
}
.item2 {
background-color: cyan;
height: 50px;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<script>
document.body.style = "overflow: hidden;";
document.body.offsetLeft;
document.body.style = "overflow: auto;";
</script>

379
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html Normal file
View file

@ -0,0 +1,379 @@
<!DOCTYPE html>
<title>CSS Grid Layout Test: content distribution alignment and self alignment.</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-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/grid.css">
<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." />
<style>
.grid {
grid-template-columns: 200px 100px;
grid-template-rows: 100px 50px;
width: 500px;
height: 350px;
position: relative;
font: 10px/1 Ahem;
}
.gridGaps {
grid-gap: 10px 20px;
}
</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>
<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
<div class="grid contentSpaceBetween itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
<div class="grid contentSpaceBetween itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
<div class="grid contentSpaceAround itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
<div class="grid contentSpaceAround itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid contentSpaceEvenly itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid contentSpaceEvenly itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceBetween itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceBetween itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceAround itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceAround itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceEvenly itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceEvenly itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>
<!-- RTL direction. -->
<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceBetween itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceBetween itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceAround itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceAround itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceEvenly itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceEvenly itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>
<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
<!-- Dummy DIVs to help checking the result visually. -->
<div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
<div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
<div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
<div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
<div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>
</body>

561
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html Normal file
View file

@ -0,0 +1,561 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=602670">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/grid.css">
<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track." />
<style>
body {
margin: 0px;
}
.grid {
position: relative;
}
.spanningTwo {
grid-auto-columns: 20px;
grid-auto-rows: 40px;
grid-template-areas: "a a b"
"c d b";
width: 300px;
height: 200px;
}
.spanningThree {
grid-auto-columns: 50px;
grid-auto-rows: 50px;
grid-template-areas: ". . . . . ."
". b b b c ."
". . . . c ."
". . . . c ."
". . . . . .";
width: 550px;
height: 450px;
}
.gridRowColumnGaps {
grid-row-gap: 20px;
grid-column-gap: 10px;
}
.i1 { grid-row: 1; }
.i2 { grid-row: 2; }
.i3 { grid-row: 3; grid-column: 6; }
.i4 { grid-row: 4; grid-column: 6; }
.i5 { grid-row: 5; grid-column: 6; }
.a {
grid-area: a;
background-color: blue;
}
.b {
grid-area: b;
background-color: lime;
}
.c {
grid-area: c;
background-color: purple;
}
.d {
grid-area: d;
background-color: orange;
}
.stretchedGrid {
grid-auto-columns: minmax(20px, auto);
grid-auto-rows: minmax(40px, auto);
}
.cell {
width: 20px;
height: 40px;
}
.cell1 {
width: 20px;
height: 20px;
}
</style>
</head>
<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 | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
<div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
<div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'default' | self-alignment: center</p>
<div class="grid spanningThree">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'default' | self-alignment: end</p>
<div class="grid spanningThree">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningThree contentSpaceBetween">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningThree contentSpaceBetween">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
<div class="grid spanningThree gridRowColumnGaps">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
<div class="grid spanningThree gridRowColumnGaps">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
<div style="position: relative">
<p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
<div style="position: relative">
<p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<!-- RTL direction. -->
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
<div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
<div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
<div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'default' | self-alignment: center</p>
<div class="grid spanningThree directionRTL">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'default' | self-alignment: end</p>
<div class="grid spanningThree directionRTL">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningThree contentSpaceBetween directionRTL">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningThree contentSpaceBetween directionRTL">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
<div class="grid spanningThree gridRowColumnGaps directionRTL">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
<div class="grid spanningThree gridRowColumnGaps directionRTL">
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
<div class="i1" style="background: blue;"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i1" style="background: blue"></div>
<div class="i1" style="background: red"></div>
<div class="i2" style="background: red"></div>
<div class="i2" style="background: blue"></div>
<div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
<div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
<div class="i3" style="background: red"></div>
<div class="i4" style="background: blue"></div>
<div class="i5" style="background: red"></div>
</div>
</div>
</body>
</html>

167
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html Normal file
View file

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content alignment and auto sized tracks.</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-1/#auto-tracks">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<meta name="assert" content="Test that 'stretch' value for content alignment properties is applied only on 'auto-sized' tracks, which are the ones with an 'auto' max sizing function." />
<style>
body {
margin: 0px;
}
.grid {
display: grid;
background-color: grey;
position: relative;
}
.definiteSize {
width: 200px;
height: 300px;
}
.item {
width: 40px;
height: 80px;
}
.content {
width: 20px;
height: 40px;
}
.firstRowFirstColumn {
background-color: blue;
grid-column: 1;
grid-row: 1;
}
.firstRowSecondColumn {
background-color: lime;
grid-column: 2;
grid-row: 1;
}
.secondRowFirstColumn {
background-color: purple;
grid-column: 1;
grid-row: 2;
}
.secondRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: 2;
}
/* track sizes allowed to be stetched */
.autoTracks { grid: auto auto / auto auto; }
.autoMaxTracks { grid: minmax(40px, auto) minmax(40px, auto) / minmax(20px, auto) minmax(20px, auto); }
/* content-sized tracks disallowed to be stetched */
.minContentTracks { grid: min-content min-content / min-content min-content; }
.maxContentTracks { grid: max-content max-content / max-content max-content; }
.minMaxWithMaxContentTracks { grid: minmax(20px, max-content) minmax(20px, max-content) / minmax(20px, max-content) minmax(20px, max-content); }
.minMaxWithMinContentTracks { grid: minmax(20px, min-content) minmax(20px, min-content) / minmax(20px, min-content) minmax(20px, min-content); }
.minMaxWithMinAutoTracks { grid: minmax(auto, max-content) minmax(auto, max-content) / minmax(auto, max-content) minmax(auto, max-content); }
.fitContentTracks { grid: fit-content(20px) fit-content(20px) / fit-content(40px) fit-content(40px); font: 10px/1 Ahem; }
</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>
</head>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<div style="position: relative">
<p>cols: 'auto' | rows: 'auto' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize autoTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'minmax(20px, auto)' | rows: 'minmax(40px, auto)' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize autoMaxTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'min-content' | rows: 'min-content' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize minContentTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'max-content' | rows: 'max-content' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize maxContentTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'minmax(20px, max-content)' | rows: 'minmax(20px, max-content)' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize minMaxWithMaxContentTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'minmax(20px, min-content)' | rows: 'minmax(20px, min-content)' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize minMaxWithMinContentTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'minmax(auto, max-content)' | rows: 'minmax(auto, max-content)' | definite-sized container | definite-sized items </p>
<div class="grid contentStretch itemsStart definiteSize minMaxWithMinAutoTracks" data-expected-width="200" data-expected-height="300">
<div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
<div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
</div>
</div>
<div style="position: relative">
<p>cols: 'fit-content(40px)' | rows: 'fit-content(20px)' | definite-sized container | content-sized items</p>
<div class="grid contentStretch itemsStart definiteSize fitContentTracks" data-expected-width="200" data-expected-height="300">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
<div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
<div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
</div>
</div>
</body>
</html>

235
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html Normal file
View file

@ -0,0 +1,235 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content alignment and overflow alignment.</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-align-3/#overflow-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
<style>
body {
margin: 0;
}
.container {
position: relative;
float: left;
}
.grid {
grid-template-columns: 50px 50px;
grid-template-rows: 100px 100px;
}
.contentSizedTracks {
grid-template: max-content 100px / max-content 50px;
}
.overflowWidth {
width: 60px;
height: 300px;
}
.overflowHeight {
width: 200px;
height: 150px;
}
.item1 {
width: 50px;
height: 150px;
}
.item2 {
width: 150px;
height: 100px;
}
.minSize {
min-width: 300px;
min-height: 400px;
}
.maxSize {
max-width: 100px;
max-height: 100px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.grid')">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
<div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
<div class="firstRowFirstColumn" data-offset-x="0" 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="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
<div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
<div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
<div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
<div class="firstRowFirstColumn" data-offset-x="0" 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="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
<div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
<div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
<div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" 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="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
<div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" 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="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
<div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100">
<div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div>
<div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
<div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100">
<div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
<div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
<div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400">
<div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
<div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
<div class="container" style="margin-right: 25px;">
<div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400">
<div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
<div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
</div>
</div>
<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
<br clear="all">
</body>
</html>

143
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks.</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-1/#auto-tracks">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track." />
<style>
body {
margin: 0px;
}
.grid {
grid-auto-columns: 20px;
grid-auto-rows: 40px;
grid-template-areas: "a a b"
"c d b";
position: relative;
width: 300px;
height: 200px;
}
.a {
grid-area: a;
background-color: blue;
}
.b {
grid-area: b;
background-color: lime;
}
.c {
grid-area: c;
background-color: purple;
}
.d {
grid-area: d;
background-color: orange;
}
.stretchedGrid {
grid-auto-columns: auto;
grid-auto-rows: auto;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.grid')">
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
<div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
<div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-around'</p>
<div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
<div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
<div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-evenly'</p>
<div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
<div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
<div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
<div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
<div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<!-- RTL direction. -->
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
<div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-around'</p>
<div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
<div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
<div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-evenly''</p>
<div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
<div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
<div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
<div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
<div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
<div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
</body>
</html>

143
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-lr).</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-1/#auto-tracks">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'." />
<style>
body {
margin: 0px;
}
.grid {
grid-auto-columns: 20px;
grid-auto-rows: 40px;
grid-template-areas: "a a b"
"c d b";
position: relative;
width: 200px;
height: 300px;
}
.a {
grid-area: a;
background-color: blue;
}
.b {
grid-area: b;
background-color: lime;
}
.c {
grid-area: c;
background-color: purple;
}
.d {
grid-area: d;
background-color: orange;
}
.stretchedGrid {
grid-auto-columns: auto;
grid-auto-rows: auto;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.grid')">
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
<div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
<div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-around'</p>
<div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
<div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
<div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-evenly'</p>
<div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
<div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
<div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
<div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
<div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<!-- RTL direction. -->
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
<div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-around'</p>
<div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
<div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
<div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-evenly'</p>
<div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
<div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
<div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
<div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
</body>
</html>

145
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html Normal file
View file

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-rl).</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-1/#auto-tracks">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'." />
<style>
body {
margin: 0px;
}
.grid {
grid-auto-columns: 20px;
grid-auto-rows: 40px;
grid-template-areas: "a a b"
"c d b";
position: relative;
width: 200px;
height: 300px;
}
.a {
grid-area: a;
background-color: blue;
}
.b {
grid-area: b;
background-color: lime;
}
.c {
grid-area: c;
background-color: purple;
}
.d {
grid-area: d;
background-color: orange;
}
.stretchedGrid {
grid-auto-columns: auto;
grid-auto-rows: auto;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.grid')">
<p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
<div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
<div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-around'</p>
<div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
<div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
<div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'space-evenly'</p>
<div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
<div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
<div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: LTR | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
<div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
<div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
<!-- RTL direction. -->
<div style="position: relative">
<p>direction: RTL | distribution: 'space-between'</p>
<div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
<div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-around'</p>
<div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
<div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
<div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'space-evenly'</p>
<div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
<div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
<div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
<div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
</div>
</div>
<div style="position: relative">
<p>direction: RTL | distribution: 'stretch'</p>
<div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
<div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
<div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
<div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
<div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
</div>
</div>
</body>
</html>