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

Update web-platform-tests to revision 20a217cb8488e4339e0c9610aba99e2654b676c3

Browse source
This commit is contained in:
WPT Sync Bot 2020-04-17 08:19:21 +00:00
parent 3ca86eeba5
commit 21de781e2a
285 changed files with 5707 additions and 670 deletions
Download patch file Download diff file Expand all files Collapse all files

40
tests/wpt/web-platform-tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<title>CSS Grid Layout Test: Percentage rows resolution in a flex item grid container</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=617876">
<link rel="match" href="../reference/flex-item-grid-container-percentage-rows-001-ref.html">
<meta name="assert" content="This test ensures that percentage rows are properly resolved for a grid container that is a flex item with a definite height.">
<link rel="stylesheet" href="/css/support/grid.css">
<style>
.flex {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
border: 5px solid;
}
.flexitem {
flex: 1;
background: magenta;
}
.grid {
display: grid;
grid: 50% / 1fr;
}
.griditem {
background: cyan;
}
</style>
<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
<div class="flex">
<div class="flexitem grid">
<div class="griditem"></div>
</div>
</div>

184
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html Normal file
View file

@ -0,0 +1,184 @@
<!DOCTYPE html>
<title>CSS Grid: auto-fill rows</title>
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
<link rel="help" href="https://crbug.com/619930">
<link rel="help" href="https://crbug.com/589460">
<link rel="help" href="https://crbug.com/648814">
<meta name="assert" content="Check that auto-fill rows are properly computed in a grid container"/>
<link href="/css/support/grid.css" rel="stylesheet">
<style>
.grid {
border: 2px solid magenta;
height: 200px;
width: 25px;
align-content: start;
grid-auto-rows: 157px;
grid-auto-columns: 25px;
float: left;
position: relative;
margin-right: 2px;
}
.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fill, 30px [autobar]); }
.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: blue; }
.item:nth-child(2) { background: green; }
.item:nth-child(3) { background: orange; }
.gap { grid-row-gap: 20px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="100" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px;" data-expected-height="94" data-expected-width="29">
<div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
<div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
<div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px; min-height: 130px;" data-expected-height="134" data-expected-width="29">
<div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
<div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
<div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="377" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: last 2 / foo" data-offset-y="60" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="130" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-row: autobar / -1" data-offset-y="175" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="160" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleTracks">
<div class="item" style="grid-row: a / 2 c" data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div>
<div class="item" style="grid-row: 3 / e; grid-column: 2;" data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleTracks gap">
<div class="item" style="grid-row: a / c" data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div>
<div class="item" style="grid-row: 3 / last; grid-column: 2;" data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div>
</div>
</body>

176
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html Normal file
View file

@ -0,0 +1,176 @@
<!DOCTYPE html>
<title>CSS Grid: auto-fit columns</title>
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap">
<link rel="help" href="https://crbug.com/619930">
<link rel="help" href="https://crbug.com/589460">
<link rel="help" href="https://crbug.com/645746">
<meta name="assert" content="Check that auto-fit columns are properly computed in a grid container"/>
<link href="/css/support/grid.css" rel="stylesheet">
<style>
.grid {
border: 2px solid magenta;
width: 200px;
position: relative;
justify-content: start;
grid-auto-columns: 157px;
grid-auto-rows: 25px;
}
.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); }
.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.gridMinMaxFixedFlex { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
.item { background-color: cyan; }
.item:nth-child(2n) { background-color: green; }
.gap { grid-column-gap: 20px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-column: autobar / -1" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleTracks">
<div class="item" style="grid-column: e / last;" data-offset-x="52" data-offset-y="0" data-expected-width="148" data-expected-height="25"></div>
<div class="item" style="grid-column: start / b;" data-offset-x="0" data-offset-y="25" data-expected-width="52" data-expected-height="25"></div>
</div>
<div class="grid gridMultipleTracks gap">
<div class="item" style="grid-column: c / -1;" data-offset-x="40" data-offset-y="0" data-expected-width="160" data-expected-height="25"></div>
</div>
<div class="grid gridMinMaxFixedFlex gap">
<div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
</div>
<div class="grid gridMinMaxFixedFlex gap">
<div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
<div class="item" style="grid-column-start: 2" data-offset-x="110" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
</div>
</body>

169
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html Normal file
View file

@ -0,0 +1,169 @@
<!DOCTYPE html>
<title>CSS Grid: auto-fit rows</title>
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
<link rel="help" href="https://crbug.com/619930">
<link rel="help" href="https://crbug.com/589460">
<meta name="assert" content="Check that auto-fit rows are properly computed in a grid container"/>
<link href="/css/support/grid.css" rel="stylesheet">
<style>
.grid {
border: 2px solid magenta;
height: 200px;
width: 25px;
align-content: start;
grid-auto-rows: 157px;
grid-auto-columns: 25px;
float: left;
position: relative;
margin-right: 2px;
}
.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); }
.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: cyan; }
.item:nth-child(2n) { background-color: green; }
.gap { grid-row-gap: 20px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat">
<div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
</div>
<div class="grid gridOnlyAutoRepeat gap">
<div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore">
<div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedBefore gap">
<div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter">
<div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixedAfter gap">
<div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed">
<div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
</div>
<div class="grid gridAutoRepeatAndFixed gap">
<div class="item" style="grid-row: autobar / -1" data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames">
<div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleNames gap">
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleTracks">
<div class="item" style="grid-row: e / last;" data-offset-y="52" data-offset-x="0" data-expected-height="148" data-expected-width="25"></div>
<div class="item" style="grid-row: start / b;" data-offset-y="0" data-offset-x="0" data-expected-height="52" data-expected-width="25"></div>
</div>
<div class="grid gridMultipleTracks gap">
<div class="item" style="grid-row: c / -1;" data-offset-y="40" data-offset-x="0" data-expected-height="160" data-expected-width="25"></div>
</div>
</body>

109
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html Normal file
View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<title>CSS Grid: auto repeat computation for intrinsic sizes.</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
<meta name="assert" content="Checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes."/>
<link rel="issue" href="https://crbug.com/621517"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
<style>
.grid {
border: 2px solid black;
position: relative;
padding-top: 10px;
justify-items: start;
}
.item {
background: cyan;
height: 20px;
}
.gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-content, 40px); }
.gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); }
.gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(min-content, 40px); }
.gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, auto); }
.paddingTop { padding-top: 10px; }
.abs {
height: 5px;
position: absolute;
width: 100%;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<!-- auto-fill -->
<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
</div>
</body>

151
tests/wpt/web-platform-tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html Normal file
View file

@ -0,0 +1,151 @@
<!DOCTYPE html>
<title>CSS Grid: auto-repeat tracks and intrinsic sizes.</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
<meta name="assert" content="Test ensure that grids properly recompute the number of auto repeat tracks when the min|max-content contributions of grid items changed."/>
<link rel="issue" href="https://crbug.com/621517"/>
<link rel="issue" href="https://crbug.com/633474"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
<style>
.grid {
border: 2px solid black;
position: relative;
min-width: 30px;
grid-auto-columns: 20px;
padding-top: 10px;
margin-bottom: 10px;
}
.abs { height: 5px; position: absolute; width: 100%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
{
var gridElement = document.getElementById(id);
gridElement.style.gridTemplateRows = gridTemplateRows;
gridElement.style.gridTemplateColumns = gridTemplateColumns;
}
function setItemSize(id, width, height)
{
var gridElement = document.getElementById(id);
gridElement.style.width = width;
gridElement.style.height = height;
}
function testGridDefinitions(gridItemsData)
{
var length = gridItemsData.length;
for (i = 0; i < length; ++i) {
var item = document.getElementById(gridItemsData[i].id);
item.setAttribute("data-expected-width", gridItemsData[i].width);
item.setAttribute("data-expected-height", gridItemsData[i].height);
item.setAttribute("data-offset-x", gridItemsData[i].x);
item.setAttribute("data-offset-y", gridItemsData[i].y);
}
checkLayout(".grid", false);
}
function testChangingGridDefinitions()
{
setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-content, 40px)');
setItemSize('item', '100px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
]);
setItemSize('item', '80px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
]);
setItemSize('item', '15px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' },
{ 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' }
]);
setItemSize('item', '120px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
]);
var grid = document.getElementById('grid1');
grid.className = grid.className.replace('max-content', 'min-content');
setItemSize('item', '100px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
]);
setItemSize('item', '80px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
]);
setItemSize('item', '15px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' },
{ 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' }
]);
setItemSize('item', '120px', '30px');
testGridDefinitions([
{ 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
{ 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
{ 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
{ 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
{ 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
]);
done();
}
window.addEventListener("load", testChangingGridDefinitions, false);
</script>
<div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div>
<div id="log"></div>
<div id="grid1" class="grid max-content">
<div id="item" style="grid-column: 1 / -1; background: cyan;"></div>
<div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div>
<div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div>
<div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div>
<div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div>
</div>

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

@ -0,0 +1,378 @@
<!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-align-3/#align-justify-content">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
<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>