fd07036aebf20d7a2d4136af6511cf90c7906921
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline-pack.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: -webkit-flexbox;
7     background-color: grey;
8     max-width: 100px;
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 .pack-start {
50     -webkit-flex-pack: start;
51 }
52 .pack-end {
53     -webkit-flex-pack: end;
54 }
55 .pack-center {
56     -webkit-flex-pack: center;
57 }
58 .pack-justify {
59     -webkit-flex-pack: justify;
60 }
61 .pack-distribute {
62     -webkit-flex-pack: distribute;
63 }
64 .flexbox > :nth-child(1) {
65     background-color: #0f0;
66 }
67 .flexbox > :nth-child(2) {
68     background-color: #090;
69 }
70 .flexbox > :nth-child(3) {
71     background-color: #00f;
72 }
73 .flexbox > :nth-child(4) {
74     background-color: #009;
75 }
76 </style>
77 <script>
78 if (window.layoutTestController)
79     layoutTestController.dumpAsText();
80 </script>
81 <script src="resources/flexbox.js"></script>
82 <body onload="checkFlexBoxen()">
83
84 <script>
85 var expectations = {
86     'horizontal-tb': {
87         'row': {
88             'ltr': {
89                 'wrap': {
90                     'start': {
91                         'flexbox': [80, 20],
92                         'child1': [40, 10, 0, 0],
93                         'child2': [20, 10, 40, 0],
94                         'child3': [40, 10, 0, 10],
95                         'child4': [20, 10, 40, 10],
96                     },
97                     'end': {
98                         'flexbox': [80, 20],
99                         'child1': [40, 10, 20, 0],
100                         'child2': [20, 10, 60, 0],
101                         'child3': [40, 10, 20, 10],
102                         'child4': [20, 10, 60, 10],
103                     },
104                     'center': {
105                         'flexbox': [80, 20],
106                         'child1': [40, 10, 10, 0],
107                         'child2': [20, 10, 50, 0],
108                         'child3': [40, 10, 10, 10],
109                         'child4': [20, 10, 50, 10],
110                     },
111                     'justify': {
112                         'flexbox': [80, 20],
113                         'child1': [40, 10, 0, 0],
114                         'child2': [20, 10, 60, 0],
115                         'child3': [40, 10, 0, 10],
116                         'child4': [20, 10, 60, 10],
117                     },
118                     'distribute': {
119                         'flexbox': [80, 20],
120                         'child1': [40, 10, 5, 0],
121                         'child2': [20, 10, 55, 0],
122                         'child3': [40, 10, 5, 10],
123                         'child4': [20, 10, 55, 10],
124                     },
125                 },
126             },
127             'rtl': {
128                 'wrap': {
129                     'start': {
130                         'flexbox': [80, 20],
131                         'child1': [40, 10, 40, 0],
132                         'child2': [20, 10, 20, 0],
133                         'child3': [40, 10, 40, 10],
134                         'child4': [20, 10, 20, 10],
135                     },
136                     'end': {
137                         'flexbox': [80, 20],
138                         'child1': [40, 10, 20, 0],
139                         'child2': [20, 10, 0, 0],
140                         'child3': [40, 10, 20, 10],
141                         'child4': [20, 10, 0, 10],
142                     },
143                     'center': {
144                         'flexbox': [80, 20],
145                         'child1': [40, 10, 30, 0],
146                         'child2': [20, 10, 10, 0],
147                         'child3': [40, 10, 30, 10],
148                         'child4': [20, 10, 10, 10],
149                     },
150                     'justify': {
151                         'flexbox': [80, 20],
152                         'child1': [40, 10, 40, 0],
153                         'child2': [20, 10, 0, 0],
154                         'child3': [40, 10, 40, 10],
155                         'child4': [20, 10, 0, 10],
156                     },
157                     'distribute': {
158                         'flexbox': [80, 20],
159                         'child1': [40, 10, 35, 0],
160                         'child2': [20, 10, 5, 0],
161                         'child3': [40, 10, 35, 10],
162                         'child4': [20, 10, 5, 10],
163                     },
164                 },
165             },
166         },
167         'column': {
168             'ltr': {
169                 'wrap': {
170                     'start': {
171                         'flexbox': [100, 80],
172                         'child1': [10, 40, 0, 0],
173                         'child2': [10, 20, 0, 40],
174                         'child3': [10, 40, 10, 0],
175                         'child4': [10, 20, 10, 40],
176                     },
177                     'end': {
178                         'flexbox': [100, 80],
179                         'child1': [10, 40, 0, 20],
180                         'child2': [10, 20, 0, 60],
181                         'child3': [10, 40, 10, 20],
182                         'child4': [10, 20, 10, 60],
183                     },
184                     'center': {
185                         'flexbox': [100, 80],
186                         'child1': [10, 40, 0, 10],
187                         'child2': [10, 20, 0, 50],
188                         'child3': [10, 40, 10, 10],
189                         'child4': [10, 20, 10, 50],
190                     },
191                     'justify': {
192                         'flexbox': [100, 80],
193                         'child1': [10, 40, 0, 0],
194                         'child2': [10, 20, 0, 60],
195                         'child3': [10, 40, 10, 0],
196                         'child4': [10, 20, 10, 60],
197                     },
198                     'distribute': {
199                         'flexbox': [100, 80],
200                         'child1': [10, 40, 0, 5],
201                         'child2': [10, 20, 0, 55],
202                         'child3': [10, 40, 10, 5],
203                         'child4': [10, 20, 10, 55],
204                     },
205                 },
206             },
207             'rtl': {
208                 'wrap': {
209                     'start': {
210                         'flexbox': [100, 80],
211                         'child1': [10, 40, 90, 0],
212                         'child2': [10, 20, 90, 40],
213                         'child3': [10, 40, 80, 0],
214                         'child4': [10, 20, 80, 40],
215                     },
216                     'end': {
217                         'flexbox': [100, 80],
218                         'child1': [10, 40, 90, 20],
219                         'child2': [10, 20, 90, 60],
220                         'child3': [10, 40, 80, 20],
221                         'child4': [10, 20, 80, 60],
222                     },
223                     'center': {
224                         'flexbox': [100, 80],
225                         'child1': [10, 40, 90, 10],
226                         'child2': [10, 20, 90, 50],
227                         'child3': [10, 40, 80, 10],
228                         'child4': [10, 20, 80, 50],
229                     },
230                     'justify': {
231                         'flexbox': [100, 80],
232                         'child1': [10, 40, 90, 0],
233                         'child2': [10, 20, 90, 60],
234                         'child3': [10, 40, 80, 0],
235                         'child4': [10, 20, 80, 60],
236                     },
237                     'distribute': {
238                         'flexbox': [100, 80],
239                         'child1': [10, 40, 90, 5],
240                         'child2': [10, 20, 90, 55],
241                         'child3': [10, 40, 80, 5],
242                         'child4': [10, 20, 80, 55],
243                     },
244                 },
245             },
246         },
247         'row-reverse': {
248             'ltr': {
249                 'wrap': {
250                     'start': {
251                         'flexbox': [80, 20],
252                         'child1': [40, 10, 40, 0],
253                         'child2': [20, 10, 20, 0],
254                         'child3': [40, 10, 40, 10],
255                         'child4': [20, 10, 20, 10],
256                     },
257                     'end': {
258                         'flexbox': [80, 20],
259                         'child1': [40, 10, 20, 0],
260                         'child2': [20, 10, 0, 0],
261                         'child3': [40, 10, 20, 10],
262                         'child4': [20, 10, 0, 10],
263                     },
264                     'center': {
265                         'flexbox': [80, 20],
266                         'child1': [40, 10, 30, 0],
267                         'child2': [20, 10, 10, 0],
268                         'child3': [40, 10, 30, 10],
269                         'child4': [20, 10, 10, 10],
270                     },
271                     'justify': {
272                         'flexbox': [80, 20],
273                         'child1': [40, 10, 40, 0],
274                         'child2': [20, 10, 0, 0],
275                         'child3': [40, 10, 40, 10],
276                         'child4': [20, 10, 0, 10],
277                     },
278                     'distribute': {
279                         'flexbox': [80, 20],
280                         'child1': [40, 10, 35, 0],
281                         'child2': [20, 10, 5, 0],
282                         'child3': [40, 10, 35, 10],
283                         'child4': [20, 10, 5, 10],
284                     },
285                 },
286             },
287             'rtl': {
288                 'wrap': {
289                     'start': {
290                         'flexbox': [80, 20],
291                         'child1': [40, 10, 0, 0],
292                         'child2': [20, 10, 40, 0],
293                         'child3': [40, 10, 0, 10],
294                         'child4': [20, 10, 40, 10],
295                     },
296                     'end': {
297                         'flexbox': [80, 20],
298                         'child1': [40, 10, 20, 0],
299                         'child2': [20, 10, 60, 0],
300                         'child3': [40, 10, 20, 10],
301                         'child4': [20, 10, 60, 10],
302                     },
303                     'center': {
304                         'flexbox': [80, 20],
305                         'child1': [40, 10, 10, 0],
306                         'child2': [20, 10, 50, 0],
307                         'child3': [40, 10, 10, 10],
308                         'child4': [20, 10, 50, 10],
309                     },
310                     'justify': {
311                         'flexbox': [80, 20],
312                         'child1': [40, 10, 0, 0],
313                         'child2': [20, 10, 60, 0],
314                         'child3': [40, 10, 0, 10],
315                         'child4': [20, 10, 60, 10],
316                     },
317                     'distribute': {
318                         'flexbox': [80, 20],
319                         'child1': [40, 10, 5, 0],
320                         'child2': [20, 10, 55, 0],
321                         'child3': [40, 10, 5, 10],
322                         'child4': [20, 10, 55, 10],
323                     },
324                 },
325             },
326         },
327         'column-reverse': {
328             'ltr': {
329                 'wrap': {
330                     'start': {
331                         'flexbox': [100, 80],
332                         'child1': [10, 40, 0, 40],
333                         'child2': [10, 20, 0, 20],
334                         'child3': [10, 40, 10, 40],
335                         'child4': [10, 20, 10, 20],
336                     },
337                     'end': {
338                         'flexbox': [100, 80],
339                         'child1': [10, 40, 0, 20],
340                         'child2': [10, 20, 0, 0],
341                         'child3': [10, 40, 10, 20],
342                         'child4': [10, 20, 10, 0],
343                     },
344                     'center': {
345                         'flexbox': [100, 80],
346                         'child1': [10, 40, 0, 30],
347                         'child2': [10, 20, 0, 10],
348                         'child3': [10, 40, 10, 30],
349                         'child4': [10, 20, 10, 10],
350                     },
351                     'justify': {
352                         'flexbox': [100, 80],
353                         'child1': [10, 40, 0, 40],
354                         'child2': [10, 20, 0, 0],
355                         'child3': [10, 40, 10, 40],
356                         'child4': [10, 20, 10, 0],
357                     },
358                     'distribute': {
359                         'flexbox': [100, 80],
360                         'child1': [10, 40, 0, 35],
361                         'child2': [10, 20, 0, 5],
362                         'child3': [10, 40, 10, 35],
363                         'child4': [10, 20, 10, 5],
364                     },
365                 },
366             },
367             'rtl': {
368                 'wrap': {
369                     'start': {
370                         'flexbox': [100, 80],
371                         'child1': [10, 40, 90, 40],
372                         'child2': [10, 20, 90, 20],
373                         'child3': [10, 40, 80, 40],
374                         'child4': [10, 20, 80, 20],
375                     },
376                     'end': {
377                         'flexbox': [100, 80],
378                         'child1': [10, 40, 90, 20],
379                         'child2': [10, 20, 90, 0],
380                         'child3': [10, 40, 80, 20],
381                         'child4': [10, 20, 80, 0],
382                     },
383                     'center': {
384                         'flexbox': [100, 80],
385                         'child1': [10, 40, 90, 30],
386                         'child2': [10, 20, 90, 10],
387                         'child3': [10, 40, 80, 30],
388                         'child4': [10, 20, 80, 10],
389                     },
390                     'justify': {
391                         'flexbox': [100, 80],
392                         'child1': [10, 40, 90, 40],
393                         'child2': [10, 20, 90, 0],
394                         'child3': [10, 40, 80, 40],
395                         'child4': [10, 20, 80, 0],
396                     },
397                     'distribute': {
398                         'flexbox': [100, 80],
399                         'child1': [10, 40, 90, 35],
400                         'child2': [10, 20, 90, 5],
401                         'child3': [10, 40, 80, 35],
402                         'child4': [10, 20, 80, 5],
403                     },
404                 },
405             },
406         },
407     },
408     'horizontal-bt': {
409         'row': {
410             'ltr': {
411                 'wrap': {
412                     'start': {
413                         'flexbox': [80, 20],
414                         'child1': [40, 10, 0, 10],
415                         'child2': [20, 10, 40, 10],
416                         'child3': [40, 10, 0, 0],
417                         'child4': [20, 10, 40, 0],
418                     },
419                     'end': {
420                         'flexbox': [80, 20],
421                         'child1': [40, 10, 20, 10],
422                         'child2': [20, 10, 60, 10],
423                         'child3': [40, 10, 20, 0],
424                         'child4': [20, 10, 60, 0],
425                     },
426                     'center': {
427                         'flexbox': [80, 20],
428                         'child1': [40, 10, 10, 10],
429                         'child2': [20, 10, 50, 10],
430                         'child3': [40, 10, 10, 0],
431                         'child4': [20, 10, 50, 0],
432                     },
433                     'justify': {
434                         'flexbox': [80, 20],
435                         'child1': [40, 10, 0, 10],
436                         'child2': [20, 10, 60, 10],
437                         'child3': [40, 10, 0, 0],
438                         'child4': [20, 10, 60, 0],
439                     },
440                     'distribute': {
441                         'flexbox': [80, 20],
442                         'child1': [40, 10, 5, 10],
443                         'child2': [20, 10, 55, 10],
444                         'child3': [40, 10, 5, 0],
445                         'child4': [20, 10, 55, 0],
446                     },
447                 },
448             },
449             'rtl': {
450                 'wrap': {
451                     'start': {
452                         'flexbox': [80, 20],
453                         'child1': [40, 10, 40, 10],
454                         'child2': [20, 10, 20, 10],
455                         'child3': [40, 10, 40, 0],
456                         'child4': [20, 10, 20, 0],
457                     },
458                     'end': {
459                         'flexbox': [80, 20],
460                         'child1': [40, 10, 20, 10],
461                         'child2': [20, 10, 0, 10],
462                         'child3': [40, 10, 20, 0],
463                         'child4': [20, 10, 0, 0],
464                     },
465                     'center': {
466                         'flexbox': [80, 20],
467                         'child1': [40, 10, 30, 10],
468                         'child2': [20, 10, 10, 10],
469                         'child3': [40, 10, 30, 0],
470                         'child4': [20, 10, 10, 0],
471                     },
472                     'justify': {
473                         'flexbox': [80, 20],
474                         'child1': [40, 10, 40, 10],
475                         'child2': [20, 10, 0, 10],
476                         'child3': [40, 10, 40, 0],
477                         'child4': [20, 10, 0, 0],
478                     },
479                     'distribute': {
480                         'flexbox': [80, 20],
481                         'child1': [40, 10, 35, 10],
482                         'child2': [20, 10, 5, 10],
483                         'child3': [40, 10, 35, 0],
484                         'child4': [20, 10, 5, 0],
485                     },
486                 },
487             },
488         },
489         'column': {
490             'ltr': {
491                 'wrap': {
492                     'start': {
493                         'flexbox': [100, 80],
494                         'child1': [10, 40, 0, 40],
495                         'child2': [10, 20, 0, 20],
496                         'child3': [10, 40, 10, 40],
497                         'child4': [10, 20, 10, 20],
498                     },
499                     'end': {
500                         'flexbox': [100, 80],
501                         'child1': [10, 40, 0, 20],
502                         'child2': [10, 20, 0, 0],
503                         'child3': [10, 40, 10, 20],
504                         'child4': [10, 20, 10, 0],
505                     },
506                     'center': {
507                         'flexbox': [100, 80],
508                         'child1': [10, 40, 0, 30],
509                         'child2': [10, 20, 0, 10],
510                         'child3': [10, 40, 10, 30],
511                         'child4': [10, 20, 10, 10],
512                     },
513                     'justify': {
514                         'flexbox': [100, 80],
515                         'child1': [10, 40, 0, 40],
516                         'child2': [10, 20, 0, 0],
517                         'child3': [10, 40, 10, 40],
518                         'child4': [10, 20, 10, 0],
519                     },
520                     'distribute': {
521                         'flexbox': [100, 80],
522                         'child1': [10, 40, 0, 35],
523                         'child2': [10, 20, 0, 5],
524                         'child3': [10, 40, 10, 35],
525                         'child4': [10, 20, 10, 5],
526                     },
527                 },
528             },
529             'rtl': {
530                 'wrap': {
531                     'start': {
532                         'flexbox': [100, 80],
533                         'child1': [10, 40, 90, 40],
534                         'child2': [10, 20, 90, 20],
535                         'child3': [10, 40, 80, 40],
536                         'child4': [10, 20, 80, 20],
537                     },
538                     'end': {
539                         'flexbox': [100, 80],
540                         'child1': [10, 40, 90, 20],
541                         'child2': [10, 20, 90, 0],
542                         'child3': [10, 40, 80, 20],
543                         'child4': [10, 20, 80, 0],
544                     },
545                     'center': {
546                         'flexbox': [100, 80],
547                         'child1': [10, 40, 90, 30],
548                         'child2': [10, 20, 90, 10],
549                         'child3': [10, 40, 80, 30],
550                         'child4': [10, 20, 80, 10],
551                     },
552                     'justify': {
553                         'flexbox': [100, 80],
554                         'child1': [10, 40, 90, 40],
555                         'child2': [10, 20, 90, 0],
556                         'child3': [10, 40, 80, 40],
557                         'child4': [10, 20, 80, 0],
558                     },
559                     'distribute': {
560                         'flexbox': [100, 80],
561                         'child1': [10, 40, 90, 35],
562                         'child2': [10, 20, 90, 5],
563                         'child3': [10, 40, 80, 35],
564                         'child4': [10, 20, 80, 5],
565                     },
566                 },
567             },
568         },
569         'row-reverse': {
570             'ltr': {
571                 'wrap': {
572                     'start': {
573                         'flexbox': [80, 20],
574                         'child1': [40, 10, 40, 10],
575                         'child2': [20, 10, 20, 10],
576                         'child3': [40, 10, 40, 0],
577                         'child4': [20, 10, 20, 0],
578                     },
579                     'end': {
580                         'flexbox': [80, 20],
581                         'child1': [40, 10, 20, 10],
582                         'child2': [20, 10, 0, 10],
583                         'child3': [40, 10, 20, 0],
584                         'child4': [20, 10, 0, 0],
585                     },
586                     'center': {
587                         'flexbox': [80, 20],
588                         'child1': [40, 10, 30, 10],
589                         'child2': [20, 10, 10, 10],
590                         'child3': [40, 10, 30, 0],
591                         'child4': [20, 10, 10, 0],
592                     },
593                     'justify': {
594                         'flexbox': [80, 20],
595                         'child1': [40, 10, 40, 10],
596                         'child2': [20, 10, 0, 10],
597                         'child3': [40, 10, 40, 0],
598                         'child4': [20, 10, 0, 0],
599                     },
600                     'distribute': {
601                         'flexbox': [80, 20],
602                         'child1': [40, 10, 35, 10],
603                         'child2': [20, 10, 5, 10],
604                         'child3': [40, 10, 35, 0],
605                         'child4': [20, 10, 5, 0],
606                     },
607                 },
608             },
609             'rtl': {
610                 'wrap': {
611                     'start': {
612                         'flexbox': [80, 20],
613                         'child1': [40, 10, 0, 10],
614                         'child2': [20, 10, 40, 10],
615                         'child3': [40, 10, 0, 0],
616                         'child4': [20, 10, 40, 0],
617                     },
618                     'end': {
619                         'flexbox': [80, 20],
620                         'child1': [40, 10, 20, 10],
621                         'child2': [20, 10, 60, 10],
622                         'child3': [40, 10, 20, 0],
623                         'child4': [20, 10, 60, 0],
624                     },
625                     'center': {
626                         'flexbox': [80, 20],
627                         'child1': [40, 10, 10, 10],
628                         'child2': [20, 10, 50, 10],
629                         'child3': [40, 10, 10, 0],
630                         'child4': [20, 10, 50, 0],
631                     },
632                     'justify': {
633                         'flexbox': [80, 20],
634                         'child1': [40, 10, 0, 10],
635                         'child2': [20, 10, 60, 10],
636                         'child3': [40, 10, 0, 0],
637                         'child4': [20, 10, 60, 0],
638                     },
639                     'distribute': {
640                         'flexbox': [80, 20],
641                         'child1': [40, 10, 5, 10],
642                         'child2': [20, 10, 55, 10],
643                         'child3': [40, 10, 5, 0],
644                         'child4': [20, 10, 55, 0],
645                     },
646                 },
647             },
648         },
649         'column-reverse': {
650             'ltr': {
651                 'wrap': {
652                     'start': {
653                         'flexbox': [100, 80],
654                         'child1': [10, 40, 0, 0],
655                         'child2': [10, 20, 0, 40],
656                         'child3': [10, 40, 10, 0],
657                         'child4': [10, 20, 10, 40],
658                     },
659                     'end': {
660                         'flexbox': [100, 80],
661                         'child1': [10, 40, 0, 20],
662                         'child2': [10, 20, 0, 60],
663                         'child3': [10, 40, 10, 20],
664                         'child4': [10, 20, 10, 60],
665                     },
666                     'center': {
667                         'flexbox': [100, 80],
668                         'child1': [10, 40, 0, 10],
669                         'child2': [10, 20, 0, 50],
670                         'child3': [10, 40, 10, 10],
671                         'child4': [10, 20, 10, 50],
672                     },
673                     'justify': {
674                         'flexbox': [100, 80],
675                         'child1': [10, 40, 0, 0],
676                         'child2': [10, 20, 0, 60],
677                         'child3': [10, 40, 10, 0],
678                         'child4': [10, 20, 10, 60],
679                     },
680                     'distribute': {
681                         'flexbox': [100, 80],
682                         'child1': [10, 40, 0, 5],
683                         'child2': [10, 20, 0, 55],
684                         'child3': [10, 40, 10, 5],
685                         'child4': [10, 20, 10, 55],
686                     },
687                 },
688             },
689             'rtl': {
690                 'wrap': {
691                     'start': {
692                         'flexbox': [100, 80],
693                         'child1': [10, 40, 90, 0],
694                         'child2': [10, 20, 90, 40],
695                         'child3': [10, 40, 80, 0],
696                         'child4': [10, 20, 80, 40],
697                     },
698                     'end': {
699                         'flexbox': [100, 80],
700                         'child1': [10, 40, 90, 20],
701                         'child2': [10, 20, 90, 60],
702                         'child3': [10, 40, 80, 20],
703                         'child4': [10, 20, 80, 60],
704                     },
705                     'center': {
706                         'flexbox': [100, 80],
707                         'child1': [10, 40, 90, 10],
708                         'child2': [10, 20, 90, 50],
709                         'child3': [10, 40, 80, 10],
710                         'child4': [10, 20, 80, 50],
711                     },
712                     'justify': {
713                         'flexbox': [100, 80],
714                         'child1': [10, 40, 90, 0],
715                         'child2': [10, 20, 90, 60],
716                         'child3': [10, 40, 80, 0],
717                         'child4': [10, 20, 80, 60],
718                     },
719                     'distribute': {
720                         'flexbox': [100, 80],
721                         'child1': [10, 40, 90, 5],
722                         'child2': [10, 20, 90, 55],
723                         'child3': [10, 40, 80, 5],
724                         'child4': [10, 20, 80, 55],
725                     },
726                 },
727             },
728         },
729     },
730     'vertical-rl': {
731         'row': {
732             'ltr': {
733                 'wrap': {
734                     'start': {
735                         'flexbox': [20, 80],
736                         'child1': [10, 40, 10, 0],
737                         'child2': [10, 20, 10, 40],
738                         'child3': [10, 40, 0, 0],
739                         'child4': [10, 20, 0, 40],
740                     },
741                     'end': {
742                         'flexbox': [20, 80],
743                         'child1': [10, 40, 10, 20],
744                         'child2': [10, 20, 10, 60],
745                         'child3': [10, 40, 0, 20],
746                         'child4': [10, 20, 0, 60],
747                     },
748                     'center': {
749                         'flexbox': [20, 80],
750                         'child1': [10, 40, 10, 10],
751                         'child2': [10, 20, 10, 50],
752                         'child3': [10, 40, 0, 10],
753                         'child4': [10, 20, 0, 50],
754                     },
755                     'justify': {
756                         'flexbox': [20, 80],
757                         'child1': [10, 40, 10, 0],
758                         'child2': [10, 20, 10, 60],
759                         'child3': [10, 40, 0, 0],
760                         'child4': [10, 20, 0, 60],
761                     },
762                     'distribute': {
763                         'flexbox': [20, 80],
764                         'child1': [10, 40, 10, 5],
765                         'child2': [10, 20, 10, 55],
766                         'child3': [10, 40, 0, 5],
767                         'child4': [10, 20, 0, 55],
768                     },
769                 },
770             },
771             'rtl': {
772                 'wrap': {
773                     'start': {
774                         'flexbox': [20, 80],
775                         'child1': [10, 40, 10, 40],
776                         'child2': [10, 20, 10, 20],
777                         'child3': [10, 40, 0, 40],
778                         'child4': [10, 20, 0, 20],
779                     },
780                     'end': {
781                         'flexbox': [20, 80],
782                         'child1': [10, 40, 10, 20],
783                         'child2': [10, 20, 10, 0],
784                         'child3': [10, 40, 0, 20],
785                         'child4': [10, 20, 0, 0],
786                     },
787                     'center': {
788                         'flexbox': [20, 80],
789                         'child1': [10, 40, 10, 30],
790                         'child2': [10, 20, 10, 10],
791                         'child3': [10, 40, 0, 30],
792                         'child4': [10, 20, 0, 10],
793                     },
794                     'justify': {
795                         'flexbox': [20, 80],
796                         'child1': [10, 40, 10, 40],
797                         'child2': [10, 20, 10, 0],
798                         'child3': [10, 40, 0, 40],
799                         'child4': [10, 20, 0, 0],
800                     },
801                     'distribute': {
802                         'flexbox': [20, 80],
803                         'child1': [10, 40, 10, 35],
804                         'child2': [10, 20, 10, 5],
805                         'child3': [10, 40, 0, 35],
806                         'child4': [10, 20, 0, 5],
807                     },
808                 },
809             },
810         },
811         'column': {
812             'ltr': {
813                 'wrap': {
814                     'start': {
815                         'flexbox': [80, 20],
816                         'child1': [40, 10, 40, 0],
817                         'child2': [20, 10, 20, 0],
818                         'child3': [40, 10, 40, 10],
819                         'child4': [20, 10, 20, 10],
820                     },
821                     'end': {
822                         'flexbox': [80, 20],
823                         'child1': [40, 10, 20, 0],
824                         'child2': [20, 10, 0, 0],
825                         'child3': [40, 10, 20, 10],
826                         'child4': [20, 10, 0, 10],
827                     },
828                     'center': {
829                         'flexbox': [80, 20],
830                         'child1': [40, 10, 30, 0],
831                         'child2': [20, 10, 10, 0],
832                         'child3': [40, 10, 30, 10],
833                         'child4': [20, 10, 10, 10],
834                     },
835                     'justify': {
836                         'flexbox': [80, 20],
837                         'child1': [40, 10, 40, 0],
838                         'child2': [20, 10, 0, 0],
839                         'child3': [40, 10, 40, 10],
840                         'child4': [20, 10, 0, 10],
841                     },
842                     'distribute': {
843                         'flexbox': [80, 20],
844                         'child1': [40, 10, 35, 0],
845                         'child2': [20, 10, 5, 0],
846                         'child3': [40, 10, 35, 10],
847                         'child4': [20, 10, 5, 10],
848                     },
849                 },
850             },
851             'rtl': {
852                 'wrap': {
853                     'start': {
854                         'flexbox': [80, 20],
855                         'child1': [40, 10, 40, 10],
856                         'child2': [20, 10, 20, 10],
857                         'child3': [40, 10, 40, 0],
858                         'child4': [20, 10, 20, 0],
859                     },
860                     'end': {
861                         'flexbox': [80, 20],
862                         'child1': [40, 10, 20, 10],
863                         'child2': [20, 10, 0, 10],
864                         'child3': [40, 10, 20, 0],
865                         'child4': [20, 10, 0, 0],
866                     },
867                     'center': {
868                         'flexbox': [80, 20],
869                         'child1': [40, 10, 30, 10],
870                         'child2': [20, 10, 10, 10],
871                         'child3': [40, 10, 30, 0],
872                         'child4': [20, 10, 10, 0],
873                     },
874                     'justify': {
875                         'flexbox': [80, 20],
876                         'child1': [40, 10, 40, 10],
877                         'child2': [20, 10, 0, 10],
878                         'child3': [40, 10, 40, 0],
879                         'child4': [20, 10, 0, 0],
880                     },
881                     'distribute': {
882                         'flexbox': [80, 20],
883                         'child1': [40, 10, 35, 10],
884                         'child2': [20, 10, 5, 10],
885                         'child3': [40, 10, 35, 0],
886                         'child4': [20, 10, 5, 0],
887                     },
888                 },
889             },
890         },
891         'row-reverse': {
892             'ltr': {
893                 'wrap': {
894                     'start': {
895                         'flexbox': [20, 80],
896                         'child1': [10, 40, 10, 40],
897                         'child2': [10, 20, 10, 20],
898                         'child3': [10, 40, 0, 40],
899                         'child4': [10, 20, 0, 20],
900                     },
901                     'end': {
902                         'flexbox': [20, 80],
903                         'child1': [10, 40, 10, 20],
904                         'child2': [10, 20, 10, 0],
905                         'child3': [10, 40, 0, 20],
906                         'child4': [10, 20, 0, 0],
907                     },
908                     'center': {
909                         'flexbox': [20, 80],
910                         'child1': [10, 40, 10, 30],
911                         'child2': [10, 20, 10, 10],
912                         'child3': [10, 40, 0, 30],
913                         'child4': [10, 20, 0, 10],
914                     },
915                     'justify': {
916                         'flexbox': [20, 80],
917                         'child1': [10, 40, 10, 40],
918                         'child2': [10, 20, 10, 0],
919                         'child3': [10, 40, 0, 40],
920                         'child4': [10, 20, 0, 0],
921                     },
922                     'distribute': {
923                         'flexbox': [20, 80],
924                         'child1': [10, 40, 10, 35],
925                         'child2': [10, 20, 10, 5],
926                         'child3': [10, 40, 0, 35],
927                         'child4': [10, 20, 0, 5],
928                     },
929                 },
930             },
931             'rtl': {
932                 'wrap': {
933                     'start': {
934                         'flexbox': [20, 80],
935                         'child1': [10, 40, 10, 0],
936                         'child2': [10, 20, 10, 40],
937                         'child3': [10, 40, 0, 0],
938                         'child4': [10, 20, 0, 40],
939                     },
940                     'end': {
941                         'flexbox': [20, 80],
942                         'child1': [10, 40, 10, 20],
943                         'child2': [10, 20, 10, 60],
944                         'child3': [10, 40, 0, 20],
945                         'child4': [10, 20, 0, 60],
946                     },
947                     'center': {
948                         'flexbox': [20, 80],
949                         'child1': [10, 40, 10, 10],
950                         'child2': [10, 20, 10, 50],
951                         'child3': [10, 40, 0, 10],
952                         'child4': [10, 20, 0, 50],
953                     },
954                     'justify': {
955                         'flexbox': [20, 80],
956                         'child1': [10, 40, 10, 0],
957                         'child2': [10, 20, 10, 60],
958                         'child3': [10, 40, 0, 0],
959                         'child4': [10, 20, 0, 60],
960                     },
961                     'distribute': {
962                         'flexbox': [20, 80],
963                         'child1': [10, 40, 10, 5],
964                         'child2': [10, 20, 10, 55],
965                         'child3': [10, 40, 0, 5],
966                         'child4': [10, 20, 0, 55],
967                     },
968                 },
969             },
970         },
971         'column-reverse': {
972             'ltr': {
973                 'wrap': {
974                     'start': {
975                         'flexbox': [80, 20],
976                         'child1': [40, 10, 0, 0],
977                         'child2': [20, 10, 40, 0],
978                         'child3': [40, 10, 0, 10],
979                         'child4': [20, 10, 40, 10],
980                     },
981                     'end': {
982                         'flexbox': [80, 20],
983                         'child1': [40, 10, 20, 0],
984                         'child2': [20, 10, 60, 0],
985                         'child3': [40, 10, 20, 10],
986                         'child4': [20, 10, 60, 10],
987                     },
988                     'center': {
989                         'flexbox': [80, 20],
990                         'child1': [40, 10, 10, 0],
991                         'child2': [20, 10, 50, 0],
992                         'child3': [40, 10, 10, 10],
993                         'child4': [20, 10, 50, 10],
994                     },
995                     'justify': {
996                         'flexbox': [80, 20],
997                         'child1': [40, 10, 0, 0],
998                         'child2': [20, 10, 60, 0],
999                         'child3': [40, 10, 0, 10],
1000                         'child4': [20, 10, 60, 10],
1001                     },
1002                     'distribute': {
1003                         'flexbox': [80, 20],
1004                         'child1': [40, 10, 5, 0],
1005                         'child2': [20, 10, 55, 0],
1006                         'child3': [40, 10, 5, 10],
1007                         'child4': [20, 10, 55, 10],
1008                     },
1009                 },
1010             },
1011             'rtl': {
1012                 'wrap': {
1013                     'start': {
1014                         'flexbox': [80, 20],
1015                         'child1': [40, 10, 0, 10],
1016                         'child2': [20, 10, 40, 10],
1017                         'child3': [40, 10, 0, 0],
1018                         'child4': [20, 10, 40, 0],
1019                     },
1020                     'end': {
1021                         'flexbox': [80, 20],
1022                         'child1': [40, 10, 20, 10],
1023                         'child2': [20, 10, 60, 10],
1024                         'child3': [40, 10, 20, 0],
1025                         'child4': [20, 10, 60, 0],
1026                     },
1027                     'center': {
1028                         'flexbox': [80, 20],
1029                         'child1': [40, 10, 10, 10],
1030                         'child2': [20, 10, 50, 10],
1031                         'child3': [40, 10, 10, 0],
1032                         'child4': [20, 10, 50, 0],
1033                     },
1034                     'justify': {
1035                         'flexbox': [80, 20],
1036                         'child1': [40, 10, 0, 10],
1037                         'child2': [20, 10, 60, 10],
1038                         'child3': [40, 10, 0, 0],
1039                         'child4': [20, 10, 60, 0],
1040                     },
1041                     'distribute': {
1042                         'flexbox': [80, 20],
1043                         'child1': [40, 10, 5, 10],
1044                         'child2': [20, 10, 55, 10],
1045                         'child3': [40, 10, 5, 0],
1046                         'child4': [20, 10, 55, 0],
1047                     },
1048                 },
1049             },
1050         },
1051     },
1052     'vertical-lr': {
1053         'row': {
1054             'ltr': {
1055                 'wrap': {
1056                     'start': {
1057                         'flexbox': [20, 80],
1058                         'child1': [10, 40, 0, 0],
1059                         'child2': [10, 20, 0, 40],
1060                         'child3': [10, 40, 10, 0],
1061                         'child4': [10, 20, 10, 40],
1062                     },
1063                     'end': {
1064                         'flexbox': [20, 80],
1065                         'child1': [10, 40, 0, 20],
1066                         'child2': [10, 20, 0, 60],
1067                         'child3': [10, 40, 10, 20],
1068                         'child4': [10, 20, 10, 60],
1069                     },
1070                     'center': {
1071                         'flexbox': [20, 80],
1072                         'child1': [10, 40, 0, 10],
1073                         'child2': [10, 20, 0, 50],
1074                         'child3': [10, 40, 10, 10],
1075                         'child4': [10, 20, 10, 50],
1076                     },
1077                     'justify': {
1078                         'flexbox': [20, 80],
1079                         'child1': [10, 40, 0, 0],
1080                         'child2': [10, 20, 0, 60],
1081                         'child3': [10, 40, 10, 0],
1082                         'child4': [10, 20, 10, 60],
1083                     },
1084                     'distribute': {
1085                         'flexbox': [20, 80],
1086                         'child1': [10, 40, 0, 5],
1087                         'child2': [10, 20, 0, 55],
1088                         'child3': [10, 40, 10, 5],
1089                         'child4': [10, 20, 10, 55],
1090                     },
1091                 },
1092             },
1093             'rtl': {
1094                 'wrap': {
1095                     'start': {
1096                         'flexbox': [20, 80],
1097                         'child1': [10, 40, 0, 40],
1098                         'child2': [10, 20, 0, 20],
1099                         'child3': [10, 40, 10, 40],
1100                         'child4': [10, 20, 10, 20],
1101                     },
1102                     'end': {
1103                         'flexbox': [20, 80],
1104                         'child1': [10, 40, 0, 20],
1105                         'child2': [10, 20, 0, 0],
1106                         'child3': [10, 40, 10, 20],
1107                         'child4': [10, 20, 10, 0],
1108                     },
1109                     'center': {
1110                         'flexbox': [20, 80],
1111                         'child1': [10, 40, 0, 30],
1112                         'child2': [10, 20, 0, 10],
1113                         'child3': [10, 40, 10, 30],
1114                         'child4': [10, 20, 10, 10],
1115                     },
1116                     'justify': {
1117                         'flexbox': [20, 80],
1118                         'child1': [10, 40, 0, 40],
1119                         'child2': [10, 20, 0, 0],
1120                         'child3': [10, 40, 10, 40],
1121                         'child4': [10, 20, 10, 0],
1122                     },
1123                     'distribute': {
1124                         'flexbox': [20, 80],
1125                         'child1': [10, 40, 0, 35],
1126                         'child2': [10, 20, 0, 5],
1127                         'child3': [10, 40, 10, 35],
1128                         'child4': [10, 20, 10, 5],
1129                     },
1130                 },
1131             },
1132         },
1133         'column': {
1134             'ltr': {
1135                 'wrap': {
1136                     'start': {
1137                         'flexbox': [80, 20],
1138                         'child1': [40, 10, 0, 0],
1139                         'child2': [20, 10, 40, 0],
1140                         'child3': [40, 10, 0, 10],
1141                         'child4': [20, 10, 40, 10],
1142                     },
1143                     'end': {
1144                         'flexbox': [80, 20],
1145                         'child1': [40, 10, 20, 0],
1146                         'child2': [20, 10, 60, 0],
1147                         'child3': [40, 10, 20, 10],
1148                         'child4': [20, 10, 60, 10],
1149                     },
1150                     'center': {
1151                         'flexbox': [80, 20],
1152                         'child1': [40, 10, 10, 0],
1153                         'child2': [20, 10, 50, 0],
1154                         'child3': [40, 10, 10, 10],
1155                         'child4': [20, 10, 50, 10],
1156                     },
1157                     'justify': {
1158                         'flexbox': [80, 20],
1159                         'child1': [40, 10, 0, 0],
1160                         'child2': [20, 10, 60, 0],
1161                         'child3': [40, 10, 0, 10],
1162                         'child4': [20, 10, 60, 10],
1163                     },
1164                     'distribute': {
1165                         'flexbox': [80, 20],
1166                         'child1': [40, 10, 5, 0],
1167                         'child2': [20, 10, 55, 0],
1168                         'child3': [40, 10, 5, 10],
1169                         'child4': [20, 10, 55, 10],
1170                     },
1171                 },
1172             },
1173             'rtl': {
1174                 'wrap': {
1175                     'start': {
1176                         'flexbox': [80, 20],
1177                         'child1': [40, 10, 0, 10],
1178                         'child2': [20, 10, 40, 10],
1179                         'child3': [40, 10, 0, 0],
1180                         'child4': [20, 10, 40, 0],
1181                     },
1182                     'end': {
1183                         'flexbox': [80, 20],
1184                         'child1': [40, 10, 20, 10],
1185                         'child2': [20, 10, 60, 10],
1186                         'child3': [40, 10, 20, 0],
1187                         'child4': [20, 10, 60, 0],
1188                     },
1189                     'center': {
1190                         'flexbox': [80, 20],
1191                         'child1': [40, 10, 10, 10],
1192                         'child2': [20, 10, 50, 10],
1193                         'child3': [40, 10, 10, 0],
1194                         'child4': [20, 10, 50, 0],
1195                     },
1196                     'justify': {
1197                         'flexbox': [80, 20],
1198                         'child1': [40, 10, 0, 10],
1199                         'child2': [20, 10, 60, 10],
1200                         'child3': [40, 10, 0, 0],
1201                         'child4': [20, 10, 60, 0],
1202                     },
1203                     'distribute': {
1204                         'flexbox': [80, 20],
1205                         'child1': [40, 10, 5, 10],
1206                         'child2': [20, 10, 55, 10],
1207                         'child3': [40, 10, 5, 0],
1208                         'child4': [20, 10, 55, 0],
1209                     },
1210                 },
1211             },
1212         },
1213         'row-reverse': {
1214             'ltr': {
1215                 'wrap': {
1216                     'start': {
1217                         'flexbox': [20, 80],
1218                         'child1': [10, 40, 0, 40],
1219                         'child2': [10, 20, 0, 20],
1220                         'child3': [10, 40, 10, 40],
1221                         'child4': [10, 20, 10, 20],
1222                     },
1223                     'end': {
1224                         'flexbox': [20, 80],
1225                         'child1': [10, 40, 0, 20],
1226                         'child2': [10, 20, 0, 0],
1227                         'child3': [10, 40, 10, 20],
1228                         'child4': [10, 20, 10, 0],
1229                     },
1230                     'center': {
1231                         'flexbox': [20, 80],
1232                         'child1': [10, 40, 0, 30],
1233                         'child2': [10, 20, 0, 10],
1234                         'child3': [10, 40, 10, 30],
1235                         'child4': [10, 20, 10, 10],
1236                     },
1237                     'justify': {
1238                         'flexbox': [20, 80],
1239                         'child1': [10, 40, 0, 40],
1240                         'child2': [10, 20, 0, 0],
1241                         'child3': [10, 40, 10, 40],
1242                         'child4': [10, 20, 10, 0],
1243                     },
1244                     'distribute': {
1245                         'flexbox': [20, 80],
1246                         'child1': [10, 40, 0, 35],
1247                         'child2': [10, 20, 0, 5],
1248                         'child3': [10, 40, 10, 35],
1249                         'child4': [10, 20, 10, 5],
1250                     },
1251                 },
1252             },
1253             'rtl': {
1254                 'wrap': {
1255                     'start': {
1256                         'flexbox': [20, 80],
1257                         'child1': [10, 40, 0, 0],
1258                         'child2': [10, 20, 0, 40],
1259                         'child3': [10, 40, 10, 0],
1260                         'child4': [10, 20, 10, 40],
1261                     },
1262                     'end': {
1263                         'flexbox': [20, 80],
1264                         'child1': [10, 40, 0, 20],
1265                         'child2': [10, 20, 0, 60],
1266                         'child3': [10, 40, 10, 20],
1267                         'child4': [10, 20, 10, 60],
1268                     },
1269                     'center': {
1270                         'flexbox': [20, 80],
1271                         'child1': [10, 40, 0, 10],
1272                         'child2': [10, 20, 0, 50],
1273                         'child3': [10, 40, 10, 10],
1274                         'child4': [10, 20, 10, 50],
1275                     },
1276                     'justify': {
1277                         'flexbox': [20, 80],
1278                         'child1': [10, 40, 0, 0],
1279                         'child2': [10, 20, 0, 60],
1280                         'child3': [10, 40, 10, 0],
1281                         'child4': [10, 20, 10, 60],
1282                     },
1283                     'distribute': {
1284                         'flexbox': [20, 80],
1285                         'child1': [10, 40, 0, 5],
1286                         'child2': [10, 20, 0, 55],
1287                         'child3': [10, 40, 10, 5],
1288                         'child4': [10, 20, 10, 55],
1289                     },
1290                 },
1291             },
1292         },
1293         'column-reverse': {
1294             'ltr': {
1295                 'wrap': {
1296                     'start': {
1297                         'flexbox': [80, 20],
1298                         'child1': [40, 10, 40, 0],
1299                         'child2': [20, 10, 20, 0],
1300                         'child3': [40, 10, 40, 10],
1301                         'child4': [20, 10, 20, 10],
1302                     },
1303                     'end': {
1304                         'flexbox': [80, 20],
1305                         'child1': [40, 10, 20, 0],
1306                         'child2': [20, 10, 0, 0],
1307                         'child3': [40, 10, 20, 10],
1308                         'child4': [20, 10, 0, 10],
1309                     },
1310                     'center': {
1311                         'flexbox': [80, 20],
1312                         'child1': [40, 10, 30, 0],
1313                         'child2': [20, 10, 10, 0],
1314                         'child3': [40, 10, 30, 10],
1315                         'child4': [20, 10, 10, 10],
1316                     },
1317                     'justify': {
1318                         'flexbox': [80, 20],
1319                         'child1': [40, 10, 40, 0],
1320                         'child2': [20, 10, 0, 0],
1321                         'child3': [40, 10, 40, 10],
1322                         'child4': [20, 10, 0, 10],
1323                     },
1324                     'distribute': {
1325                         'flexbox': [80, 20],
1326                         'child1': [40, 10, 35, 0],
1327                         'child2': [20, 10, 5, 0],
1328                         'child3': [40, 10, 35, 10],
1329                         'child4': [20, 10, 5, 10],
1330                     },
1331                 },
1332             },
1333             'rtl': {
1334                 'wrap': {
1335                     'start': {
1336                         'flexbox': [80, 20],
1337                         'child1': [40, 10, 40, 10],
1338                         'child2': [20, 10, 20, 10],
1339                         'child3': [40, 10, 40, 0],
1340                         'child4': [20, 10, 20, 0],
1341                     },
1342                     'end': {
1343                         'flexbox': [80, 20],
1344                         'child1': [40, 10, 20, 10],
1345                         'child2': [20, 10, 0, 10],
1346                         'child3': [40, 10, 20, 0],
1347                         'child4': [20, 10, 0, 0],
1348                     },
1349                     'center': {
1350                         'flexbox': [80, 20],
1351                         'child1': [40, 10, 30, 10],
1352                         'child2': [20, 10, 10, 10],
1353                         'child3': [40, 10, 30, 0],
1354                         'child4': [20, 10, 10, 0],
1355                     },
1356                     'justify': {
1357                         'flexbox': [80, 20],
1358                         'child1': [40, 10, 40, 10],
1359                         'child2': [20, 10, 0, 10],
1360                         'child3': [40, 10, 40, 0],
1361                         'child4': [20, 10, 0, 0],
1362                     },
1363                     'distribute': {
1364                         'flexbox': [80, 20],
1365                         'child1': [40, 10, 35, 10],
1366                         'child2': [20, 10, 5, 10],
1367                         'child3': [40, 10, 35, 0],
1368                         'child4': [20, 10, 5, 0],
1369                     },
1370                 },
1371             },
1372         },
1373     },
1374 };
1375
1376 function mainAxisDirection(writingMode, flexDirection)
1377 {
1378     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
1379         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
1380         return 'width';
1381     return 'height';
1382 }
1383
1384 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
1385 {
1386     var child = document.createElement('div');
1387     child.setAttribute('style', mainAxis + ': ' + preferredSize + 'px;'
1388         + crossAxis + ': ' + crossAxisLength + 'px;');
1389
1390     child.setAttribute("data-expected-width", expectations[0]);
1391     child.setAttribute("data-expected-height", expectations[1]);
1392     child.setAttribute("data-offset-x", expectations[2]);
1393     child.setAttribute("data-offset-y", expectations[3]);
1394
1395     flexbox.appendChild(child);
1396 }
1397
1398 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
1399 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
1400 var directions = ['ltr', 'rtl'];
1401 // FIXME: Implement and test wrap-reverse.
1402 var wraps = ['wrap'];
1403 var packs = ['start', 'end', 'center', 'justify', 'distribute'];
1404
1405 writingModes.forEach(function(writingMode) {
1406     flexDirections.forEach(function(flexDirection) {
1407         directions.forEach(function(direction) {
1408             wraps.forEach(function(wrap) {
1409                 packs.forEach(function(pack) {
1410                     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap + ' pack-' + pack;
1411                     var title = document.createElement('div');
1412                     title.className = 'title';
1413                     title.innerHTML = flexboxClassName;
1414                     document.body.appendChild(title);
1415
1416                     var mainAxis = mainAxisDirection(writingMode, flexDirection);
1417                     var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
1418
1419                     var flexbox = document.createElement('div');
1420                     flexbox.className = 'flexbox ' + flexboxClassName;
1421                     flexbox.setAttribute('style', mainAxis + ': 80px');
1422
1423                     var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px' : '-webkit-margin-start: 5px';
1424                         
1425                     var testExpectations = expectations[writingMode][flexDirection][direction][wrap][pack];
1426                     addChild(flexbox, mainAxis, crossAxis, 40, '10', testExpectations['child1']);
1427                     addChild(flexbox, mainAxis, crossAxis, 20, '10', testExpectations['child2']);
1428                     addChild(flexbox, mainAxis, crossAxis, 40, '10', testExpectations['child3']);
1429                     addChild(flexbox, mainAxis, crossAxis, 20, '10', testExpectations['child4']);
1430
1431                     flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
1432                     flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
1433
1434                     document.body.appendChild(flexbox);
1435                 })
1436             })
1437         })
1438     })
1439 })
1440 </script>
1441 </body>
1442 </html>