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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl.html

Issue 1031853002: [CSS Grid Layout] Content Distribution support for grid. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Missing layout test expectations file. Created 5 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 | « LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl-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
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 body {
8 margin: 0px;
9 }
10
11 .grid {
12 grid-auto-columns: 20px;
13 grid-auto-rows: 40px;
14 position: relative;
15 width: 400px;
16 height: 300px;
17 }
18
19 .stretchedGrid {
20 grid-auto-rows: auto;
21 }
22
23 .alignContentSpaceBetween {
24 align-content: space-between;
25 }
26
27 .alignContentSpaceAround {
28 align-content: space-around;
29 }
30
31 .alignContentSpaceEvenly {
32 align-content: space-evenly;
33 }
34
35 .alignContentStretch {
36 align-content: stretch;
37 }
38
39 .thirdRowFirstColumn {
40 background-color: magenta;
41 grid-column: 1;
42 grid-row: 3;
43 }
44
45 .thirdRowSecondColumn {
46 background-color: navy;
47 grid-column: 2;
48 grid-row: 3;
49 }
50
51 .fourthRowFirstColumn {
52 background-color: green;
53 grid-column: 1;
54 grid-row: 4;
55 }
56
57 .fourthRowSecondColumn {
58 background-color: pink;
59 grid-column: 2;
60 grid-row: 4;
61 }
62 </style>
63 </head>
64 <body onload="checkLayout('.grid')">
65
66 <p>This test checks that the align-content property is applied correctly when us ing content-distribution values.</p>
67
68 <div style="position: relative">
69 <p>direction: LTR | align-content: 'space-between'</p>
70 <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="4 00" data-expected-height="300">
71 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
72 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
73 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="20"></div>
74 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
75 </div>
76 </div>
77
78 <div style="position: relative">
79 <p>direction: LTR | align-content: 'space-around'</p>
80 <div class="grid alignContentSpaceAround verticalRL" data-expected-width="40 0" data-expected-height="300">
81 <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
82 <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
83 <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
84 <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
85 </div>
86 </div>
87
88 <div style="position: relative">
89 <p>direction: LTR | align-content: 'space-evenly'</p>
90 <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="40 0" data-expected-height="300">
91 <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
92 <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
93 <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
94 <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
95 </div>
96 </div>
97
98 <div style="position: relative">
99 <p>direction: LTR | align-content: 'stretch'</p>
100 <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected -width="400" data-expected-height="300">
101 <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" d ata-expected-width="200" data-expected-height="20"></div>
102 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
103 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="200" data-expected-height="20"></div>
104 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
105 </div>
106 </div>
107
108 <div style="position: relative">
109 <p>direction: LTR | align-content: 'space-between'</p>
110 <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="4 00" data-expected-height="300">
111 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
112 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
113 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
114 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
115 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="40" data-expected-height="20"></div>
116 <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" d ata-expected-width="40" data-expected-height="20"></div>
117 </div>
118 </div>
119
120 <div style="position: relative">
121 <p>direction: LTR | align-content: 'space-around'</p>
122 <div class="grid alignContentSpaceAround verticalRL" data-expected-width="40 0" data-expected-height="300">
123 <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
124 <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
125 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
126 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
127 <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" da ta-expected-width="40" data-expected-height="20"></div>
128 <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
129 </div>
130 </div>
131
132 <div style="position: relative">
133 <p>direction: LTR | align-content: 'space-evenly'</p>
134 <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="40 0" data-expected-height="300">
135 <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
136 <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
137 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
138 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
139 <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" da ta-expected-width="40" data-expected-height="20"></div>
140 <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
141 </div>
142 </div>
143
144 <div style="position: relative">
145 <p>direction: LTR | align-content: 'stretch'</p>
146 <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected -width="400" data-expected-height="300">
147 <div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="0" d ata-expected-width="133" data-expected-height="20"></div>
148 <div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="20" data-expected-width="133" data-expected-height="20"></div>
149 <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="0" data-expected-width="134" data-expected-height="20"></div>
150 <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="20 " data-expected-width="134" data-expected-height="20"></div>
151 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="133" data-expected-height="20"></div>
152 <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" d ata-expected-width="133" data-expected-height="20"></div>
153 </div>
154 </div>
155
156 <div style="position: relative">
157 <p>direction: LTR | align-content: 'space-between'</p>
158 <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="4 00" data-expected-height="300">
159 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
160 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
161 <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
162 <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
163 <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
164 <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
165 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="20"></div>
166 <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
167 </div>
168 </div>
169
170 <div style="position: relative">
171 <p>direction: LTR | align-content: 'space-around'</p>
172 <div class="grid alignContentSpaceAround verticalRL" data-expected-width="40 0" data-expected-height="300">
173 <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
174 <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
175 <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
176 <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
177 <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
178 <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
179 <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
180 <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
181 </div>
182 </div>
183
184 <div style="position: relative">
185 <p>direction: LTR | align-content: 'space-evenly'</p>
186 <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="40 0" data-expected-height="300">
187 <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
188 <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
189 <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
190 <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20 " data-expected-width="40" data-expected-height="20"></div>
191 <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
192 <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
193 <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" d ata-expected-width="40" data-expected-height="20"></div>
194 <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
195 </div>
196 </div>
197
198 <div style="position: relative">
199 <p>direction: LTR | align-content: 'stretch'</p>
200 <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected -width="400" data-expected-height="300">
201 <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" d ata-expected-width="100" data-expected-height="20"></div>
202 <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
203 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
204 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20 " data-expected-width="100" data-expected-height="20"></div>
205 <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" d ata-expected-width="100" data-expected-height="20"></div>
206 <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
207 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="100" data-expected-height="20"></div>
208 <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
209 </div>
210 </div>
211
212 <!-- RTL direction. -->
213 <div style="position: relative">
214 <p>direction: RTL | align-content: 'space-between'</p>
215 <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expe cted-width="400" data-expected-height="300">
216 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
217 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
218 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
219 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
220 </div>
221 </div>
222
223 <div style="position: relative">
224 <p>direction: RTL | align-content: 'space-around'</p>
225 <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
226 <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
227 <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
228 <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
229 <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
230 </div>
231 </div>
232
233 <div style="position: relative">
234 <p>direction: RTL | align-content: 'space-evenly'</p>
235 <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
236 <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
237 <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
238 <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
239 <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
240 </div>
241 </div>
242
243 <div style="position: relative">
244 <p>direction: RTL | align-content: 'stretch'</p>
245 <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
246 <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
247 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260 " data-expected-width="200" data-expected-height="20"></div>
248 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
249 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
250 </div>
251 </div>
252
253 <div style="position: relative">
254 <p>direction: RTL | align-content: 'space-between'</p>
255 <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expe cted-width="400" data-expected-height="300">
256 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
257 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
258 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
259 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
260 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" d ata-expected-width="40" data-expected-height="20"></div>
261 <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
262 </div>
263 </div>
264
265 <div style="position: relative">
266 <p>direction: RTL | align-content: 'space-around'</p>
267 <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
268 <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
269 <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
270 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
271 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
272 <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
273 <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
274 </div>
275 </div>
276
277 <div style="position: relative">
278 <p>direction: RTL | align-content: 'space-evenly'</p>
279 <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
280 <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
281 <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
282 <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
283 <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
284 <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
285 <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
286 </div>
287 </div>
288
289 <div style="position: relative">
290 <p>direction: RTL | align-content: 'stretch'</p>
291 <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
292 <div class="firstRowFirstColumn" data-offset-x="267" data-offset-y="280" data-expected-width="133" data-expected-height="20"></div>
293 <div class="firstRowSecondColumn" data-offset-x="267" data-offset-y="260 " data-expected-width="133" data-expected-height="20"></div>
294 <div class="secondRowFirstColumn" data-offset-x="133" data-offset-y="280 " data-expected-width="134" data-expected-height="20"></div>
295 <div class="secondRowSecondColumn" data-offset-x="133" data-offset-y="26 0" data-expected-width="134" data-expected-height="20"></div>
296 <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" d ata-expected-width="133" data-expected-height="20"></div>
297 <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="133" data-expected-height="20"></div>
298 </div>
299 </div>
300
301 <div style="position: relative">
302 <p>direction: RTL | align-content: 'space-between'</p>
303 <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expe cted-width="400" data-expected-height="300">
304 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
305 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
306 <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
307 <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
308 <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
309 <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
310 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
311 <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
312 </div>
313 </div>
314
315 <div style="position: relative">
316 <p>direction: RTL | align-content: 'space-around'</p>
317 <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
318 <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
319 <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
320 <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
321 <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
322 <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
323 <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
324 <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
325 <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
326 </div>
327 </div>
328
329 <div style="position: relative">
330 <p>direction: RTL | align-content: 'space-evenly'</p>
331 <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expec ted-width="400" data-expected-height="300">
332 <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
333 <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
334 <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
335 <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="26 0" data-expected-width="40" data-expected-height="20"></div>
336 <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
337 <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
338 <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
339 <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260 " data-expected-width="40" data-expected-height="20"></div>
340 </div>
341 </div>
342
343 <div style="position: relative">
344 <p>direction: RTL | align-content: 'stretch'</p>
345 <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
346 <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
347 <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260 " data-expected-width="100" data-expected-height="20"></div>
348 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280 " data-expected-width="100" data-expected-height="20"></div>
349 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="26 0" data-expected-width="100" data-expected-height="20"></div>
350 <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
351 <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260 " data-expected-width="100" data-expected-height="20"></div>
352 <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
353 <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
354 </div>
355 </div>
356 </body>
357 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-lr-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-align-content-distribution-vertical-rl-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698