Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline-align-self.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: flex;
7     background-color: grey;
8     max-width: 600px;
9     align-content: flex-start;
10 }
11 .title {
12     margin-top: 1em;
13 }
14 .ltr {
15     direction: ltr;
16 }
17 .rtl {
18     direction: rtl;
19 }
20 .horizontal-tb {
21     writing-mode: horizontal-tb;
22 }
23 .vertical-rl {
24     writing-mode: vertical-rl;
25 }
26 .vertical-lr {
27     writing-mode: vertical-lr;
28 }
29 .row {
30     flex-flow: row;
31 }
32 .row-reverse {
33     flex-flow: row-reverse;
34 }
35 .column {
36     flex-flow: column;
37 }
38 .column-reverse {
39     flex-flow: column-reverse;
40 }
41 .wrap {
42   flex-wrap: wrap;
43 }
44 .wrap-reverse {
45   flex-wrap: wrap-reverse;
46 }
47 .flexbox > :nth-child(1) {
48     background-color: #0f0;
49 }
50 .flexbox > :nth-child(2) {
51     background-color: #0d0;
52 }
53 .flexbox > :nth-child(3) {
54     background-color: #0b0;
55 }
56 .flexbox > :nth-child(4) {
57     background-color: #090;
58 }
59 .flexbox > :nth-child(5) {
60     background-color: #070;
61 }
62 .flexbox > :nth-child(6) {
63     background-color: #050;
64 }
65 .flexbox > :nth-child(7) {
66     background-color: #030;
67 }
68
69 .flexbox > :nth-child(8) {
70     background-color: #00f;
71 }
72 .flexbox > :nth-child(9) {
73     background-color: #00d;
74 }
75 .flexbox > :nth-child(10) {
76     background-color: #00b;
77 }
78 .flexbox > :nth-child(11) {
79     background-color: #009;
80 }
81 .flexbox > :nth-child(12) {
82     background-color: #007;
83 }
84 .flexbox > :nth-child(13) {
85     background-color: #005;
86 }
87 .flexbox > :nth-child(14) {
88     background-color: #003;
89 }
90 </style>
91 <script src="../../resources/testharness.js"></script>
92 <script src="../../resources/testharnessreport.js"></script>
93 <script src="../../resources/check-layout-th.js"></script>
94 <body onload="checkLayout('.flexbox')">
95 <div id=log></div>
96
97 <script>
98 var expectations = {
99     'horizontal-tb': {
100         'row': {
101             'ltr': {
102                 'wrap': {
103                     'flexbox': [70, 60],
104                     'child1': [10, 10, 0, 0],
105                     'child2': [10, 10, 10, 10],
106                     'child3': [10, 10, 20, 20],
107                     'child4': [10, 10, 30, 5],
108                     'child5': [10, 10, 40, 5],
109                     'child6': [10, 30, 50, 0],
110                     'child7': [10, 30, 60, 0],
111                     'child8': [10, 10, 0, 30],
112                     'child9': [10, 10, 10, 40],
113                     'child10': [10, 10, 20, 50],
114                     'child11': [10, 10, 30, 35],
115                     'child12': [10, 10, 40, 35],
116                     'child13': [10, 30, 50, 30],
117                     'child14': [10, 30, 60, 30],
118                 },
119                 'wrap-reverse': {
120                     'flexbox': [70, 60],
121                     'child1': [10, 10, 0, 50],
122                     'child2': [10, 10, 10, 40],
123                     'child3': [10, 10, 20, 30],
124                     'child4': [10, 10, 30, 50],
125                     'child5': [10, 10, 40, 50],
126                     'child6': [10, 30, 50, 30],
127                     'child7': [10, 30, 60, 30],
128                     'child8': [10, 10, 0, 20],
129                     'child9': [10, 10, 10, 10],
130                     'child10': [10, 10, 20, 0],
131                     'child11': [10, 10, 30, 20],
132                     'child12': [10, 10, 40, 20],
133                     'child13': [10, 30, 50, 0],
134                     'child14': [10, 30, 60, 0],
135                 },
136             },
137             'rtl': {
138                 'wrap': {
139                     'flexbox': [70, 60],
140                     'child1': [10, 10, 60, 0],
141                     'child2': [10, 10, 50, 10],
142                     'child3': [10, 10, 40, 20],
143                     'child4': [10, 10, 30, 5],
144                     'child5': [10, 10, 20, 5],
145                     'child6': [10, 30, 10, 0],
146                     'child7': [10, 30, 0, 0],
147                     'child8': [10, 10, 60, 30],
148                     'child9': [10, 10, 50, 40],
149                     'child10': [10, 10, 40, 50],
150                     'child11': [10, 10, 30, 35],
151                     'child12': [10, 10, 20, 35],
152                     'child13': [10, 30, 10, 30],
153                     'child14': [10, 30, 0, 30],
154                 },
155                 'wrap-reverse': {
156                     'flexbox': [70, 60],
157                     'child1': [10, 10, 60, 50],
158                     'child2': [10, 10, 50, 40],
159                     'child3': [10, 10, 40, 30],
160                     'child4': [10, 10, 30, 50],
161                     'child5': [10, 10, 20, 50],
162                     'child6': [10, 30, 10, 30],
163                     'child7': [10, 30, 0, 30],
164                     'child8': [10, 10, 60, 20],
165                     'child9': [10, 10, 50, 10],
166                     'child10': [10, 10, 40, 0],
167                     'child11': [10, 10, 30, 20],
168                     'child12': [10, 10, 20, 20],
169                     'child13': [10, 30, 10, 0],
170                     'child14': [10, 30, 0, 0],
171                 },
172             },
173         },
174         'column': {
175             'ltr': {
176                 'wrap': {
177                     'flexbox': [600, 70],
178                     'child1': [10, 10, 0, 0],
179                     'child2': [10, 10, 10, 10],
180                     'child3': [10, 10, 20, 20],
181                     'child4': [10, 10, 0, 30],
182                     'child5': [10, 10, 5, 40],
183                     'child6': [30, 10, 0, 50],
184                     'child7': [30, 10, 0, 60],
185                     'child8': [10, 10, 30, 0],
186                     'child9': [10, 10, 40, 10],
187                     'child10': [10, 10, 50, 20],
188                     'child11': [10, 10, 30, 30],
189                     'child12': [10, 10, 35, 40],
190                     'child13': [30, 10, 30, 50],
191                     'child14': [30, 10, 30, 60],
192                 },
193                 'wrap-reverse': {
194                     'flexbox': [600, 70],
195                     'child1': [10, 10, 590, 0],
196                     'child2': [10, 10, 580, 10],
197                     'child3': [10, 10, 570, 20],
198                     'child4': [10, 10, 590, 30],
199                     'child5': [10, 10, 590, 40],
200                     'child6': [30, 10, 570, 50],
201                     'child7': [30, 10, 570, 60],
202                     'child8': [10, 10, 560, 0],
203                     'child9': [10, 10, 550, 10],
204                     'child10': [10, 10, 540, 20],
205                     'child11': [10, 10, 560, 30],
206                     'child12': [10, 10, 560, 40],
207                     'child13': [30, 10, 540, 50],
208                     'child14': [30, 10, 540, 60],
209                 },
210             },
211             'rtl': {
212                 'wrap': {
213                     'flexbox': [600, 70],
214                     'child1': [10, 10, 590, 0],
215                     'child2': [10, 10, 580, 10],
216                     'child3': [10, 10, 570, 20],
217                     'child4': [10, 10, 590, 30],
218                     'child5': [10, 10, 585, 40],
219                     'child6': [30, 10, 570, 50],
220                     'child7': [30, 10, 570, 60],
221                     'child8': [10, 10, 560, 0],
222                     'child9': [10, 10, 550, 10],
223                     'child10': [10, 10, 540, 20],
224                     'child11': [10, 10, 560, 30],
225                     'child12': [10, 10, 555, 40],
226                     'child13': [30, 10, 540, 50],
227                     'child14': [30, 10, 540, 60],
228                 },
229                 'wrap-reverse': {
230                     'flexbox': [600, 70],
231                     'child1': [10, 10, 0, 0],
232                     'child2': [10, 10, 10, 10],
233                     'child3': [10, 10, 20, 20],
234                     'child4': [10, 10, 0, 30],
235                     'child5': [10, 10, 0, 40],
236                     'child6': [30, 10, 0, 50],
237                     'child7': [30, 10, 0, 60],
238                     'child8': [10, 10, 30, 0],
239                     'child9': [10, 10, 40, 10],
240                     'child10': [10, 10, 50, 20],
241                     'child11': [10, 10, 30, 30],
242                     'child12': [10, 10, 30, 40],
243                     'child13': [30, 10, 30, 50],
244                     'child14': [30, 10, 30, 60],
245                 },
246             },
247         },
248         'row-reverse': {
249             'ltr': {
250                 'wrap': {
251                     'flexbox': [70, 60],
252                     'child1': [10, 10, 60, 0],
253                     'child2': [10, 10, 50, 10],
254                     'child3': [10, 10, 40, 20],
255                     'child4': [10, 10, 30, 5],
256                     'child5': [10, 10, 20, 5],
257                     'child6': [10, 30, 10, 0],
258                     'child7': [10, 30, 0, 0],
259                     'child8': [10, 10, 60, 30],
260                     'child9': [10, 10, 50, 40],
261                     'child10': [10, 10, 40, 50],
262                     'child11': [10, 10, 30, 35],
263                     'child12': [10, 10, 20, 35],
264                     'child13': [10, 30, 10, 30],
265                     'child14': [10, 30, 0, 30],
266                 },
267                 'wrap-reverse': {
268                     'flexbox': [70, 60],
269                     'child1': [10, 10, 60, 50],
270                     'child2': [10, 10, 50, 40],
271                     'child3': [10, 10, 40, 30],
272                     'child4': [10, 10, 30, 50],
273                     'child5': [10, 10, 20, 50],
274                     'child6': [10, 30, 10, 30],
275                     'child7': [10, 30, 0, 30],
276                     'child8': [10, 10, 60, 20],
277                     'child9': [10, 10, 50, 10],
278                     'child10': [10, 10, 40, 0],
279                     'child11': [10, 10, 30, 20],
280                     'child12': [10, 10, 20, 20],
281                     'child13': [10, 30, 10, 0],
282                     'child14': [10, 30, 0, 0],
283                 },
284             },
285             'rtl': {
286                 'wrap': {
287                     'flexbox': [70, 60],
288                     'child1': [10, 10, 0, 0],
289                     'child2': [10, 10, 10, 10],
290                     'child3': [10, 10, 20, 20],
291                     'child4': [10, 10, 30, 5],
292                     'child5': [10, 10, 40, 5],
293                     'child6': [10, 30, 50, 0],
294                     'child7': [10, 30, 60, 0],
295                     'child8': [10, 10, 0, 30],
296                     'child9': [10, 10, 10, 40],
297                     'child10': [10, 10, 20, 50],
298                     'child11': [10, 10, 30, 35],
299                     'child12': [10, 10, 40, 35],
300                     'child13': [10, 30, 50, 30],
301                     'child14': [10, 30, 60, 30],
302                 },
303                 'wrap-reverse': {
304                     'flexbox': [70, 60],
305                     'child1': [10, 10, 0, 50],
306                     'child2': [10, 10, 10, 40],
307                     'child3': [10, 10, 20, 30],
308                     'child4': [10, 10, 30, 50],
309                     'child5': [10, 10, 40, 50],
310                     'child6': [10, 30, 50, 30],
311                     'child7': [10, 30, 60, 30],
312                     'child8': [10, 10, 0, 20],
313                     'child9': [10, 10, 10, 10],
314                     'child10': [10, 10, 20, 0],
315                     'child11': [10, 10, 30, 20],
316                     'child12': [10, 10, 40, 20],
317                     'child13': [10, 30, 50, 0],
318                     'child14': [10, 30, 60, 0],
319                 },
320             },
321         },
322         'column-reverse': {
323             'ltr': {
324                 'wrap': {
325                     'flexbox': [600, 70],
326                     'child1': [10, 10, 0, 60],
327                     'child2': [10, 10, 10, 50],
328                     'child3': [10, 10, 20, 40],
329                     'child4': [10, 10, 0, 30],
330                     'child5': [10, 10, 5, 20],
331                     'child6': [30, 10, 0, 10],
332                     'child7': [30, 10, 0, 0],
333                     'child8': [10, 10, 30, 60],
334                     'child9': [10, 10, 40, 50],
335                     'child10': [10, 10, 50, 40],
336                     'child11': [10, 10, 30, 30],
337                     'child12': [10, 10, 35, 20],
338                     'child13': [30, 10, 30, 10],
339                     'child14': [30, 10, 30, 0],
340                 },
341                 'wrap-reverse': {
342                     'flexbox': [600, 70],
343                     'child1': [10, 10, 590, 60],
344                     'child2': [10, 10, 580, 50],
345                     'child3': [10, 10, 570, 40],
346                     'child4': [10, 10, 590, 30],
347                     'child5': [10, 10, 590, 20],
348                     'child6': [30, 10, 570, 10],
349                     'child7': [30, 10, 570, 0],
350                     'child8': [10, 10, 560, 60],
351                     'child9': [10, 10, 550, 50],
352                     'child10': [10, 10, 540, 40],
353                     'child11': [10, 10, 560, 30],
354                     'child12': [10, 10, 560, 20],
355                     'child13': [30, 10, 540, 10],
356                     'child14': [30, 10, 540, 0],
357                 },
358             },
359             'rtl': {
360                 'wrap': {
361                     'flexbox': [600, 70],
362                     'child1': [10, 10, 590, 60],
363                     'child2': [10, 10, 580, 50],
364                     'child3': [10, 10, 570, 40],
365                     'child4': [10, 10, 590, 30],
366                     'child5': [10, 10, 585, 20],
367                     'child6': [30, 10, 570, 10],
368                     'child7': [30, 10, 570, 0],
369                     'child8': [10, 10, 560, 60],
370                     'child9': [10, 10, 550, 50],
371                     'child10': [10, 10, 540, 40],
372                     'child11': [10, 10, 560, 30],
373                     'child12': [10, 10, 555, 20],
374                     'child13': [30, 10, 540, 10],
375                     'child14': [30, 10, 540, 0],
376                 },
377                 'wrap-reverse': {
378                     'flexbox': [600, 70],
379                     'child1': [10, 10, 0, 60],
380                     'child2': [10, 10, 10, 50],
381                     'child3': [10, 10, 20, 40],
382                     'child4': [10, 10, 0, 30],
383                     'child5': [10, 10, 0, 20],
384                     'child6': [30, 10, 0, 10],
385                     'child7': [30, 10, 0, 0],
386                     'child8': [10, 10, 30, 60],
387                     'child9': [10, 10, 40, 50],
388                     'child10': [10, 10, 50, 40],
389                     'child11': [10, 10, 30, 30],
390                     'child12': [10, 10, 30, 20],
391                     'child13': [30, 10, 30, 10],
392                     'child14': [30, 10, 30, 0],
393                 },
394             },
395         },
396     },
397     'vertical-rl': {
398         'row': {
399             'ltr': {
400                 'wrap': {
401                     'flexbox': [60, 70],
402                     'child1': [10, 10, 50, 0],
403                     'child2': [10, 10, 40, 10],
404                     'child3': [10, 10, 30, 20],
405                     'child4': [10, 10, 45, 30],
406                     'child5': [10, 10, 45, 40],
407                     'child6': [30, 10, 30, 50],
408                     'child7': [30, 10, 30, 60],
409                     'child8': [10, 10, 20, 0],
410                     'child9': [10, 10, 10, 10],
411                     'child10': [10, 10, 0, 20],
412                     'child11': [10, 10, 15, 30],
413                     'child12': [10, 10, 15, 40],
414                     'child13': [30, 10, 0, 50],
415                     'child14': [30, 10, 0, 60],
416                 },
417                 'wrap-reverse': {
418                     'flexbox': [60, 70],
419                     'child1': [10, 10, 0, 0],
420                     'child2': [10, 10, 10, 10],
421                     'child3': [10, 10, 20, 20],
422                     'child4': [10, 10, 0, 30],
423                     'child5': [10, 10, 0, 40],
424                     'child6': [30, 10, 0, 50],
425                     'child7': [30, 10, 0, 60],
426                     'child8': [10, 10, 30, 0],
427                     'child9': [10, 10, 40, 10],
428                     'child10': [10, 10, 50, 20],
429                     'child11': [10, 10, 30, 30],
430                     'child12': [10, 10, 30, 40],
431                     'child13': [30, 10, 30, 50],
432                     'child14': [30, 10, 30, 60],
433                 },
434             },
435             'rtl': {
436                 'wrap': {
437                     'flexbox': [60, 70],
438                     'child1': [10, 10, 50, 60],
439                     'child2': [10, 10, 40, 50],
440                     'child3': [10, 10, 30, 40],
441                     'child4': [10, 10, 45, 30],
442                     'child5': [10, 10, 45, 20],
443                     'child6': [30, 10, 30, 10],
444                     'child7': [30, 10, 30, 0],
445                     'child8': [10, 10, 20, 60],
446                     'child9': [10, 10, 10, 50],
447                     'child10': [10, 10, 0, 40],
448                     'child11': [10, 10, 15, 30],
449                     'child12': [10, 10, 15, 20],
450                     'child13': [30, 10, 0, 10],
451                     'child14': [30, 10, 0, 0],
452                 },
453                 'wrap-reverse': {
454                     'flexbox': [60, 70],
455                     'child1': [10, 10, 0, 60],
456                     'child2': [10, 10, 10, 50],
457                     'child3': [10, 10, 20, 40],
458                     'child4': [10, 10, 0, 30],
459                     'child5': [10, 10, 0, 20],
460                     'child6': [30, 10, 0, 10],
461                     'child7': [30, 10, 0, 0],
462                     'child8': [10, 10, 30, 60],
463                     'child9': [10, 10, 40, 50],
464                     'child10': [10, 10, 50, 40],
465                     'child11': [10, 10, 30, 30],
466                     'child12': [10, 10, 30, 20],
467                     'child13': [30, 10, 30, 10],
468                     'child14': [30, 10, 30, 0],
469                 },
470             },
471         },
472         'column': {
473             'ltr': {
474                 'wrap': {
475                     'flexbox': [70, 30],
476                     'child1': [10, 10, 60, 0],
477                     'child2': [10, 10, 50, 10],
478                     'child3': [10, 10, 40, 20],
479                     'child4': [10, 10, 30, 0],
480                     'child5': [10, 10, 20, 5],
481                     'child6': [10, 30, 10, 0],
482                     'child7': [10, 30, 0, 0],
483                     'child8': [10, 10, 60, 30],
484                     'child9': [10, 10, 50, 40],
485                     'child10': [10, 10, 40, 50],
486                     'child11': [10, 10, 30, 30],
487                     'child12': [10, 10, 20, 35],
488                     'child13': [10, 30, 10, 30],
489                     'child14': [10, 30, 0, 30],
490                 },
491                 'wrap-reverse': {
492                     'flexbox': [70, 30],
493                     'child1': [10, 10, 60, 20],
494                     'child2': [10, 10, 50, 10],
495                     'child3': [10, 10, 40, 0],
496                     'child4': [10, 10, 30, 20],
497                     'child5': [10, 10, 20, 20],
498                     'child6': [10, 30, 10, 0],
499                     'child7': [10, 30, 0, 0],
500                     'child8': [10, 10, 60, -10],
501                     'child9': [10, 10, 50, -20],
502                     'child10': [10, 10, 40, -30],
503                     'child11': [10, 10, 30, -10],
504                     'child12': [10, 10, 20, -10],
505                     'child13': [10, 30, 10, -30],
506                     'child14': [10, 30, 0, -30],
507                 },
508             },
509             'rtl': {
510                 'wrap': {
511                     'flexbox': [70, 30],
512                     'child1': [10, 10, 60, 20],
513                     'child2': [10, 10, 50, 10],
514                     'child3': [10, 10, 40, 0],
515                     'child4': [10, 10, 30, 20],
516                     'child5': [10, 10, 20, 15],
517                     'child6': [10, 30, 10, 0],
518                     'child7': [10, 30, 0, 0],
519                     'child8': [10, 10, 60, -10],
520                     'child9': [10, 10, 50, -20],
521                     'child10': [10, 10, 40, -30],
522                     'child11': [10, 10, 30, -10],
523                     'child12': [10, 10, 20, -15],
524                     'child13': [10, 30, 10, -30],
525                     'child14': [10, 30, 0, -30],
526                 },
527                 'wrap-reverse': {
528                     'flexbox': [70, 30],
529                     'child1': [10, 10, 60, 0],
530                     'child2': [10, 10, 50, 10],
531                     'child3': [10, 10, 40, 20],
532                     'child4': [10, 10, 30, 0],
533                     'child5': [10, 10, 20, 0],
534                     'child6': [10, 30, 10, 0],
535                     'child7': [10, 30, 0, 0],
536                     'child8': [10, 10, 60, 30],
537                     'child9': [10, 10, 50, 40],
538                     'child10': [10, 10, 40, 50],
539                     'child11': [10, 10, 30, 30],
540                     'child12': [10, 10, 20, 30],
541                     'child13': [10, 30, 10, 30],
542                     'child14': [10, 30, 0, 30],
543                 },
544             },
545         },
546         'row-reverse': {
547             'ltr': {
548                 'wrap': {
549                     'flexbox': [60, 70],
550                     'child1': [10, 10, 50, 60],
551                     'child2': [10, 10, 40, 50],
552                     'child3': [10, 10, 30, 40],
553                     'child4': [10, 10, 45, 30],
554                     'child5': [10, 10, 45, 20],
555                     'child6': [30, 10, 30, 10],
556                     'child7': [30, 10, 30, 0],
557                     'child8': [10, 10, 20, 60],
558                     'child9': [10, 10, 10, 50],
559                     'child10': [10, 10, 0, 40],
560                     'child11': [10, 10, 15, 30],
561                     'child12': [10, 10, 15, 20],
562                     'child13': [30, 10, 0, 10],
563                     'child14': [30, 10, 0, 0],
564                 },
565                 'wrap-reverse': {
566                     'flexbox': [60, 70],
567                     'child1': [10, 10, 0, 60],
568                     'child2': [10, 10, 10, 50],
569                     'child3': [10, 10, 20, 40],
570                     'child4': [10, 10, 0, 30],
571                     'child5': [10, 10, 0, 20],
572                     'child6': [30, 10, 0, 10],
573                     'child7': [30, 10, 0, 0],
574                     'child8': [10, 10, 30, 60],
575                     'child9': [10, 10, 40, 50],
576                     'child10': [10, 10, 50, 40],
577                     'child11': [10, 10, 30, 30],
578                     'child12': [10, 10, 30, 20],
579                     'child13': [30, 10, 30, 10],
580                     'child14': [30, 10, 30, 0],
581                 },
582             },
583             'rtl': {
584                 'wrap': {
585                     'flexbox': [60, 70],
586                     'child1': [10, 10, 50, 0],
587                     'child2': [10, 10, 40, 10],
588                     'child3': [10, 10, 30, 20],
589                     'child4': [10, 10, 45, 30],
590                     'child5': [10, 10, 45, 40],
591                     'child6': [30, 10, 30, 50],
592                     'child7': [30, 10, 30, 60],
593                     'child8': [10, 10, 20, 0],
594                     'child9': [10, 10, 10, 10],
595                     'child10': [10, 10, 0, 20],
596                     'child11': [10, 10, 15, 30],
597                     'child12': [10, 10, 15, 40],
598                     'child13': [30, 10, 0, 50],
599                     'child14': [30, 10, 0, 60],
600                 },
601                 'wrap-reverse': {
602                     'flexbox': [60, 70],
603                     'child1': [10, 10, 0, 0],
604                     'child2': [10, 10, 10, 10],
605                     'child3': [10, 10, 20, 20],
606                     'child4': [10, 10, 0, 30],
607                     'child5': [10, 10, 0, 40],
608                     'child6': [30, 10, 0, 50],
609                     'child7': [30, 10, 0, 60],
610                     'child8': [10, 10, 30, 0],
611                     'child9': [10, 10, 40, 10],
612                     'child10': [10, 10, 50, 20],
613                     'child11': [10, 10, 30, 30],
614                     'child12': [10, 10, 30, 40],
615                     'child13': [30, 10, 30, 50],
616                     'child14': [30, 10, 30, 60],
617                 },
618             },
619         },
620         'column-reverse': {
621             'ltr': {
622                 'wrap': {
623                     'flexbox': [70, 30],
624                     'child1': [10, 10, 0, 0],
625                     'child2': [10, 10, 10, 10],
626                     'child3': [10, 10, 20, 20],
627                     'child4': [10, 10, 30, 0],
628                     'child5': [10, 10, 40, 5],
629                     'child6': [10, 30, 50, 0],
630                     'child7': [10, 30, 60, 0],
631                     'child8': [10, 10, 0, 30],
632                     'child9': [10, 10, 10, 40],
633                     'child10': [10, 10, 20, 50],
634                     'child11': [10, 10, 30, 30],
635                     'child12': [10, 10, 40, 35],
636                     'child13': [10, 30, 50, 30],
637                     'child14': [10, 30, 60, 30],
638                 },
639                 'wrap-reverse': {
640                     'flexbox': [70, 30],
641                     'child1': [10, 10, 0, 20],
642                     'child2': [10, 10, 10, 10],
643                     'child3': [10, 10, 20, 0],
644                     'child4': [10, 10, 30, 20],
645                     'child5': [10, 10, 40, 20],
646                     'child6': [10, 30, 50, 0],
647                     'child7': [10, 30, 60, 0],
648                     'child8': [10, 10, 0, -10],
649                     'child9': [10, 10, 10, -20],
650                     'child10': [10, 10, 20, -30],
651                     'child11': [10, 10, 30, -10],
652                     'child12': [10, 10, 40, -10],
653                     'child13': [10, 30, 50, -30],
654                     'child14': [10, 30, 60, -30],
655                 },
656             },
657             'rtl': {
658                 'wrap': {
659                     'flexbox': [70, 30],
660                     'child1': [10, 10, 0, 20],
661                     'child2': [10, 10, 10, 10],
662                     'child3': [10, 10, 20, 0],
663                     'child4': [10, 10, 30, 20],
664                     'child5': [10, 10, 40, 15],
665                     'child6': [10, 30, 50, 0],
666                     'child7': [10, 30, 60, 0],
667                     'child8': [10, 10, 0, -10],
668                     'child9': [10, 10, 10, -20],
669                     'child10': [10, 10, 20, -30],
670                     'child11': [10, 10, 30, -10],
671                     'child12': [10, 10, 40, -15],
672                     'child13': [10, 30, 50, -30],
673                     'child14': [10, 30, 60, -30],
674                 },
675                 'wrap-reverse': {
676                     'flexbox': [70, 30],
677                     'child1': [10, 10, 0, 0],
678                     'child2': [10, 10, 10, 10],
679                     'child3': [10, 10, 20, 20],
680                     'child4': [10, 10, 30, 0],
681                     'child5': [10, 10, 40, 0],
682                     'child6': [10, 30, 50, 0],
683                     'child7': [10, 30, 60, 0],
684                     'child8': [10, 10, 0, 30],
685                     'child9': [10, 10, 10, 40],
686                     'child10': [10, 10, 20, 50],
687                     'child11': [10, 10, 30, 30],
688                     'child12': [10, 10, 40, 30],
689                     'child13': [10, 30, 50, 30],
690                     'child14': [10, 30, 60, 30],
691                 },
692             },
693         },
694     },
695     'vertical-lr': {
696         'row': {
697             'ltr': {
698                 'wrap': {
699                     'flexbox': [60, 70],
700                     'child1': [10, 10, 0, 0],
701                     'child2': [10, 10, 10, 10],
702                     'child3': [10, 10, 20, 20],
703                     'child4': [10, 10, 5, 30],
704                     'child5': [10, 10, 5, 40],
705                     'child6': [30, 10, 0, 50],
706                     'child7': [30, 10, 0, 60],
707                     'child8': [10, 10, 30, 0],
708                     'child9': [10, 10, 40, 10],
709                     'child10': [10, 10, 50, 20],
710                     'child11': [10, 10, 35, 30],
711                     'child12': [10, 10, 35, 40],
712                     'child13': [30, 10, 30, 50],
713                     'child14': [30, 10, 30, 60],
714                 },
715                 'wrap-reverse': {
716                     'flexbox': [60, 70],
717                     'child1': [10, 10, 50, 0],
718                     'child2': [10, 10, 40, 10],
719                     'child3': [10, 10, 30, 20],
720                     'child4': [10, 10, 50, 30],
721                     'child5': [10, 10, 50, 40],
722                     'child6': [30, 10, 30, 50],
723                     'child7': [30, 10, 30, 60],
724                     'child8': [10, 10, 20, 0],
725                     'child9': [10, 10, 10, 10],
726                     'child10': [10, 10, 0, 20],
727                     'child11': [10, 10, 20, 30],
728                     'child12': [10, 10, 20, 40],
729                     'child13': [30, 10, 0, 50],
730                     'child14': [30, 10, 0, 60],
731                 },
732             },
733             'rtl': {
734                 'wrap': {
735                     'flexbox': [60, 70],
736                     'child1': [10, 10, 0, 60],
737                     'child2': [10, 10, 10, 50],
738                     'child3': [10, 10, 20, 40],
739                     'child4': [10, 10, 5, 30],
740                     'child5': [10, 10, 5, 20],
741                     'child6': [30, 10, 0, 10],
742                     'child7': [30, 10, 0, 0],
743                     'child8': [10, 10, 30, 60],
744                     'child9': [10, 10, 40, 50],
745                     'child10': [10, 10, 50, 40],
746                     'child11': [10, 10, 35, 30],
747                     'child12': [10, 10, 35, 20],
748                     'child13': [30, 10, 30, 10],
749                     'child14': [30, 10, 30, 0],
750                 },
751                 'wrap-reverse': {
752                     'flexbox': [60, 70],
753                     'child1': [10, 10, 50, 60],
754                     'child2': [10, 10, 40, 50],
755                     'child3': [10, 10, 30, 40],
756                     'child4': [10, 10, 50, 30],
757                     'child5': [10, 10, 50, 20],
758                     'child6': [30, 10, 30, 10],
759                     'child7': [30, 10, 30, 0],
760                     'child8': [10, 10, 20, 60],
761                     'child9': [10, 10, 10, 50],
762                     'child10': [10, 10, 0, 40],
763                     'child11': [10, 10, 20, 30],
764                     'child12': [10, 10, 20, 20],
765                     'child13': [30, 10, 0, 10],
766                     'child14': [30, 10, 0, 0],
767                 },
768             },
769         },
770         'column': {
771             'ltr': {
772                 'wrap': {
773                     'flexbox': [70, 30],
774                     'child1': [10, 10, 0, 0],
775                     'child2': [10, 10, 10, 10],
776                     'child3': [10, 10, 20, 20],
777                     'child4': [10, 10, 30, 0],
778                     'child5': [10, 10, 40, 5],
779                     'child6': [10, 30, 50, 0],
780                     'child7': [10, 30, 60, 0],
781                     'child8': [10, 10, 0, 30],
782                     'child9': [10, 10, 10, 40],
783                     'child10': [10, 10, 20, 50],
784                     'child11': [10, 10, 30, 30],
785                     'child12': [10, 10, 40, 35],
786                     'child13': [10, 30, 50, 30],
787                     'child14': [10, 30, 60, 30],
788                 },
789                 'wrap-reverse': {
790                     'flexbox': [70, 30],
791                     'child1': [10, 10, 0, 20],
792                     'child2': [10, 10, 10, 10],
793                     'child3': [10, 10, 20, 0],
794                     'child4': [10, 10, 30, 20],
795                     'child5': [10, 10, 40, 20],
796                     'child6': [10, 30, 50, 0],
797                     'child7': [10, 30, 60, 0],
798                     'child8': [10, 10, 0, -10],
799                     'child9': [10, 10, 10, -20],
800                     'child10': [10, 10, 20, -30],
801                     'child11': [10, 10, 30, -10],
802                     'child12': [10, 10, 40, -10],
803                     'child13': [10, 30, 50, -30],
804                     'child14': [10, 30, 60, -30],
805                 },
806             },
807             'rtl': {
808                 'wrap': {
809                     'flexbox': [70, 30],
810                     'child1': [10, 10, 0, 20],
811                     'child2': [10, 10, 10, 10],
812                     'child3': [10, 10, 20, 0],
813                     'child4': [10, 10, 30, 20],
814                     'child5': [10, 10, 40, 15],
815                     'child6': [10, 30, 50, 0],
816                     'child7': [10, 30, 60, 0],
817                     'child8': [10, 10, 0, -10],
818                     'child9': [10, 10, 10, -20],
819                     'child10': [10, 10, 20, -30],
820                     'child11': [10, 10, 30, -10],
821                     'child12': [10, 10, 40, -15],
822                     'child13': [10, 30, 50, -30],
823                     'child14': [10, 30, 60, -30],
824                 },
825                 'wrap-reverse': {
826                     'flexbox': [70, 30],
827                     'child1': [10, 10, 0, 0],
828                     'child2': [10, 10, 10, 10],
829                     'child3': [10, 10, 20, 20],
830                     'child4': [10, 10, 30, 0],
831                     'child5': [10, 10, 40, 0],
832                     'child6': [10, 30, 50, 0],
833                     'child7': [10, 30, 60, 0],
834                     'child8': [10, 10, 0, 30],
835                     'child9': [10, 10, 10, 40],
836                     'child10': [10, 10, 20, 50],
837                     'child11': [10, 10, 30, 30],
838                     'child12': [10, 10, 40, 30],
839                     'child13': [10, 30, 50, 30],
840                     'child14': [10, 30, 60, 30],
841                 },
842             },
843         },
844         'row-reverse': {
845             'ltr': {
846                 'wrap': {
847                     'flexbox': [60, 70],
848                     'child1': [10, 10, 0, 60],
849                     'child2': [10, 10, 10, 50],
850                     'child3': [10, 10, 20, 40],
851                     'child4': [10, 10, 5, 30],
852                     'child5': [10, 10, 5, 20],
853                     'child6': [30, 10, 0, 10],
854                     'child7': [30, 10, 0, 0],
855                     'child8': [10, 10, 30, 60],
856                     'child9': [10, 10, 40, 50],
857                     'child10': [10, 10, 50, 40],
858                     'child11': [10, 10, 35, 30],
859                     'child12': [10, 10, 35, 20],
860                     'child13': [30, 10, 30, 10],
861                     'child14': [30, 10, 30, 0],
862                 },
863                 'wrap-reverse': {
864                     'flexbox': [60, 70],
865                     'child1': [10, 10, 50, 60],
866                     'child2': [10, 10, 40, 50],
867                     'child3': [10, 10, 30, 40],
868                     'child4': [10, 10, 50, 30],
869                     'child5': [10, 10, 50, 20],
870                     'child6': [30, 10, 30, 10],
871                     'child7': [30, 10, 30, 0],
872                     'child8': [10, 10, 20, 60],
873                     'child9': [10, 10, 10, 50],
874                     'child10': [10, 10, 0, 40],
875                     'child11': [10, 10, 20, 30],
876                     'child12': [10, 10, 20, 20],
877                     'child13': [30, 10, 0, 10],
878                     'child14': [30, 10, 0, 0],
879                 },
880             },
881             'rtl': {
882                 'wrap': {
883                     'flexbox': [60, 70],
884                     'child1': [10, 10, 0, 0],
885                     'child2': [10, 10, 10, 10],
886                     'child3': [10, 10, 20, 20],
887                     'child4': [10, 10, 5, 30],
888                     'child5': [10, 10, 5, 40],
889                     'child6': [30, 10, 0, 50],
890                     'child7': [30, 10, 0, 60],
891                     'child8': [10, 10, 30, 0],
892                     'child9': [10, 10, 40, 10],
893                     'child10': [10, 10, 50, 20],
894                     'child11': [10, 10, 35, 30],
895                     'child12': [10, 10, 35, 40],
896                     'child13': [30, 10, 30, 50],
897                     'child14': [30, 10, 30, 60],
898                 },
899                 'wrap-reverse': {
900                     'flexbox': [60, 70],
901                     'child1': [10, 10, 50, 0],
902                     'child2': [10, 10, 40, 10],
903                     'child3': [10, 10, 30, 20],
904                     'child4': [10, 10, 50, 30],
905                     'child5': [10, 10, 50, 40],
906                     'child6': [30, 10, 30, 50],
907                     'child7': [30, 10, 30, 60],
908                     'child8': [10, 10, 20, 0],
909                     'child9': [10, 10, 10, 10],
910                     'child10': [10, 10, 0, 20],
911                     'child11': [10, 10, 20, 30],
912                     'child12': [10, 10, 20, 40],
913                     'child13': [30, 10, 0, 50],
914                     'child14': [30, 10, 0, 60],
915                 },
916             },
917         },
918         'column-reverse': {
919             'ltr': {
920                 'wrap': {
921                     'flexbox': [70, 30],
922                     'child1': [10, 10, 60, 0],
923                     'child2': [10, 10, 50, 10],
924                     'child3': [10, 10, 40, 20],
925                     'child4': [10, 10, 30, 0],
926                     'child5': [10, 10, 20, 5],
927                     'child6': [10, 30, 10, 0],
928                     'child7': [10, 30, 0, 0],
929                     'child8': [10, 10, 60, 30],
930                     'child9': [10, 10, 50, 40],
931                     'child10': [10, 10, 40, 50],
932                     'child11': [10, 10, 30, 30],
933                     'child12': [10, 10, 20, 35],
934                     'child13': [10, 30, 10, 30],
935                     'child14': [10, 30, 0, 30],
936                 },
937                 'wrap-reverse': {
938                     'flexbox': [70, 30],
939                     'child1': [10, 10, 60, 20],
940                     'child2': [10, 10, 50, 10],
941                     'child3': [10, 10, 40, 0],
942                     'child4': [10, 10, 30, 20],
943                     'child5': [10, 10, 20, 20],
944                     'child6': [10, 30, 10, 0],
945                     'child7': [10, 30, 0, 0],
946                     'child8': [10, 10, 60, -10],
947                     'child9': [10, 10, 50, -20],
948                     'child10': [10, 10, 40, -30],
949                     'child11': [10, 10, 30, -10],
950                     'child12': [10, 10, 20, -10],
951                     'child13': [10, 30, 10, -30],
952                     'child14': [10, 30, 0, -30],
953                 },
954             },
955             'rtl': {
956                 'wrap': {
957                     'flexbox': [70, 30],
958                     'child1': [10, 10, 60, 20],
959                     'child2': [10, 10, 50, 10],
960                     'child3': [10, 10, 40, 0],
961                     'child4': [10, 10, 30, 20],
962                     'child5': [10, 10, 20, 15],
963                     'child6': [10, 30, 10, 0],
964                     'child7': [10, 30, 0, 0],
965                     'child8': [10, 10, 60, -10],
966                     'child9': [10, 10, 50, -20],
967                     'child10': [10, 10, 40, -30],
968                     'child11': [10, 10, 30, -10],
969                     'child12': [10, 10, 20, -15],
970                     'child13': [10, 30, 10, -30],
971                     'child14': [10, 30, 0, -30],
972                 },
973                 'wrap-reverse': {
974                     'flexbox': [70, 30],
975                     'child1': [10, 10, 60, 0],
976                     'child2': [10, 10, 50, 10],
977                     'child3': [10, 10, 40, 20],
978                     'child4': [10, 10, 30, 0],
979                     'child5': [10, 10, 20, 0],
980                     'child6': [10, 30, 10, 0],
981                     'child7': [10, 30, 0, 0],
982                     'child8': [10, 10, 60, 30],
983                     'child9': [10, 10, 50, 40],
984                     'child10': [10, 10, 40, 50],
985                     'child11': [10, 10, 30, 30],
986                     'child12': [10, 10, 20, 30],
987                     'child13': [10, 30, 10, 30],
988                     'child14': [10, 30, 0, 30],
989                 },
990             },
991         },
992     },
993 };
994
995 function mainAxisDirection(writingMode, flexDirection)
996 {
997     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
998         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
999         return 'width';
1000     return 'height';
1001 }
1002
1003 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)
1004 {
1005     var child = document.createElement('div');
1006     child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;'
1007         + crossAxis + ': ' + crossAxisLength + ';'
1008         + 'align-self: ' + alignment);
1009
1010     child.setAttribute("data-expected-width", expectations[0]);
1011     child.setAttribute("data-expected-height", expectations[1]);
1012     child.setAttribute("data-offset-x", expectations[2]);
1013     child.setAttribute("data-offset-y", expectations[3]);
1014
1015     flexbox.appendChild(child);
1016 }
1017
1018 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
1019 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
1020 var directions = ['ltr', 'rtl'];
1021 var wraps = ['wrap', 'wrap-reverse'];
1022
1023 writingModes.forEach(function(writingMode) {
1024     flexDirections.forEach(function(flexDirection) {
1025         directions.forEach(function(direction) {
1026             wraps.forEach(function(wrap) {
1027                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
1028                 var title = document.createElement('div');
1029                 title.className = 'title';
1030                 title.innerHTML = flexboxClassName;
1031                 document.body.appendChild(title);
1032
1033                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
1034                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
1035
1036                 var flexbox = document.createElement('div');
1037                 flexbox.className = 'flexbox ' + flexboxClassName;
1038                 flexbox.setAttribute('style', mainAxis + ': 70px');
1039
1040                 var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px;' : '-webkit-margin-start: 5px;';
1041
1042                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
1043                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child1']);
1044                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']);
1045                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child3']);
1046                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child4']);
1047                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child5']);
1048                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child6']);
1049                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child7']);
1050
1051                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child8']);
1052                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child9']);
1053                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child10']);
1054                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child11']);
1055                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child12']);
1056                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child13']);
1057                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child14']);
1058
1059                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
1060                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
1061
1062                 document.body.appendChild(flexbox);
1063             })
1064         })
1065     })
1066 })
1067 </script>
1068 </body>
1069 </html>