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