OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 } | 9 } |
10 | 10 |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
53 align-content: right; | 53 align-content: right; |
54 } | 54 } |
55 | 55 |
56 .alignContentFlexStart { | 56 .alignContentFlexStart { |
57 align-content: flex-start; | 57 align-content: flex-start; |
58 } | 58 } |
59 | 59 |
60 .alignContentFlexEnd { | 60 .alignContentFlexEnd { |
61 align-content: flex-end; | 61 align-content: flex-end; |
62 } | 62 } |
63 | |
64 .alignContentEndTrue { | |
65 align-content: end true; | |
66 } | |
67 | |
68 .alignContentCenterTrue { | |
69 align-content: center true; | |
70 } | |
71 | |
72 .alignContentRightSafe { | |
73 align-content: right safe; | |
74 } | |
75 | |
76 .alignContentLeftTrue { | |
77 align-content: left true; | |
78 } | |
79 | |
80 .alignContentFlexStartTrue { | |
81 align-content: flex-start true; | |
82 } | |
83 | |
84 .alignContentFlexEndSafe { | |
85 align-content: flex-end safe; | |
86 } | |
87 | |
88 .alignContentSpaceBetween { | |
89 align-content: space-between; | |
90 } | |
91 | |
92 .alignContentSpaceAround { | |
93 align-content: space-around; | |
94 } | |
95 | |
96 .alignContentSpaceEvenly { | |
97 align-content: space-evenly; | |
98 } | |
99 | |
100 .alignContentStretch { | |
101 align-content: stretch; | |
102 } | |
103 | |
104 .alignContentSpaceBetweenLeft { | |
105 align-content: space-between left; | |
106 } | |
107 | |
108 .alignContentSpaceAroundEnd { | |
109 align-content: space-around end; | |
110 } | |
111 | |
112 .alignContentSpaceEvenlyRight { | |
113 align-content: space-evenly right; | |
114 } | |
115 | |
116 .alignContentStretchStart { | |
117 align-content: stretch start; | |
118 } | |
119 | |
120 </style> | 63 </style> |
121 </head> | 64 </head> |
122 <body onload="checkLayout('.grid')"> | 65 <body onload="checkLayout('.grid')"> |
123 | 66 |
124 <p>This test checks that the align-content property is applied correctly.</p> | 67 <p>This test checks that the align-content property is applied correctly.</p> |
125 | 68 |
126 <div style="position: relative"> | 69 <div style="position: relative"> |
127 <p>direction: LTR | align-content: 'center'</p> | 70 <p>direction: LTR | align-content: 'center'</p> |
128 <div class="grid alignContentCenter" data-expected-width="200" data-expected
-height="300"> | 71 <div class="grid alignContentCenter" data-expected-width="200" data-expected
-height="300"> |
129 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="20" data-expected-height="40"></div> | 72 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="20" data-expected-height="40"></div> |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
186 <div style="position: relative"> | 129 <div style="position: relative"> |
187 <p>direction: LTR | align-content: 'flex-end</p> | 130 <p>direction: LTR | align-content: 'flex-end</p> |
188 <div class="grid alignContentFlexEnd" data-expected-width="200" data-expecte
d-height="300"> | 131 <div class="grid alignContentFlexEnd" data-expected-width="200" data-expecte
d-height="300"> |
189 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> | 132 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> |
190 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 133 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
191 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200"
data-expected-width="50" data-expected-height="100"></div> | 134 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200"
data-expected-width="50" data-expected-height="100"></div> |
192 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="200" data-expected-width="20" data-expected-height="40"></div> | 135 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="200" data-expected-width="20" data-expected-height="40"></div> |
193 </div> | 136 </div> |
194 </div> | 137 </div> |
195 | 138 |
196 <!-- content-distribution values always fallback to content-position. --> | |
197 <div style="position: relative"> | |
198 <p>direction: LTR | align-content: 'space-between' (fallback to 'start')</p> | |
199 <div class="grid alignContentSpaceBetween" data-expected-width="200" data-ex
pected-height="300"> | |
200 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
201 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
202 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
203 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
204 </div> | |
205 </div> | |
206 | |
207 <div style="position: relative"> | |
208 <p>direction: LTR | align-content: 'space-between' (fallback to 'center')</p
> | |
209 <div class="grid alignContentSpaceAround" data-expected-width="200" data-exp
ected-height="300"> | |
210 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="20" data-expected-height="40"></div> | |
211 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | |
212 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150"
data-expected-width="50" data-expected-height="100"></div> | |
213 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> | |
214 </div> | |
215 </div> | |
216 | |
217 <div style="position: relative"> | |
218 <p>direction: LTR | align-content: 'space-evenly' (fallback to 'center')</p> | |
219 <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-exp
ected-height="300"> | |
220 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="20" data-expected-height="40"></div> | |
221 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | |
222 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150"
data-expected-width="50" data-expected-height="100"></div> | |
223 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="150" data-expected-width="20" data-expected-height="40"></div> | |
224 </div> | |
225 </div> | |
226 | |
227 <div style="position: relative"> | |
228 <p>direction: LTR | align-content: 'space-stretch' (fallback to 'start')</p> | |
229 <div class="grid alignContentStretch" data-expected-width="200" data-expecte
d-height="300"> | |
230 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
231 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
232 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
233 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
234 </div> | |
235 </div> | |
236 | |
237 <div style="position: relative"> | |
238 <p>direction: LTR | align-content: 'space-between left' (fallback to 'left')
</p> | |
239 <div class="grid alignContentSpaceBetweenLeft" data-expected-width="200" dat
a-expected-height="300"> | |
240 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
241 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
242 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
243 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
244 </div> | |
245 </div> | |
246 | |
247 <div style="position: relative"> | |
248 <p>direction: LTR | align-content: 'space-around end' (fallback to 'end')</p
> | |
249 <div class="grid alignContentSpaceAroundEnd" data-expected-width="200" data-
expected-height="300"> | |
250 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1
00" data-expected-width="20" data-expected-height="40"></div> | |
251 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
252 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200"
data-expected-width="50" data-expected-height="100"></div> | |
253 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="200" data-expected-width="20" data-expected-height="40"></div> | |
254 </div> | |
255 </div> | |
256 | |
257 <div style="position: relative"> | |
258 <p>direction: LTR | align-content: 'space-evenly right' (fallback to 'right'
)</p> | |
259 <div class="grid alignContentSpaceEvenlyRight" data-expected-width="200" dat
a-expected-height="300"> | |
260 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
261 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
262 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
263 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
264 </div> | |
265 </div> | |
266 | |
267 <div style="position: relative"> | |
268 <p>direction: LTR | align-content: 'stretch end' (fallback to 'end')</p> | |
269 <div class="grid alignContentStretchEnd" data-expected-width="200" data-expe
cted-height="300"> | |
270 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
271 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
272 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
273 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
274 </div> | |
275 </div> | |
276 | |
277 <!-- Default alignment and initial values. --> | 139 <!-- Default alignment and initial values. --> |
278 <div style="position: relative"> | 140 <div style="position: relative"> |
279 <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p> | 141 <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p> |
280 <div class="grid" data-expected-width="200" data-expected-height="300"> | 142 <div class="grid" data-expected-width="200" data-expected-height="300"> |
281 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | 143 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
282 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | 144 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> |
283 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 145 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
284 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | 146 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
285 </div> | 147 </div> |
286 </div> | 148 </div> |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
331 <div class="grid directionRTL alignContentEnd" data-expected-width="200" dat
a-expected-height="300"> | 193 <div class="grid directionRTL alignContentEnd" data-expected-width="200" dat
a-expected-height="300"> |
332 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> | 194 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y=
"100" data-expected-width="20" data-expected-height="40"></div> |
333 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | 195 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> |
334 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> | 196 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> |
335 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-
y="200" data-expected-width="20" data-expected-height="40"></div> | 197 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-
y="200" data-expected-width="20" data-expected-height="40"></div> |
336 </div> | 198 </div> |
337 </div> | 199 </div> |
338 | 200 |
339 </body> | 201 </body> |
340 </html> | 202 </html> |
OLD | NEW |