6b867b6c9521beb10ebbb41591ed95d9c6fb48fe
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline-align.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: -webkit-flexbox;
7     background-color: grey;
8     max-width: 600px;
9 }
10 .title {
11     margin-top: 1em;
12 }
13 .ltr {
14     direction: ltr;
15 }
16 .rtl {
17     direction: rtl;
18 }
19 .horizontal-tb {
20     -webkit-writing-mode: horizontal-tb;
21 }
22 .horizontal-bt {
23     -webkit-writing-mode: horizontal-bt;
24 }
25 .vertical-rl {
26     -webkit-writing-mode: vertical-rl;
27 }
28 .vertical-lr {
29     -webkit-writing-mode: vertical-lr;
30 }
31 .row {
32     -webkit-flex-flow: row;
33 }
34 .row-reverse {
35     -webkit-flex-flow: row-reverse;
36 }
37 .column {
38     -webkit-flex-flow: column;
39 }
40 .column-reverse {
41     -webkit-flex-flow: column-reverse;
42 }
43 .wrap {
44   -webkit-flex-wrap: wrap;
45 }
46 .wrap-reverse {
47   -webkit-flex-wrap: wrap-reverse;
48 }
49 .flexbox > :nth-child(1) {
50     background-color: #0f0;
51 }
52 .flexbox > :nth-child(2) {
53     background-color: #0d0;
54 }
55 .flexbox > :nth-child(3) {
56     background-color: #0b0;
57 }
58 .flexbox > :nth-child(4) {
59     background-color: #090;
60 }
61 .flexbox > :nth-child(5) {
62     background-color: #070;
63 }
64 .flexbox > :nth-child(6) {
65     background-color: #050;
66 }
67 .flexbox > :nth-child(7) {
68     background-color: #030;
69 }
70
71 .flexbox > :nth-child(8) {
72     background-color: #00f;
73 }
74 .flexbox > :nth-child(9) {
75     background-color: #00d;
76 }
77 .flexbox > :nth-child(10) {
78     background-color: #00b;
79 }
80 .flexbox > :nth-child(11) {
81     background-color: #009;
82 }
83 .flexbox > :nth-child(12) {
84     background-color: #007;
85 }
86 .flexbox > :nth-child(13) {
87     background-color: #005;
88 }
89 .flexbox > :nth-child(14) {
90     background-color: #003;
91 }
92 </style>
93 <script>
94 if (window.layoutTestController)
95     layoutTestController.dumpAsText();
96 </script>
97 <script src="resources/flexbox.js"></script>
98 <body onload="checkFlexBoxen()">
99
100 <script>
101 var expectations = {
102     'horizontal-tb': {
103         'row': {
104             'ltr': {
105                 'wrap': {
106                     'flexbox': [70, 60],
107                     'child1': [10, 10, 0, 0],
108                     'child2': [10, 10, 10, 10],
109                     'child3': [10, 10, 20, 20],
110                     'child4': [10, 10, 30, 5],
111                     'child5': [10, 10, 40, 5],
112                     'child6': [10, 30, 50, 0],
113                     'child7': [10, 30, 60, 0],
114                     'child8': [10, 10, 0, 30],
115                     'child9': [10, 10, 10, 40],
116                     'child10': [10, 10, 20, 50],
117                     'child11': [10, 10, 30, 35],
118                     'child12': [10, 10, 40, 35],
119                     'child13': [10, 30, 50, 30],
120                     'child14': [10, 30, 60, 30],
121                 },
122             },
123             'rtl': {
124                 'wrap': {
125                     'flexbox': [70, 60],
126                     'child1': [10, 10, 60, 0],
127                     'child2': [10, 10, 50, 10],
128                     'child3': [10, 10, 40, 20],
129                     'child4': [10, 10, 30, 5],
130                     'child5': [10, 10, 20, 5],
131                     'child6': [10, 30, 10, 0],
132                     'child7': [10, 30, 0, 0],
133                     'child8': [10, 10, 60, 30],
134                     'child9': [10, 10, 50, 40],
135                     'child10': [10, 10, 40, 50],
136                     'child11': [10, 10, 30, 35],
137                     'child12': [10, 10, 20, 35],
138                     'child13': [10, 30, 10, 30],
139                     'child14': [10, 30, 0, 30],
140                 },
141             },
142         },
143         'column': {
144             'ltr': {
145                 'wrap': {
146                     'flexbox': [600, 70],
147                     'child1': [10, 10, 0, 0],
148                     'child2': [10, 10, 10, 10],
149                     'child3': [10, 10, 20, 20],
150                     'child4': [10, 10, 5, 30],
151                     'child5': [10, 10, 5, 40],
152                     'child6': [30, 10, 0, 50],
153                     'child7': [30, 10, 0, 60],
154                     'child8': [10, 10, 30, 0],
155                     'child9': [10, 10, 40, 10],
156                     'child10': [10, 10, 50, 20],
157                     'child11': [10, 10, 35, 30],
158                     'child12': [10, 10, 35, 40],
159                     'child13': [30, 10, 30, 50],
160                     'child14': [30, 10, 30, 60],
161                 },
162             },
163             'rtl': {
164                 'wrap': {
165                     'flexbox': [600, 70],
166                     'child1': [10, 10, 590, 0],
167                     'child2': [10, 10, 580, 10],
168                     'child3': [10, 10, 570, 20],
169                     'child4': [10, 10, 585, 30],
170                     'child5': [10, 10, 585, 40],
171                     'child6': [30, 10, 570, 50],
172                     'child7': [30, 10, 570, 60],
173                     'child8': [10, 10, 560, 0],
174                     'child9': [10, 10, 550, 10],
175                     'child10': [10, 10, 540, 20],
176                     'child11': [10, 10, 555, 30],
177                     'child12': [10, 10, 555, 40],
178                     'child13': [30, 10, 540, 50],
179                     'child14': [30, 10, 540, 60],
180                 },
181             },
182         },
183         'row-reverse': {
184             'ltr': {
185                 'wrap': {
186                     'flexbox': [70, 60],
187                     'child1': [10, 10, 60, 0],
188                     'child2': [10, 10, 50, 10],
189                     'child3': [10, 10, 40, 20],
190                     'child4': [10, 10, 30, 5],
191                     'child5': [10, 10, 20, 5],
192                     'child6': [10, 30, 10, 0],
193                     'child7': [10, 30, 0, 0],
194                     'child8': [10, 10, 60, 30],
195                     'child9': [10, 10, 50, 40],
196                     'child10': [10, 10, 40, 50],
197                     'child11': [10, 10, 30, 35],
198                     'child12': [10, 10, 20, 35],
199                     'child13': [10, 30, 10, 30],
200                     'child14': [10, 30, 0, 30],
201                 },
202             },
203             'rtl': {
204                 'wrap': {
205                     'flexbox': [70, 60],
206                     'child1': [10, 10, 0, 0],
207                     'child2': [10, 10, 10, 10],
208                     'child3': [10, 10, 20, 20],
209                     'child4': [10, 10, 30, 5],
210                     'child5': [10, 10, 40, 5],
211                     'child6': [10, 30, 50, 0],
212                     'child7': [10, 30, 60, 0],
213                     'child8': [10, 10, 0, 30],
214                     'child9': [10, 10, 10, 40],
215                     'child10': [10, 10, 20, 50],
216                     'child11': [10, 10, 30, 35],
217                     'child12': [10, 10, 40, 35],
218                     'child13': [10, 30, 50, 30],
219                     'child14': [10, 30, 60, 30],
220                 },
221             },
222         },
223         'column-reverse': {
224             'ltr': {
225                 'wrap': {
226                     'flexbox': [600, 70],
227                     'child1': [10, 10, 0, 60],
228                     'child2': [10, 10, 10, 50],
229                     'child3': [10, 10, 20, 40],
230                     'child4': [10, 10, 5, 30],
231                     'child5': [10, 10, 5, 20],
232                     'child6': [30, 10, 0, 10],
233                     'child7': [30, 10, 0, 0],
234                     'child8': [10, 10, 30, 60],
235                     'child9': [10, 10, 40, 50],
236                     'child10': [10, 10, 50, 40],
237                     'child11': [10, 10, 35, 30],
238                     'child12': [10, 10, 35, 20],
239                     'child13': [30, 10, 30, 10],
240                     'child14': [30, 10, 30, 0],
241                 },
242             },
243             'rtl': {
244                 'wrap': {
245                     'flexbox': [600, 70],
246                     'child1': [10, 10, 590, 60],
247                     'child2': [10, 10, 580, 50],
248                     'child3': [10, 10, 570, 40],
249                     'child4': [10, 10, 585, 30],
250                     'child5': [10, 10, 585, 20],
251                     'child6': [30, 10, 570, 10],
252                     'child7': [30, 10, 570, 0],
253                     'child8': [10, 10, 560, 60],
254                     'child9': [10, 10, 550, 50],
255                     'child10': [10, 10, 540, 40],
256                     'child11': [10, 10, 555, 30],
257                     'child12': [10, 10, 555, 20],
258                     'child13': [30, 10, 540, 10],
259                     'child14': [30, 10, 540, 0],
260                 },
261             },
262         },
263     },
264     'horizontal-bt': {
265         'row': {
266             'ltr': {
267                 'wrap': {
268                     'flexbox': [70, 60],
269                     'child1': [10, 10, 0, 50],
270                     'child2': [10, 10, 10, 40],
271                     'child3': [10, 10, 20, 30],
272                     'child4': [10, 10, 30, 45],
273                     'child5': [10, 10, 40, 45],
274                     'child6': [10, 30, 50, 30],
275                     'child7': [10, 30, 60, 30],
276                     'child8': [10, 10, 0, 20],
277                     'child9': [10, 10, 10, 10],
278                     'child10': [10, 10, 20, 0],
279                     'child11': [10, 10, 30, 15],
280                     'child12': [10, 10, 40, 15],
281                     'child13': [10, 30, 50, 0],
282                     'child14': [10, 30, 60, 0],
283                 },
284             },
285             'rtl': {
286                 'wrap': {
287                     'flexbox': [70, 60],
288                     'child1': [10, 10, 60, 50],
289                     'child2': [10, 10, 50, 40],
290                     'child3': [10, 10, 40, 30],
291                     'child4': [10, 10, 30, 45],
292                     'child5': [10, 10, 20, 45],
293                     'child6': [10, 30, 10, 30],
294                     'child7': [10, 30, 0, 30],
295                     'child8': [10, 10, 60, 20],
296                     'child9': [10, 10, 50, 10],
297                     'child10': [10, 10, 40, 0],
298                     'child11': [10, 10, 30, 15],
299                     'child12': [10, 10, 20, 15],
300                     'child13': [10, 30, 10, 0],
301                     'child14': [10, 30, 0, 0],
302                 },
303             },
304         },
305         'column': {
306             'ltr': {
307                 'wrap': {
308                     'flexbox': [600, 70],
309                     'child1': [10, 10, 0, 60],
310                     'child2': [10, 10, 10, 50],
311                     'child3': [10, 10, 20, 40],
312                     'child4': [10, 10, 5, 30],
313                     'child5': [10, 10, 5, 20],
314                     'child6': [30, 10, 0, 10],
315                     'child7': [30, 10, 0, 0],
316                     'child8': [10, 10, 30, 60],
317                     'child9': [10, 10, 40, 50],
318                     'child10': [10, 10, 50, 40],
319                     'child11': [10, 10, 35, 30],
320                     'child12': [10, 10, 35, 20],
321                     'child13': [30, 10, 30, 10],
322                     'child14': [30, 10, 30, 0],
323                 },
324             },
325             'rtl': {
326                 'wrap': {
327                     'flexbox': [600, 70],
328                     'child1': [10, 10, 590, 60],
329                     'child2': [10, 10, 580, 50],
330                     'child3': [10, 10, 570, 40],
331                     'child4': [10, 10, 585, 30],
332                     'child5': [10, 10, 585, 20],
333                     'child6': [30, 10, 570, 10],
334                     'child7': [30, 10, 570, 0],
335                     'child8': [10, 10, 560, 60],
336                     'child9': [10, 10, 550, 50],
337                     'child10': [10, 10, 540, 40],
338                     'child11': [10, 10, 555, 30],
339                     'child12': [10, 10, 555, 20],
340                     'child13': [30, 10, 540, 10],
341                     'child14': [30, 10, 540, 0],
342                 },
343             },
344         },
345         'row-reverse': {
346             'ltr': {
347                 'wrap': {
348                     'flexbox': [70, 60],
349                     'child1': [10, 10, 60, 50],
350                     'child2': [10, 10, 50, 40],
351                     'child3': [10, 10, 40, 30],
352                     'child4': [10, 10, 30, 45],
353                     'child5': [10, 10, 20, 45],
354                     'child6': [10, 30, 10, 30],
355                     'child7': [10, 30, 0, 30],
356                     'child8': [10, 10, 60, 20],
357                     'child9': [10, 10, 50, 10],
358                     'child10': [10, 10, 40, 0],
359                     'child11': [10, 10, 30, 15],
360                     'child12': [10, 10, 20, 15],
361                     'child13': [10, 30, 10, 0],
362                     'child14': [10, 30, 0, 0],
363                 },
364             },
365             'rtl': {
366                 'wrap': {
367                     'flexbox': [70, 60],
368                     'child1': [10, 10, 0, 50],
369                     'child2': [10, 10, 10, 40],
370                     'child3': [10, 10, 20, 30],
371                     'child4': [10, 10, 30, 45],
372                     'child5': [10, 10, 40, 45],
373                     'child6': [10, 30, 50, 30],
374                     'child7': [10, 30, 60, 30],
375                     'child8': [10, 10, 0, 20],
376                     'child9': [10, 10, 10, 10],
377                     'child10': [10, 10, 20, 0],
378                     'child11': [10, 10, 30, 15],
379                     'child12': [10, 10, 40, 15],
380                     'child13': [10, 30, 50, 0],
381                     'child14': [10, 30, 60, 0],
382                 },
383             },
384         },
385         'column-reverse': {
386             'ltr': {
387                 'wrap': {
388                     'flexbox': [600, 70],
389                     'child1': [10, 10, 0, 0],
390                     'child2': [10, 10, 10, 10],
391                     'child3': [10, 10, 20, 20],
392                     'child4': [10, 10, 5, 30],
393                     'child5': [10, 10, 5, 40],
394                     'child6': [30, 10, 0, 50],
395                     'child7': [30, 10, 0, 60],
396                     'child8': [10, 10, 30, 0],
397                     'child9': [10, 10, 40, 10],
398                     'child10': [10, 10, 50, 20],
399                     'child11': [10, 10, 35, 30],
400                     'child12': [10, 10, 35, 40],
401                     'child13': [30, 10, 30, 50],
402                     'child14': [30, 10, 30, 60],
403                 },
404             },
405             'rtl': {
406                 'wrap': {
407                     'flexbox': [600, 70],
408                     'child1': [10, 10, 590, 0],
409                     'child2': [10, 10, 580, 10],
410                     'child3': [10, 10, 570, 20],
411                     'child4': [10, 10, 585, 30],
412                     'child5': [10, 10, 585, 40],
413                     'child6': [30, 10, 570, 50],
414                     'child7': [30, 10, 570, 60],
415                     'child8': [10, 10, 560, 0],
416                     'child9': [10, 10, 550, 10],
417                     'child10': [10, 10, 540, 20],
418                     'child11': [10, 10, 555, 30],
419                     'child12': [10, 10, 555, 40],
420                     'child13': [30, 10, 540, 50],
421                     'child14': [30, 10, 540, 60],
422                 },
423             },
424         },
425     },
426     'vertical-rl': {
427         'row': {
428             'ltr': {
429                 'wrap': {
430                     'flexbox': [60, 70],
431                     'child1': [10, 10, 50, 0],
432                     'child2': [10, 10, 40, 10],
433                     'child3': [10, 10, 30, 20],
434                     'child4': [10, 10, 45, 30],
435                     'child5': [10, 10, 45, 40],
436                     'child6': [30, 10, 30, 50],
437                     'child7': [30, 10, 30, 60],
438                     'child8': [10, 10, 20, 0],
439                     'child9': [10, 10, 10, 10],
440                     'child10': [10, 10, 0, 20],
441                     'child11': [10, 10, 15, 30],
442                     'child12': [10, 10, 15, 40],
443                     'child13': [30, 10, 0, 50],
444                     'child14': [30, 10, 0, 60],
445                 },
446             },
447             'rtl': {
448                 'wrap': {
449                     'flexbox': [60, 70],
450                     'child1': [10, 10, 50, 60],
451                     'child2': [10, 10, 40, 50],
452                     'child3': [10, 10, 30, 40],
453                     'child4': [10, 10, 45, 30],
454                     'child5': [10, 10, 45, 20],
455                     'child6': [30, 10, 30, 10],
456                     'child7': [30, 10, 30, 0],
457                     'child8': [10, 10, 20, 60],
458                     'child9': [10, 10, 10, 50],
459                     'child10': [10, 10, 0, 40],
460                     'child11': [10, 10, 15, 30],
461                     'child12': [10, 10, 15, 20],
462                     'child13': [30, 10, 0, 10],
463                     'child14': [30, 10, 0, 0],
464                 },
465             },
466         },
467         'column': {
468             'ltr': {
469                 'wrap': {
470                     'flexbox': [70, 60],
471                     'child1': [10, 10, 60, 0],
472                     'child2': [10, 10, 50, 10],
473                     'child3': [10, 10, 40, 20],
474                     'child4': [10, 10, 30, 5],
475                     'child5': [10, 10, 20, 5],
476                     'child6': [10, 30, 10, 0],
477                     'child7': [10, 30, 0, 0],
478                     'child8': [10, 10, 60, 30],
479                     'child9': [10, 10, 50, 40],
480                     'child10': [10, 10, 40, 50],
481                     'child11': [10, 10, 30, 35],
482                     'child12': [10, 10, 20, 35],
483                     'child13': [10, 30, 10, 30],
484                     'child14': [10, 30, 0, 30],
485                 },
486             },
487             'rtl': {
488                 'wrap': {
489                     'flexbox': [70, 60],
490                     'child1': [10, 10, 60, 50],
491                     'child2': [10, 10, 50, 40],
492                     'child3': [10, 10, 40, 30],
493                     'child4': [10, 10, 30, 45],
494                     'child5': [10, 10, 20, 45],
495                     'child6': [10, 30, 10, 30],
496                     'child7': [10, 30, 0, 30],
497                     'child8': [10, 10, 60, 20],
498                     'child9': [10, 10, 50, 10],
499                     'child10': [10, 10, 40, 0],
500                     'child11': [10, 10, 30, 15],
501                     'child12': [10, 10, 20, 15],
502                     'child13': [10, 30, 10, 0],
503                     'child14': [10, 30, 0, 0],
504                 },
505             },
506         },
507         'row-reverse': {
508             'ltr': {
509                 'wrap': {
510                     'flexbox': [60, 70],
511                     'child1': [10, 10, 50, 60],
512                     'child2': [10, 10, 40, 50],
513                     'child3': [10, 10, 30, 40],
514                     'child4': [10, 10, 45, 30],
515                     'child5': [10, 10, 45, 20],
516                     'child6': [30, 10, 30, 10],
517                     'child7': [30, 10, 30, 0],
518                     'child8': [10, 10, 20, 60],
519                     'child9': [10, 10, 10, 50],
520                     'child10': [10, 10, 0, 40],
521                     'child11': [10, 10, 15, 30],
522                     'child12': [10, 10, 15, 20],
523                     'child13': [30, 10, 0, 10],
524                     'child14': [30, 10, 0, 0],
525                 },
526             },
527             'rtl': {
528                 'wrap': {
529                     'flexbox': [60, 70],
530                     'child1': [10, 10, 50, 0],
531                     'child2': [10, 10, 40, 10],
532                     'child3': [10, 10, 30, 20],
533                     'child4': [10, 10, 45, 30],
534                     'child5': [10, 10, 45, 40],
535                     'child6': [30, 10, 30, 50],
536                     'child7': [30, 10, 30, 60],
537                     'child8': [10, 10, 20, 0],
538                     'child9': [10, 10, 10, 10],
539                     'child10': [10, 10, 0, 20],
540                     'child11': [10, 10, 15, 30],
541                     'child12': [10, 10, 15, 40],
542                     'child13': [30, 10, 0, 50],
543                     'child14': [30, 10, 0, 60],
544                 },
545             },
546         },
547         'column-reverse': {
548             'ltr': {
549                 'wrap': {
550                     'flexbox': [70, 60],
551                     'child1': [10, 10, 0, 0],
552                     'child2': [10, 10, 10, 10],
553                     'child3': [10, 10, 20, 20],
554                     'child4': [10, 10, 30, 5],
555                     'child5': [10, 10, 40, 5],
556                     'child6': [10, 30, 50, 0],
557                     'child7': [10, 30, 60, 0],
558                     'child8': [10, 10, 0, 30],
559                     'child9': [10, 10, 10, 40],
560                     'child10': [10, 10, 20, 50],
561                     'child11': [10, 10, 30, 35],
562                     'child12': [10, 10, 40, 35],
563                     'child13': [10, 30, 50, 30],
564                     'child14': [10, 30, 60, 30],
565                 },
566             },
567             'rtl': {
568                 'wrap': {
569                     'flexbox': [70, 60],
570                     'child1': [10, 10, 0, 50],
571                     'child2': [10, 10, 10, 40],
572                     'child3': [10, 10, 20, 30],
573                     'child4': [10, 10, 30, 45],
574                     'child5': [10, 10, 40, 45],
575                     'child6': [10, 30, 50, 30],
576                     'child7': [10, 30, 60, 30],
577                     'child8': [10, 10, 0, 20],
578                     'child9': [10, 10, 10, 10],
579                     'child10': [10, 10, 20, 0],
580                     'child11': [10, 10, 30, 15],
581                     'child12': [10, 10, 40, 15],
582                     'child13': [10, 30, 50, 0],
583                     'child14': [10, 30, 60, 0],
584                 },
585             },
586         },
587     },
588     'vertical-lr': {
589         'row': {
590             'ltr': {
591                 'wrap': {
592                     'flexbox': [60, 70],
593                     'child1': [10, 10, 0, 0],
594                     'child2': [10, 10, 10, 10],
595                     'child3': [10, 10, 20, 20],
596                     'child4': [10, 10, 5, 30],
597                     'child5': [10, 10, 5, 40],
598                     'child6': [30, 10, 0, 50],
599                     'child7': [30, 10, 0, 60],
600                     'child8': [10, 10, 30, 0],
601                     'child9': [10, 10, 40, 10],
602                     'child10': [10, 10, 50, 20],
603                     'child11': [10, 10, 35, 30],
604                     'child12': [10, 10, 35, 40],
605                     'child13': [30, 10, 30, 50],
606                     'child14': [30, 10, 30, 60],
607                 },
608             },
609             'rtl': {
610                 'wrap': {
611                     'flexbox': [60, 70],
612                     'child1': [10, 10, 0, 60],
613                     'child2': [10, 10, 10, 50],
614                     'child3': [10, 10, 20, 40],
615                     'child4': [10, 10, 5, 30],
616                     'child5': [10, 10, 5, 20],
617                     'child6': [30, 10, 0, 10],
618                     'child7': [30, 10, 0, 0],
619                     'child8': [10, 10, 30, 60],
620                     'child9': [10, 10, 40, 50],
621                     'child10': [10, 10, 50, 40],
622                     'child11': [10, 10, 35, 30],
623                     'child12': [10, 10, 35, 20],
624                     'child13': [30, 10, 30, 10],
625                     'child14': [30, 10, 30, 0],
626                 },
627             },
628         },
629         'column': {
630             'ltr': {
631                 'wrap': {
632                     'flexbox': [70, 60],
633                     'child1': [10, 10, 0, 0],
634                     'child2': [10, 10, 10, 10],
635                     'child3': [10, 10, 20, 20],
636                     'child4': [10, 10, 30, 5],
637                     'child5': [10, 10, 40, 5],
638                     'child6': [10, 30, 50, 0],
639                     'child7': [10, 30, 60, 0],
640                     'child8': [10, 10, 0, 30],
641                     'child9': [10, 10, 10, 40],
642                     'child10': [10, 10, 20, 50],
643                     'child11': [10, 10, 30, 35],
644                     'child12': [10, 10, 40, 35],
645                     'child13': [10, 30, 50, 30],
646                     'child14': [10, 30, 60, 30],
647                 },
648             },
649             'rtl': {
650                 'wrap': {
651                     'flexbox': [70, 60],
652                     'child1': [10, 10, 0, 50],
653                     'child2': [10, 10, 10, 40],
654                     'child3': [10, 10, 20, 30],
655                     'child4': [10, 10, 30, 45],
656                     'child5': [10, 10, 40, 45],
657                     'child6': [10, 30, 50, 30],
658                     'child7': [10, 30, 60, 30],
659                     'child8': [10, 10, 0, 20],
660                     'child9': [10, 10, 10, 10],
661                     'child10': [10, 10, 20, 0],
662                     'child11': [10, 10, 30, 15],
663                     'child12': [10, 10, 40, 15],
664                     'child13': [10, 30, 50, 0],
665                     'child14': [10, 30, 60, 0],
666                 },
667             },
668         },
669         'row-reverse': {
670             'ltr': {
671                 'wrap': {
672                     'flexbox': [60, 70],
673                     'child1': [10, 10, 0, 60],
674                     'child2': [10, 10, 10, 50],
675                     'child3': [10, 10, 20, 40],
676                     'child4': [10, 10, 5, 30],
677                     'child5': [10, 10, 5, 20],
678                     'child6': [30, 10, 0, 10],
679                     'child7': [30, 10, 0, 0],
680                     'child8': [10, 10, 30, 60],
681                     'child9': [10, 10, 40, 50],
682                     'child10': [10, 10, 50, 40],
683                     'child11': [10, 10, 35, 30],
684                     'child12': [10, 10, 35, 20],
685                     'child13': [30, 10, 30, 10],
686                     'child14': [30, 10, 30, 0],
687                 },
688             },
689             'rtl': {
690                 'wrap': {
691                     'flexbox': [60, 70],
692                     'child1': [10, 10, 0, 0],
693                     'child2': [10, 10, 10, 10],
694                     'child3': [10, 10, 20, 20],
695                     'child4': [10, 10, 5, 30],
696                     'child5': [10, 10, 5, 40],
697                     'child6': [30, 10, 0, 50],
698                     'child7': [30, 10, 0, 60],
699                     'child8': [10, 10, 30, 0],
700                     'child9': [10, 10, 40, 10],
701                     'child10': [10, 10, 50, 20],
702                     'child11': [10, 10, 35, 30],
703                     'child12': [10, 10, 35, 40],
704                     'child13': [30, 10, 30, 50],
705                     'child14': [30, 10, 30, 60],
706                 },
707             },
708         },
709         'column-reverse': {
710             'ltr': {
711                 'wrap': {
712                     'flexbox': [70, 60],
713                     'child1': [10, 10, 60, 0],
714                     'child2': [10, 10, 50, 10],
715                     'child3': [10, 10, 40, 20],
716                     'child4': [10, 10, 30, 5],
717                     'child5': [10, 10, 20, 5],
718                     'child6': [10, 30, 10, 0],
719                     'child7': [10, 30, 0, 0],
720                     'child8': [10, 10, 60, 30],
721                     'child9': [10, 10, 50, 40],
722                     'child10': [10, 10, 40, 50],
723                     'child11': [10, 10, 30, 35],
724                     'child12': [10, 10, 20, 35],
725                     'child13': [10, 30, 10, 30],
726                     'child14': [10, 30, 0, 30],
727                 },
728             },
729             'rtl': {
730                 'wrap': {
731                     'flexbox': [70, 60],
732                     'child1': [10, 10, 60, 50],
733                     'child2': [10, 10, 50, 40],
734                     'child3': [10, 10, 40, 30],
735                     'child4': [10, 10, 30, 45],
736                     'child5': [10, 10, 20, 45],
737                     'child6': [10, 30, 10, 30],
738                     'child7': [10, 30, 0, 30],
739                     'child8': [10, 10, 60, 20],
740                     'child9': [10, 10, 50, 10],
741                     'child10': [10, 10, 40, 0],
742                     'child11': [10, 10, 30, 15],
743                     'child12': [10, 10, 20, 15],
744                     'child13': [10, 30, 10, 0],
745                     'child14': [10, 30, 0, 0],
746                 },
747             },
748         },
749     },
750 };
751
752 function mainAxisDirection(writingMode, flexDirection)
753 {
754     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
755         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
756         return 'width';
757     return 'height';
758 }
759
760 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)
761 {
762     var child = document.createElement('div');
763     child.setAttribute('style', mainAxis + ': -webkit-flex(1 ' + preferredSize + 'px);'
764         + crossAxis + ': ' + crossAxisLength + ';'
765         + '-webkit-flex-item-align: ' + alignment);
766
767     child.setAttribute("data-expected-width", expectations[0]);
768     child.setAttribute("data-expected-height", expectations[1]);
769     child.setAttribute("data-offset-x", expectations[2]);
770     child.setAttribute("data-offset-y", expectations[3]);
771
772     flexbox.appendChild(child);
773 }
774
775 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
776 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
777 var directions = ['ltr', 'rtl'];
778 // FIXME: Implement and test wrap-reverse.
779 var wraps = ['wrap'];
780
781 writingModes.forEach(function(writingMode) {
782     flexDirections.forEach(function(flexDirection) {
783         directions.forEach(function(direction) {
784             wraps.forEach(function(wrap) {
785                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
786                 var title = document.createElement('div');
787                 title.className = 'title';
788                 title.innerHTML = flexboxClassName;
789                 document.body.appendChild(title);
790
791                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
792                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
793
794                 var flexbox = document.createElement('div');
795                 flexbox.className = 'flexbox ' + flexboxClassName;
796                 flexbox.setAttribute('style', mainAxis + ': 70px');
797
798                 var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px' : '-webkit-margin-start: 5px';
799                     
800                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
801                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'start', testExpectations['child1']);
802                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']);
803                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'end', testExpectations['child3']);
804                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child4']);
805                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child5']);
806                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child6']);
807                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'start', testExpectations['child7']);
808
809                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'start', testExpectations['child8']);
810                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child9']);
811                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'end', testExpectations['child10']);
812                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child11']);
813                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child12']);
814                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child13']);
815                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'start', testExpectations['child14']);
816
817                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
818                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
819
820                 document.body.appendChild(flexbox);
821             })
822         })
823     })
824 })
825 </script>
826 </body>
827 </html>