Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1454)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html

Issue 1880393005: [css-grid] Fix alignment with content distribution (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix typo Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html
index 60aa72681361b7900615d9d37cf4b9bf27375a82..bc8df8d3ba61fb2dd33a107962968911fc53da7c 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html
@@ -1,549 +1,462 @@
<!DOCTYPE html>
-<html>
-<head>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
-<script src="../../resources/check-layout.js"></script>
<style>
-body {
- margin: 0px;
-}
.grid {
+ grid-template-columns: 200px 100px;
+ grid-template-rows: 100px 50px;
+ width: 500px;
+ height: 350px;
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;
+ font: 10px/1 Ahem;
}
-.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);
+.gridGaps {
+ grid-gap: 10px 20px;
}
-.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')">
-
-<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p>
-
-<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 availalbe 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 availalbe 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 id="log"></div>
+
+<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items in just one cell.</p>
+
+<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. -->
-<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>
+<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>
-</html>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698