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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 2 <link href="resources/grid.css" rel="stylesheet">
5 <link href="resources/grid-alignment.css" rel="stylesheet"> 3 <link href="resources/grid-alignment.css" rel="stylesheet">
6 <script src="../../resources/check-layout.js"></script>
7 <style> 4 <style>
8 body { 5
9 margin: 0px; 6 .grid {
7 grid-template-columns: 200px 100px;
8 grid-template-rows: 100px 50px;
9 width: 500px;
10 height: 350px;
11 position: relative;
12 font: 10px/1 Ahem;
10 } 13 }
11 14
12 .grid { 15 .gridGaps {
13 position: relative; 16 grid-gap: 10px 20px;
14 } 17 }
15 .spanningTwo { 18
16 grid-auto-columns: 20px;
17 grid-auto-rows: 40px;
18 grid-template-areas: "a a b"
19 "c d b";
20 width: 300px;
21 height: 200px;
22 }
23 .spanningThree {
24 grid-auto-columns: 50px;
25 grid-auto-rows: 50px;
26 grid-template-areas: ". . . . . ."
27 ". b b b c ."
28 ". . . . c ."
29 ". . . . c ."
30 ". . . . . .";
31 width: 550px;
32 height: 450px;
33 }
34
35 .gridRowColumnGaps {
36 grid-row-gap: 20px;
37 grid-column-gap: 10px;
38 }
39
40 .i1 { grid-row: 1; }
41 .i2 { grid-row: 2; }
42 .i3 { grid-row: 3; grid-column: 6; }
43 .i4 { grid-row: 4; grid-column: 6; }
44 .i5 { grid-row: 5; grid-column: 6; }
45
46 .a {
47 grid-area: a;
48 background-color: blue;
49 }
50 .b {
51 grid-area: b;
52 background-color: lime;
53 }
54 .c {
55 grid-area: c;
56 background-color: purple;
57 }
58 .d {
59 grid-area: d;
60 background-color: orange;
61 }
62 .stretchedGrid {
63 grid-auto-columns: minmax(20px, auto);
64 grid-auto-rows: minmax(40px, auto);
65 }
66
67 .cell {
68 width: 20px;
69 height: 40px;
70 }
71 .cell1 {
72 width: 20px;
73 height: 20px;
74 }
75 </style> 19 </style>
76 </head> 20 <script src="../../resources/testharness.js"></script>
21 <script src="../../resources/testharnessreport.js"></script>
22 <script src="../../resources/check-layout-th.js"></script>
77 <body onload="checkLayout('.grid')"> 23 <body onload="checkLayout('.grid')">
78 24 <div id="log"></div>
79 <p>This test checks that Content Distribution alignment works fine in combinatio n with Self Alignmet and items span more than one track.</p> 25
80 26 <p>This test checks that Content Distribution alignment works fine in combinatio n with Self Alignmet and items in just one cell.</p>
81 <div style="position: relative"> 27
82 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</ p> 28 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
83 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> 29 <div class="grid contentSpaceBetween itemsCenter">
84 <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div> 30 <!-- Dummy DIVs to help checking the result visually. -->
85 <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div> 31 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
86 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div> 32 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
87 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 33 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
88 </div> 34 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
89 </div> 35
90 36 <div class="firstRowFirstColumn"
91 <div style="position: relative"> 37 data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expe cted-height="10">X</div>
92 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 38 <div class="firstRowSecondColumn"
93 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200"> 39 data-offset-x="445" data-offset-y="45" data-expected-width="10" data-exp ected-height="10">X</div>
94 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 40 <div class="secondRowFirstColumn"
95 <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 41 data-offset-x="95" data-offset-y="320" data-expected-width="10" data-exp ected-height="10">X</div>
96 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div> 42 <div class="secondRowSecondColumn"
97 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 43 data-offset-x="445" data-offset-y="320" data-expected-width="10" data-ex pected-height="10">X</div>
98 </div> 44 </div>
99 </div> 45
100 46 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
101 <div style="position: relative"> 47 <div class="grid contentSpaceBetween itemsEnd">
102 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p > 48 <!-- Dummy DIVs to help checking the result visually. -->
103 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" d ata-expected-height="200"> 49 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
104 <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y=" 30" data-expected-width="20" data-expected-height="40"></div> 50 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
105 <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div> 51 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
106 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div> 52 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
107 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 53
108 </div> 54 <div class="firstRowFirstColumn"
109 </div> 55 data-offset-x="190" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
110 56 <div class="firstRowSecondColumn"
111 <div style="position: relative"> 57 data-offset-x="490" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
112 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> 58 <div class="secondRowFirstColumn"
113 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" d ata-expected-height="200"> 59 data-offset-x="190" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
114 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30 " data-expected-width="20" data-expected-height="40"></div> 60 <div class="secondRowSecondColumn"
115 <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 61 data-offset-x="490" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
116 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div> 62 </div>
117 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 63
118 </div> 64 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
119 </div> 65 <div class="grid contentSpaceAround itemsCenter">
120 66 <!-- Dummy DIVs to help checking the result visually. -->
121 <div style="position: relative"> 67 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
122 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p > 68 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
123 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" d ata-expected-height="200"> 69 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
124 <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y= "40" data-expected-width="20" data-expected-height="40"></div> 70 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
125 <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="8 0" data-expected-width="20" data-expected-height="40"></div> 71
126 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div> 72 <div class="firstRowFirstColumn"
127 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 73 data-offset-x="145" data-offset-y="95" data-expected-width="10" data-exp ected-height="10">X</div>
128 </div> 74 <div class="firstRowSecondColumn"
129 </div> 75 data-offset-x="395" data-offset-y="95" data-expected-width="10" data-exp ected-height="10">X</div>
130 76 <div class="secondRowFirstColumn"
131 <div style="position: relative"> 77 data-offset-x="145" data-offset-y="270" data-expected-width="10" data-ex pected-height="10">X</div>
132 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> 78 <div class="secondRowSecondColumn"
133 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" d ata-expected-height="200"> 79 data-offset-x="395" data-offset-y="270" data-expected-width="10" data-ex pected-height="10">X</div>
134 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40 " data-expected-width="20" data-expected-height="40"></div> 80 </div>
135 <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 81
136 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div> 82 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
137 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 83 <div class="grid contentSpaceAround itemsEnd">
138 </div> 84 <!-- Dummy DIVs to help checking the result visually. -->
139 </div> 85 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
140 86 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
141 <div style="position: relative"> 87 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
142 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> 88 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
143 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-wid th="300" data-expected-height="200"> 89
144 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 90 <div class="firstRowFirstColumn"
145 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240 " data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 91 data-offset-x="240" data-offset-y="140" data-expected-width="10" data-ex pected-height="10">X</div>
146 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 92 <div class="firstRowSecondColumn"
147 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 93 data-offset-x="440" data-offset-y="140" data-expected-width="10" data-ex pected-height="10">X</div>
148 </div> 94 <div class="secondRowFirstColumn"
149 </div> 95 data-offset-x="240" data-offset-y="290" data-expected-width="10" data-ex pected-height="10">X</div>
150 96 <div class="secondRowSecondColumn"
151 <div style="position: relative"> 97 data-offset-x="440" data-offset-y="290" data-expected-width="10" data-ex pected-height="10">X</div>
152 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> 98 </div>
153 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-wid th="300" data-expected-height="200"> 99
154 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data -offset-y="60" data-expected-width="20" data-expected-height="40"></div> 100 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
155 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data -offset-y="160" data-expected-width="20" data-expected-height="40"></div> 101 <div class="grid contentSpaceEvenly itemsCenter">
156 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 102 <!-- Dummy DIVs to help checking the result visually. -->
157 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 103 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
158 </div> 104 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
159 </div> 105 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
160 106 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
161 <div style="position: relative"> 107
162 <p>direction: LTR | distribution: 'default' | self-alignment: center</p> 108 <div class="firstRowFirstColumn"
163 <div class="grid spanningThree"> 109 data-offset-x="162" data-offset-y="112" data-expected-width="10" data-ex pected-height="10">X</div>
164 <div class="i1" style="background: blue"></div> 110 <div class="firstRowSecondColumn"
165 <div class="i1" style="background: red"></div> 111 data-offset-x="378" data-offset-y="112" data-expected-width="10" data-ex pected-height="10">X</div>
166 <div class="i1" style="background: blue"></div> 112 <div class="secondRowFirstColumn"
167 <div class="i1" style="background: red"></div> 113 data-offset-x="162" data-offset-y="253" data-expected-width="10" data-ex pected-height="10">X</div>
168 <div class="i1" style="background: blue"></div> 114 <div class="secondRowSecondColumn"
169 <div class="i1" style="background: red"></div> 115 data-offset-x="378" data-offset-y="253" data-expected-width="10" data-ex pected-height="10">X</div>
170 <div class="i2" style="background: red"></div> 116 </div>
171 <div class="i2" style="background: blue"></div> 117
172 <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y ="50" data-expected-width="20" data-expected-height="20"></div> 118 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
173 <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y=" 115" data-expected-width="20" data-expected-height="20"></div> 119 <div class="grid contentSpaceEvenly itemsEnd">
174 <div class="i3" style="background: red"></div> 120 <!-- Dummy DIVs to help checking the result visually. -->
175 <div class="i4" style="background: blue"></div> 121 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
176 <div class="i5" style="background: red"></div> 122 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
177 </div> 123 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
178 </div> 124 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
179 125
180 <div style="position: relative"> 126 <div class="firstRowFirstColumn"
181 <p>direction: LTR | distribution: 'default' | self-alignment: end</p> 127 data-offset-x="257" data-offset-y="157" data-expected-width="10" data-ex pected-height="10">X</div>
182 <div class="grid spanningThree"> 128 <div class="firstRowSecondColumn"
183 <div class="i1" style="background: blue"></div> 129 data-offset-x="423" data-offset-y="157" data-expected-width="10" data-ex pected-height="10">X</div>
184 <div class="i1" style="background: red"></div> 130 <div class="secondRowFirstColumn"
185 <div class="i1" style="background: blue"></div> 131 data-offset-x="257" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
186 <div class="i1" style="background: red"></div> 132 <div class="secondRowSecondColumn"
187 <div class="i1" style="background: blue"></div> 133 data-offset-x="423" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
188 <div class="i1" style="background: red"></div> 134 </div>
189 <div class="i2" style="background: red"></div> 135
190 <div class="i2" style="background: blue"></div> 136 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-a lignment: center</p>
191 <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="5 0" data-expected-width="20" data-expected-height="20"></div> 137 <div class="grid gridGaps contentSpaceBetween itemsCenter">
192 <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180 " data-expected-width="20" data-expected-height="20"></div> 138 <!-- Dummy DIVs to help checking the result visually. -->
193 <div class="i3" style="background: red"></div> 139 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
194 <div class="i4" style="background: blue"></div> 140 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
195 <div class="i5" style="background: red"></div> 141 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
196 </div> 142 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
197 </div> 143
198 144 <div class="firstRowFirstColumn"
199 <div style="position: relative"> 145 data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expe cted-height="10">X</div>
200 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</ p> 146 <div class="firstRowSecondColumn"
201 <div class="grid spanningThree contentSpaceBetween"> 147 data-offset-x="445" data-offset-y="45" data-expected-width="10" data-exp ected-height="10">X</div>
202 <div class="i1" style="background: blue;"></div> 148 <div class="secondRowFirstColumn"
203 <div class="i1" style="background: red"></div> 149 data-offset-x="95" data-offset-y="320" data-expected-width="10" data-exp ected-height="10">X</div>
204 <div class="i1" style="background: blue"></div> 150 <div class="secondRowSecondColumn"
205 <div class="i1" style="background: red"></div> 151 data-offset-x="445" data-offset-y="320" data-expected-width="10" data-ex pected-height="10">X</div>
206 <div class="i1" style="background: blue"></div> 152 </div>
207 <div class="i1" style="background: red"></div> 153
208 <div class="i2" style="background: red"></div> 154 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-a lignment: end</p>
209 <div class="i2" style="background: blue"></div> 155 <div class="grid gridGaps contentSpaceBetween itemsEnd">
210 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y ="100" data-expected-width="20" data-expected-height="20"></div> 156 <!-- Dummy DIVs to help checking the result visually. -->
211 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y=" 215" data-expected-width="20" data-expected-height="20"></div> 157 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
212 <div class="i3" style="background: red"></div> 158 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
213 <div class="i4" style="background: blue"></div> 159 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
214 <div class="i5" style="background: red"></div> 160 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
215 </div> 161
216 </div> 162 <div class="firstRowFirstColumn"
217 163 data-offset-x="190" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
218 <div style="position: relative"> 164 <div class="firstRowSecondColumn"
219 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> 165 data-offset-x="490" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
220 <div class="grid spanningThree contentSpaceBetween"> 166 <div class="secondRowFirstColumn"
221 <div class="i1" style="background: blue;"></div> 167 data-offset-x="190" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
222 <div class="i1" style="background: red"></div> 168 <div class="secondRowSecondColumn"
223 <div class="i1" style="background: blue"></div> 169 data-offset-x="490" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
224 <div class="i1" style="background: red"></div> 170 </div>
225 <div class="i1" style="background: blue"></div> 171
226 <div class="i1" style="background: red"></div> 172 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-al ignment: center</p>
227 <div class="i2" style="background: red"></div> 173 <div class="grid gridGaps contentSpaceAround itemsCenter">
228 <div class="i2" style="background: blue"></div> 174 <!-- Dummy DIVs to help checking the result visually. -->
229 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="1 00" data-expected-width="20" data-expected-height="20"></div> 175 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
230 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330 " data-expected-width="20" data-expected-height="20"></div> 176 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
231 <div class="i3" style="background: red"></div> 177 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
232 <div class="i4" style="background: blue"></div> 178 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
233 <div class="i5" style="background: red"></div> 179
234 </div> 180 <div class="firstRowFirstColumn"
235 </div> 181 data-offset-x="140" data-offset-y="93" data-expected-width="10" data-exp ected-height="10">X</div>
236 182 <div class="firstRowSecondColumn"
237 <div style="position: relative"> 183 data-offset-x="400" data-offset-y="93" data-expected-width="10" data-exp ected-height="10">X</div>
238 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> 184 <div class="secondRowFirstColumn"
239 <div class="grid spanningThree gridRowColumnGaps"> 185 data-offset-x="140" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
240 <div class="i1" style="background: blue"></div> 186 <div class="secondRowSecondColumn"
241 <div class="i1" style="background: red"></div> 187 data-offset-x="400" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
242 <div class="i1" style="background: blue"></div> 188 </div>
243 <div class="i1" style="background: red"></div> 189
244 <div class="i1" style="background: blue"></div> 190 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-al ignment: end</p>
245 <div class="i1" style="background: red"></div> 191 <div class="grid gridGaps contentSpaceAround itemsEnd">
246 <div class="i2" style="background: red"></div> 192 <!-- Dummy DIVs to help checking the result visually. -->
247 <div class="i2" style="background: blue"></div> 193 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
248 <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y ="70" data-expected-width="20" data-expected-height="20"></div> 194 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
249 <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y=" 155" data-expected-width="20" data-expected-height="20"></div> 195 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
250 <div class="i3" style="background: red"></div> 196 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
251 <div class="i4" style="background: blue"></div> 197
252 <div class="i5" style="background: red"></div> 198 <div class="firstRowFirstColumn"
253 </div> 199 data-offset-x="235" data-offset-y="138" data-expected-width="10" data-ex pected-height="10">X</div>
254 </div> 200 <div class="firstRowSecondColumn"
255 201 data-offset-x="445" data-offset-y="138" data-expected-width="10" data-ex pected-height="10">X</div>
256 <div style="position: relative"> 202 <div class="secondRowFirstColumn"
257 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> 203 data-offset-x="235" data-offset-y="293" data-expected-width="10" data-ex pected-height="10">X</div>
258 <div class="grid spanningThree gridRowColumnGaps"> 204 <div class="secondRowSecondColumn"
259 <div class="i1" style="background: blue"></div> 205 data-offset-x="445" data-offset-y="293" data-expected-width="10" data-ex pected-height="10">X</div>
260 <div class="i1" style="background: red"></div> 206 </div>
261 <div class="i1" style="background: blue"></div> 207
262 <div class="i1" style="background: red"></div> 208 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al ignment: center</p>
263 <div class="i1" style="background: blue"></div> 209 <div class="grid gridGaps contentSpaceEvenly itemsCenter">
264 <div class="i1" style="background: red"></div> 210 <!-- Dummy DIVs to help checking the result visually. -->
265 <div class="i2" style="background: red"></div> 211 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
266 <div class="i2" style="background: blue"></div> 212 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
267 <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="7 0" data-expected-width="20" data-expected-height="20"></div> 213 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
268 <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240 " data-expected-width="20" data-expected-height="20"></div> 214 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
269 <div class="i3" style="background: red"></div> 215
270 <div class="i4" style="background: blue"></div> 216 <div class="firstRowFirstColumn"
271 <div class="i5" style="background: red"></div> 217 data-offset-x="155" data-offset-y="108" data-expected-width="10" data-ex pected-height="10">X</div>
272 </div> 218 <div class="firstRowSecondColumn"
273 </div> 219 data-offset-x="385" data-offset-y="108" data-expected-width="10" data-ex pected-height="10">X</div>
274 220 <div class="secondRowFirstColumn"
275 <!-- Same expected result than without gaps because space-between just use the r emaining availalbe space. --> 221 data-offset-x="155" data-offset-y="257" data-expected-width="10" data-ex pected-height="10">X</div>
276 <div style="position: relative"> 222 <div class="secondRowSecondColumn"
277 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-betwe en' | self-alignment: center</p> 223 data-offset-x="385" data-offset-y="257" data-expected-width="10" data-ex pected-height="10">X</div>
278 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> 224 </div>
279 <div class="i1" style="background: blue;"></div> 225
280 <div class="i1" style="background: red"></div> 226 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al ignment: end</p>
281 <div class="i1" style="background: blue"></div> 227 <div class="grid gridGaps contentSpaceEvenly itemsEnd">
282 <div class="i1" style="background: red"></div> 228 <!-- Dummy DIVs to help checking the result visually. -->
283 <div class="i1" style="background: blue"></div> 229 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
284 <div class="i1" style="background: red"></div> 230 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
285 <div class="i2" style="background: red"></div> 231 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
286 <div class="i2" style="background: blue"></div> 232 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
287 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y ="100" data-expected-width="20" data-expected-height="20"></div> 233
288 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y=" 215" data-expected-width="20" data-expected-height="20"></div> 234 <div class="firstRowFirstColumn"
289 <div class="i3" style="background: red"></div> 235 data-offset-x="250" data-offset-y="153" data-expected-width="10" data-ex pected-height="10">X</div>
290 <div class="i4" style="background: blue"></div> 236 <div class="firstRowSecondColumn"
291 <div class="i5" style="background: red"></div> 237 data-offset-x="430" data-offset-y="153" data-expected-width="10" data-ex pected-height="10">X</div>
292 </div> 238 <div class="secondRowFirstColumn"
293 </div> 239 data-offset-x="250" data-offset-y="277" data-expected-width="10" data-ex pected-height="10">X</div>
294 240 <div class="secondRowSecondColumn"
295 <!-- Same expected result than without gaps because space-between just use the r emaining availalbe space. --> 241 data-offset-x="430" data-offset-y="277" data-expected-width="10" data-ex pected-height="10">X</div>
296 <div style="position: relative">
297 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-betwe en' | self-alignment: end</p>
298 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
299 <div class="i1" style="background: blue;"></div>
300 <div class="i1" style="background: red"></div>
301 <div class="i1" style="background: blue"></div>
302 <div class="i1" style="background: red"></div>
303 <div class="i1" style="background: blue"></div>
304 <div class="i1" style="background: red"></div>
305 <div class="i2" style="background: red"></div>
306 <div class="i2" style="background: blue"></div>
307 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="1 00" data-expected-width="20" data-expected-height="20"></div>
308 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330 " data-expected-width="20" data-expected-height="20"></div>
309 <div class="i3" style="background: red"></div>
310 <div class="i4" style="background: blue"></div>
311 <div class="i5" style="background: red"></div>
312 </div>
313 </div> 242 </div>
314 243
315 <!-- RTL direction. --> 244 <!-- RTL direction. -->
316 <div style="position: relative"> 245
317 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</ p> 246 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
318 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected -width="300" data-expected-height="200"> 247 <div class="grid directionRTL contentSpaceBetween itemsCenter">
319 <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div> 248 <!-- Dummy DIVs to help checking the result visually. -->
320 <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 249 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
321 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 250 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
322 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 251 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
323 </div> 252 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
324 </div> 253
325 254 <div class="firstRowFirstColumn"
326 <div style="position: relative"> 255 data-offset-x="395" data-offset-y="45" data-expected-width="10" data-exp ected-height="10">X</div>
327 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 256 <div class="firstRowSecondColumn"
328 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected -width="300" data-expected-height="200"> 257 data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expe cted-height="10">X</div>
329 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 258 <div class="secondRowFirstColumn"
330 <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" d ata-expected-width="20" data-expected-height="40"></div> 259 data-offset-x="395" data-offset-y="320" data-expected-width="10" data-ex pected-height="10">X</div>
331 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 260 <div class="secondRowSecondColumn"
332 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div> 261 data-offset-x="45" data-offset-y="320" data-expected-width="10" data-exp ected-height="10">X</div>
333 </div> 262 </div>
334 </div> 263
335 264 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
336 <div style="position: relative"> 265 <div class="grid directionRTL contentSpaceBetween itemsEnd">
337 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p > 266 <!-- Dummy DIVs to help checking the result visually. -->
338 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected- width="300" data-expected-height="200"> 267 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
339 <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y= "30" data-expected-width="20" data-expected-height="40"></div> 268 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
340 <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80 " data-expected-width="20" data-expected-height="40"></div> 269 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
341 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 270 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
342 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 271
343 </div> 272 <div class="firstRowFirstColumn"
344 </div> 273 data-offset-x="300" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
345 274 <div class="firstRowSecondColumn"
346 <div style="position: relative"> 275 data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expec ted-height="10">X</div>
347 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> 276 <div class="secondRowFirstColumn"
348 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected- width="300" data-expected-height="200"> 277 data-offset-x="300" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
349 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30 " data-expected-width="20" data-expected-height="40"></div> 278 <div class="secondRowSecondColumn"
350 <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> 279 data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expe cted-height="10">X</div>
351 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 280 </div>
352 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div> 281
353 </div> 282 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
354 </div> 283 <div class="grid directionRTL contentSpaceAround itemsCenter">
355 284 <!-- Dummy DIVs to help checking the result visually. -->
356 <div style="position: relative"> 285 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
357 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p > 286 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
358 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected- width="300" data-expected-height="200"> 287 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
359 <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y= "40" data-expected-width="20" data-expected-height="40"></div> 288 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
360 <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80 " data-expected-width="20" data-expected-height="40"></div> 289
361 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 290 <div class="firstRowFirstColumn"
362 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 291 data-offset-x="345" data-offset-y="95" data-expected-width="10" data-exp ected-height="10">X</div>
363 </div> 292 <div class="firstRowSecondColumn"
364 </div> 293 data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expe cted-height="10">X</div>
365 294 <div class="secondRowFirstColumn"
366 <div style="position: relative"> 295 data-offset-x="345" data-offset-y="270" data-expected-width="10" data-ex pected-height="10">X</div>
367 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> 296 <div class="secondRowSecondColumn"
368 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected- width="300" data-expected-height="200"> 297 data-offset-x="95" data-offset-y="270" data-expected-width="10" data-exp ected-height="10">X</div>
369 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40 " data-expected-width="20" data-expected-height="40"></div> 298 </div>
370 <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> 299
371 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 300 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
372 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div> 301 <div class="grid directionRTL contentSpaceAround itemsEnd">
373 </div> 302 <!-- Dummy DIVs to help checking the result visually. -->
374 </div> 303 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
375 304 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
376 <div style="position: relative"> 305 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
377 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> 306 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
378 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data -expected-width="300" data-expected-height="200"> 307
379 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190 " data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> 308 <div class="firstRowFirstColumn"
380 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 309 data-offset-x="250" data-offset-y="140" data-expected-width="10" data-ex pected-height="10">X</div>
381 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 310 <div class="firstRowSecondColumn"
382 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 311 data-offset-x="50" data-offset-y="140" data-expected-width="10" data-exp ected-height="10">X</div>
383 </div> 312 <div class="secondRowFirstColumn"
384 </div> 313 data-offset-x="250" data-offset-y="290" data-expected-width="10" data-ex pected-height="10">X</div>
385 314 <div class="secondRowSecondColumn"
386 <div style="position: relative"> 315 data-offset-x="50" data-offset-y="290" data-expected-width="10" data-exp ected-height="10">X</div>
387 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> 316 </div>
388 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data -expected-width="300" data-expected-height="200"> 317
389 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data -offset-y="60" data-expected-width="20" data-expected-height="40"></div> 318 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
390 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-o ffset-y="160" data-expected-width="20" data-expected-height="40"></div> 319 <div class="grid directionRTL contentSpaceEvenly itemsCenter">
391 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 320 <!-- Dummy DIVs to help checking the result visually. -->
392 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div> 321 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
393 </div> 322 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
394 </div> 323 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
395 324 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
396 <div style="position: relative"> 325
397 <p>direction: RTL | distribution: 'default' | self-alignment: center</p> 326 <div class="firstRowFirstColumn"
398 <div class="grid spanningThree directionRTL"> 327 data-offset-x="328" data-offset-y="112" data-expected-width="10" data-ex pected-height="10">X</div>
399 <div class="i1" style="background: blue"></div> 328 <div class="firstRowSecondColumn"
400 <div class="i1" style="background: red"></div> 329 data-offset-x="112" data-offset-y="112" data-expected-width="10" data-ex pected-height="10">X</div>
401 <div class="i1" style="background: blue"></div> 330 <div class="secondRowFirstColumn"
402 <div class="i1" style="background: red"></div> 331 data-offset-x="328" data-offset-y="253" data-expected-width="10" data-ex pected-height="10">X</div>
403 <div class="i1" style="background: blue"></div> 332 <div class="secondRowSecondColumn"
404 <div class="i1" style="background: red"></div> 333 data-offset-x="112" data-offset-y="253" data-expected-width="10" data-ex pected-height="10">X</div>
405 <div class="i2" style="background: red"></div> 334 </div>
406 <div class="i2" style="background: blue"></div> 335
407 <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y ="50" data-expected-width="20" data-expected-height="20"></div> 336 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
408 <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y=" 115" data-expected-width="20" data-expected-height="20"></div> 337 <div class="grid directionRTL contentSpaceEvenly itemsEnd">
409 <div class="i3" style="background: red"></div> 338 <!-- Dummy DIVs to help checking the result visually. -->
410 <div class="i4" style="background: blue"></div> 339 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
411 <div class="i5" style="background: red"></div> 340 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
412 </div> 341 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
413 </div> 342 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
414 343
415 <div style="position: relative"> 344 <div class="firstRowFirstColumn"
416 <p>direction: RTL | distribution: 'default' | self-alignment: end</p> 345 data-offset-x="233" data-offset-y="157" data-expected-width="10" data-ex pected-height="10">X</div>
417 <div class="grid spanningThree directionRTL"> 346 <div class="firstRowSecondColumn"
418 <div class="i1" style="background: blue"></div> 347 data-offset-x="67" data-offset-y="157" data-expected-width="10" data-exp ected-height="10">X</div>
419 <div class="i1" style="background: red"></div> 348 <div class="secondRowFirstColumn"
420 <div class="i1" style="background: blue"></div> 349 data-offset-x="233" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
421 <div class="i1" style="background: red"></div> 350 <div class="secondRowSecondColumn"
422 <div class="i1" style="background: blue"></div> 351 data-offset-x="67" data-offset-y="273" data-expected-width="10" data-exp ected-height="10">X</div>
423 <div class="i1" style="background: red"></div> 352 </div>
424 <div class="i2" style="background: red"></div> 353
425 <div class="i2" style="background: blue"></div> 354 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-a lignment: center</p>
426 <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="5 0" data-expected-width="20" data-expected-height="20"></div> 355 <div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
427 <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180 " data-expected-width="20" data-expected-height="20"></div> 356 <!-- Dummy DIVs to help checking the result visually. -->
428 <div class="i3" style="background: red"></div> 357 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
429 <div class="i4" style="background: blue"></div> 358 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
430 <div class="i5" style="background: red"></div> 359 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
431 </div> 360 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
432 </div> 361
433 362 <div class="firstRowFirstColumn"
434 <div style="position: relative"> 363 data-offset-x="395" data-offset-y="45" data-expected-width="10" data-exp ected-height="10">X</div>
435 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</ p> 364 <div class="firstRowSecondColumn"
436 <div class="grid spanningThree contentSpaceBetween directionRTL"> 365 data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expe cted-height="10">X</div>
437 <div class="i1" style="background: blue;"></div> 366 <div class="secondRowFirstColumn"
438 <div class="i1" style="background: red"></div> 367 data-offset-x="395" data-offset-y="320" data-expected-width="10" data-ex pected-height="10">X</div>
439 <div class="i1" style="background: blue"></div> 368 <div class="secondRowSecondColumn"
440 <div class="i1" style="background: red"></div> 369 data-offset-x="45" data-offset-y="320" data-expected-width="10" data-exp ected-height="10">X</div>
441 <div class="i1" style="background: blue"></div> 370 </div>
442 <div class="i1" style="background: red"></div> 371
443 <div class="i2" style="background: red"></div> 372 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-a lignment: end</p>
444 <div class="i2" style="background: blue"></div> 373 <div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
445 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y ="100" data-expected-width="20" data-expected-height="20"></div> 374 <!-- Dummy DIVs to help checking the result visually. -->
446 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y=" 215" data-expected-width="20" data-expected-height="20"></div> 375 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
447 <div class="i3" style="background: red"></div> 376 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
448 <div class="i4" style="background: blue"></div> 377 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
449 <div class="i5" style="background: red"></div> 378 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
450 </div> 379
451 </div> 380 <div class="firstRowFirstColumn"
452 381 data-offset-x="300" data-offset-y="90" data-expected-width="10" data-exp ected-height="10">X</div>
453 <div style="position: relative"> 382 <div class="firstRowSecondColumn"
454 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> 383 data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expec ted-height="10">X</div>
455 <div class="grid spanningThree contentSpaceBetween directionRTL"> 384 <div class="secondRowFirstColumn"
456 <div class="i1" style="background: blue;"></div> 385 data-offset-x="300" data-offset-y="340" data-expected-width="10" data-ex pected-height="10">X</div>
457 <div class="i1" style="background: red"></div> 386 <div class="secondRowSecondColumn"
458 <div class="i1" style="background: blue"></div> 387 data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expe cted-height="10">X</div>
459 <div class="i1" style="background: red"></div> 388 </div>
460 <div class="i1" style="background: blue"></div> 389
461 <div class="i1" style="background: red"></div> 390 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-al ignment: center</p>
462 <div class="i2" style="background: red"></div> 391 <div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
463 <div class="i2" style="background: blue"></div> 392 <!-- Dummy DIVs to help checking the result visually. -->
464 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="1 00" data-expected-width="20" data-expected-height="20"></div> 393 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
465 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330 " data-expected-width="20" data-expected-height="20"></div> 394 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
466 <div class="i3" style="background: red"></div> 395 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
467 <div class="i4" style="background: blue"></div> 396 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
468 <div class="i5" style="background: red"></div> 397
469 </div> 398 <div class="firstRowFirstColumn"
470 </div> 399 data-offset-x="350" data-offset-y="93" data-expected-width="10" data-exp ected-height="10">X</div>
471 400 <div class="firstRowSecondColumn"
472 <div style="position: relative"> 401 data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expe cted-height="10">X</div>
473 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p> 402 <div class="secondRowFirstColumn"
474 <div class="grid spanningThree gridRowColumnGaps directionRTL"> 403 data-offset-x="350" data-offset-y="273" data-expected-width="10" data-ex pected-height="10">X</div>
475 <div class="i1" style="background: blue"></div> 404 <div class="secondRowSecondColumn"
476 <div class="i1" style="background: red"></div> 405 data-offset-x="90" data-offset-y="273" data-expected-width="10" data-exp ected-height="10">X</div>
477 <div class="i1" style="background: blue"></div> 406 </div>
478 <div class="i1" style="background: red"></div> 407
479 <div class="i1" style="background: blue"></div> 408 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-al ignment: end</p>
480 <div class="i1" style="background: red"></div> 409 <div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
481 <div class="i2" style="background: red"></div> 410 <!-- Dummy DIVs to help checking the result visually. -->
482 <div class="i2" style="background: blue"></div> 411 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
483 <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y ="70" data-expected-width="20" data-expected-height="20"></div> 412 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
484 <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y=" 155" data-expected-width="20" data-expected-height="20"></div> 413 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
485 <div class="i3" style="background: red"></div> 414 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
486 <div class="i4" style="background: blue"></div> 415
487 <div class="i5" style="background: red"></div> 416 <div class="firstRowFirstColumn"
488 </div> 417 data-offset-x="255" data-offset-y="138" data-expected-width="10" data-ex pected-height="10">X</div>
489 </div> 418 <div class="firstRowSecondColumn"
490 419 data-offset-x="45" data-offset-y="138" data-expected-width="10" data-exp ected-height="10">X</div>
491 <div style="position: relative"> 420 <div class="secondRowFirstColumn"
492 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p> 421 data-offset-x="255" data-offset-y="293" data-expected-width="10" data-ex pected-height="10">X</div>
493 <div class="grid spanningThree gridRowColumnGaps directionRTL"> 422 <div class="secondRowSecondColumn"
494 <div class="i1" style="background: blue"></div> 423 data-offset-x="45" data-offset-y="293" data-expected-width="10" data-exp ected-height="10">X</div>
495 <div class="i1" style="background: red"></div> 424 </div>
496 <div class="i1" style="background: blue"></div> 425
497 <div class="i1" style="background: red"></div> 426 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al ignment: center</p>
498 <div class="i1" style="background: blue"></div> 427 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
499 <div class="i1" style="background: red"></div> 428 <!-- Dummy DIVs to help checking the result visually. -->
500 <div class="i2" style="background: red"></div> 429 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
501 <div class="i2" style="background: blue"></div> 430 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
502 <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="7 0" data-expected-width="20" data-expected-height="20"></div> 431 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
503 <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240 " data-expected-width="20" data-expected-height="20"></div> 432 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
504 <div class="i3" style="background: red"></div> 433
505 <div class="i4" style="background: blue"></div> 434 <div class="firstRowFirstColumn"
506 <div class="i5" style="background: red"></div> 435 data-offset-x="335" data-offset-y="108" data-expected-width="10" data-ex pected-height="10">X</div>
507 </div> 436 <div class="firstRowSecondColumn"
508 </div> 437 data-offset-x="105" data-offset-y="108" data-expected-width="10" data-ex pected-height="10">X</div>
509 438 <div class="secondRowFirstColumn"
510 <div style="position: relative"> 439 data-offset-x="335" data-offset-y="257" data-expected-width="10" data-ex pected-height="10">X</div>
511 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-betwe en' | self-alignment: center</p> 440 <div class="secondRowSecondColumn"
512 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directi onRTL"> 441 data-offset-x="105" data-offset-y="257" data-expected-width="10" data-ex pected-height="10">X</div>
513 <div class="i1" style="background: blue;"></div> 442 </div>
514 <div class="i1" style="background: red"></div> 443
515 <div class="i1" style="background: blue"></div> 444 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al ignment: end</p>
516 <div class="i1" style="background: red"></div> 445 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
517 <div class="i1" style="background: blue"></div> 446 <!-- Dummy DIVs to help checking the result visually. -->
518 <div class="i1" style="background: red"></div> 447 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
519 <div class="i2" style="background: red"></div> 448 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
520 <div class="i2" style="background: blue"></div> 449 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
521 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y ="100" data-expected-width="20" data-expected-height="20"></div> 450 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div >
522 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y=" 215" data-expected-width="20" data-expected-height="20"></div> 451
523 <div class="i3" style="background: red"></div> 452 <div class="firstRowFirstColumn"
524 <div class="i4" style="background: blue"></div> 453 data-offset-x="240" data-offset-y="153" data-expected-width="10" data-ex pected-height="10">X</div>
525 <div class="i5" style="background: red"></div> 454 <div class="firstRowSecondColumn"
526 </div> 455 data-offset-x="60" data-offset-y="153" data-expected-width="10" data-exp ected-height="10">X</div>
527 </div> 456 <div class="secondRowFirstColumn"
528 457 data-offset-x="240" data-offset-y="277" data-expected-width="10" data-ex pected-height="10">X</div>
529 <div style="position: relative"> 458 <div class="secondRowSecondColumn"
530 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-betwe en' | self-alignment: end</p> 459 data-offset-x="60" data-offset-y="277" data-expected-width="10" data-exp ected-height="10">X</div>
531 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directi onRTL">
532 <div class="i1" style="background: blue;"></div>
533 <div class="i1" style="background: red"></div>
534 <div class="i1" style="background: blue"></div>
535 <div class="i1" style="background: red"></div>
536 <div class="i1" style="background: blue"></div>
537 <div class="i1" style="background: red"></div>
538 <div class="i2" style="background: red"></div>
539 <div class="i2" style="background: blue"></div>
540 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="1 00" data-expected-width="20" data-expected-height="20"></div>
541 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330 " data-expected-width="20" data-expected-height="20"></div>
542 <div class="i3" style="background: red"></div>
543 <div class="i4" style="background: blue"></div>
544 <div class="i5" style="background: red"></div>
545 </div>
546 </div> 460 </div>
547 461
548 </body> 462 </body>
549 </html>
OLDNEW
« 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