OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 body { | 4 body { |
5 margin: 0; | 5 margin: 0; |
6 } | 6 } |
7 | 7 |
8 .title { | 8 .title { |
9 margin-top: 1em; | 9 margin-top: 1em; |
10 } | 10 } |
11 | 11 |
12 .flexbox { | 12 .flexbox { |
13 display: flex; | 13 display: flex; |
14 background-color: #aaa; | 14 background-color: #aaa; |
15 position: relative; | 15 position: relative; |
16 } | 16 } |
17 .flexbox div { | 17 .flexbox div { |
18 border: 0; | 18 border: 0; |
19 flex: none; | 19 flex: none; |
20 } | 20 } |
21 | 21 |
22 .horizontal-tb { | 22 .horizontal-tb { |
23 -webkit-writing-mode: horizontal-tb; | 23 -webkit-writing-mode: horizontal-tb; |
24 } | 24 } |
25 .horizontal-bt { | |
26 -webkit-writing-mode: horizontal-bt; | |
27 } | |
28 .vertical-rl { | 25 .vertical-rl { |
29 -webkit-writing-mode: vertical-rl; | 26 -webkit-writing-mode: vertical-rl; |
30 } | 27 } |
31 .vertical-lr { | 28 .vertical-lr { |
32 -webkit-writing-mode: vertical-lr; | 29 -webkit-writing-mode: vertical-lr; |
33 } | 30 } |
34 | 31 |
35 .row { | 32 .row { |
36 flex-flow: row; | 33 flex-flow: row; |
37 } | 34 } |
(...skipping 29 matching lines...) Expand all Loading... |
67 <body onload="checkLayout('.flexbox')"> | 64 <body onload="checkLayout('.flexbox')"> |
68 | 65 |
69 <script> | 66 <script> |
70 function getFlexDirection(flexFlow, writingMode) | 67 function getFlexDirection(flexFlow, writingMode) |
71 { | 68 { |
72 if (writingMode.indexOf('horizontal') != -1) | 69 if (writingMode.indexOf('horizontal') != -1) |
73 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height'; | 70 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height'; |
74 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width'; | 71 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width'; |
75 } | 72 } |
76 | 73 |
77 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 74 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
78 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 75 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
79 var directions = ['ltr', 'rtl']; | 76 var directions = ['ltr', 'rtl']; |
80 | 77 |
81 var expectations = { | 78 var expectations = { |
82 'horizontal-tb': { | 79 'horizontal-tb': { |
83 row: { | 80 row: { |
84 ltr: [ | 81 ltr: [ |
85 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | 82 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, |
86 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | 83 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, |
87 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | 84 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
170 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | 167 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, |
171 { offsets: [120, 80, 0] }, | 168 { offsets: [120, 80, 0] }, |
172 { offsets: [80, 40, 0] }, | 169 { offsets: [80, 40, 0] }, |
173 { offsets: [80, 0, 0] }, | 170 { offsets: [80, 0, 0] }, |
174 { offsets: [90, 50, 10], crossAxisOffset: 60 }, | 171 { offsets: [90, 50, 10], crossAxisOffset: 60 }, |
175 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | 172 { offsets: [50, 50, 10], crossAxisOffset: 60 }, |
176 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | 173 { offsets: [50, 10, 10], crossAxisOffset: 60 }, |
177 ], | 174 ], |
178 }, | 175 }, |
179 }, | 176 }, |
180 'horizontal-bt': { | |
181 // This matches the horizontal-tb values above. | |
182 row: { | |
183 ltr: [ | |
184 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | |
185 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | |
186 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | |
187 { offsets: [0, 0, 560] }, | |
188 { offsets: [0, 560, 560] }, | |
189 { offsets: [0, 560, 600] }, | |
190 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
191 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
192 { offsets: [10, 50, 90], crossAxisOffset: 60 }, | |
193 ], | |
194 rtl: [ | |
195 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, | |
196 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, | |
197 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, | |
198 { offsets: [580, 560, 0] }, | |
199 { offsets: [560, 20, 0] }, | |
200 { offsets: [560, 0, -20] }, | |
201 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
202 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
203 { offsets: [50, 10, -30], crossAxisOffset: 60 }, | |
204 ], | |
205 }, | |
206 // horizontal-bt flips the main axis direction so the offsets are differ
ent from horizontal-tb. | |
207 column: { | |
208 ltr: [ | |
209 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, | |
210 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, | |
211 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | |
212 { offsets: [100, 80, 0] }, | |
213 { offsets: [80, 20, 0] }, | |
214 { offsets: [80, 0, -20] }, | |
215 { offsets: [50, 50, 10], crossAxisOffset: 0 }, | |
216 { offsets: [50, 10, 10], crossAxisOffset: 0 }, | |
217 { offsets: [50, 10, -30], crossAxisOffset: 0 }, | |
218 ], | |
219 rtl: [ | |
220 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, | |
221 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, | |
222 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | |
223 { offsets: [100, 80, 0] }, | |
224 { offsets: [80, 20, 0] }, | |
225 { offsets: [80, 0, -20] }, | |
226 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
227 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
228 { offsets: [50, 10, -30], crossAxisOffset: 60 }, | |
229 ], | |
230 }, | |
231 'row-reverse': { | |
232 ltr: [ | |
233 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, | |
234 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, | |
235 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, | |
236 { offsets: [600, 560, 0] }, | |
237 { offsets: [560, 40, 0] }, | |
238 { offsets: [560, 0, 0] }, | |
239 { offsets: [90, 50, 10], crossAxisOffset: 60 }, | |
240 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
241 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
242 ], | |
243 rtl: [ | |
244 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | |
245 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | |
246 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | |
247 { offsets: [-20, 0, 560] }, | |
248 { offsets: [0, 540, 560] }, | |
249 { offsets: [0, 560, 580] }, | |
250 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, | |
251 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
252 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
253 ], | |
254 }, | |
255 'column-reverse': { | |
256 ltr: [ | |
257 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | |
258 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | |
259 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | |
260 { offsets: [-20, 0, 80] }, | |
261 { offsets: [0, 60, 80] }, | |
262 { offsets: [0, 80, 100] }, | |
263 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, | |
264 { offsets: [10, 10, 50], crossAxisOffset: 0 }, | |
265 { offsets: [10, 50, 50], crossAxisOffset: 0 }, | |
266 ], | |
267 rtl: [ | |
268 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | |
269 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | |
270 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | |
271 { offsets: [-20, 0, 80] }, | |
272 { offsets: [0, 60, 80] }, | |
273 { offsets: [0, 80, 100] }, | |
274 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, | |
275 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
276 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
277 ], | |
278 }, | |
279 }, | |
280 'vertical-rl': { | 177 'vertical-rl': { |
281 row: { | 178 row: { |
282 // The same as horizontal-tb + column. | 179 // The same as horizontal-tb + column. |
283 ltr: [ | 180 ltr: [ |
284 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | 181 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, |
285 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | 182 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, |
286 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | 183 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, |
287 { offsets: [0, 0, 80] }, | 184 { offsets: [0, 0, 80] }, |
288 { offsets: [0, 80, 80] }, | 185 { offsets: [0, 80, 80] }, |
289 { offsets: [0, 80, 120] }, | 186 { offsets: [0, 80, 120] }, |
(...skipping 303 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
593 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction,
flexDirection); | 490 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction,
flexDirection); |
594 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec
tion); | 491 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec
tion); |
595 }) | 492 }) |
596 }) | 493 }) |
597 }) | 494 }) |
598 | 495 |
599 </script> | 496 </script> |
600 | 497 |
601 </body> | 498 </body> |
602 </html> | 499 </html> |
OLD | NEW |