e0b6a6c8432ccc5006559bf22be714d47edae788
[WebKit-https.git] / LayoutTests / css3 / flexbox / multiline.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     position: relative;
6     display: -webkit-flexbox;
7     background-color: grey;
8     max-width: 600px;
9 }
10 .title {
11     margin-top: 1em;
12 }
13 .ltr {
14     direction: ltr;
15 }
16 .rtl {
17     direction: rtl;
18 }
19 .horizontal-tb {
20     -webkit-writing-mode: horizontal-tb;
21 }
22 .horizontal-bt {
23     -webkit-writing-mode: horizontal-bt;
24 }
25 .vertical-rl {
26     -webkit-writing-mode: vertical-rl;
27 }
28 .vertical-lr {
29     -webkit-writing-mode: vertical-lr;
30 }
31 .row {
32     -webkit-flex-flow: row;
33 }
34 .row-reverse {
35     -webkit-flex-flow: row-reverse;
36 }
37 .column {
38     -webkit-flex-flow: column;
39 }
40 .column-reverse {
41     -webkit-flex-flow: column-reverse;
42 }
43 .wrap {
44   -webkit-flex-wrap: wrap;
45 }
46 .wrap-reverse {
47   -webkit-flex-wrap: wrap-reverse;
48 }
49 .flexbox > :nth-child(1) {
50     background-color: #0f0;
51 }
52 .flexbox > :nth-child(2) {
53     background-color: #0d0;
54 }
55 .flexbox > :nth-child(3) {
56     background-color: #090;
57 }
58 .flexbox > :nth-child(4) {
59     background-color: #060;
60 }
61 .flexbox > :nth-child(5) {
62     background-color: #030;
63 }
64 </style>
65 <script>
66 if (window.layoutTestController)
67     layoutTestController.dumpAsText();
68 </script>
69 <script src="resources/flexbox.js"></script>
70 <body onload="checkFlexBoxen()">
71
72 <script>
73 var expectations = {
74     'horizontal-tb': {
75         'row': {
76             'ltr': {
77                 'wrap': {
78                     'flexbox': [60, 45],
79                     'child1': [30, 5, 0, 0],
80                     'child2': [30, 10, 30, 0],
81                     'child3': [60, 5, 0, 10],
82                     'child4': [70, 20, 0, 15],
83                     'child5': [60, 10, 0, 35],
84                 },
85             },
86             'rtl': {
87                 'wrap': {
88                     'flexbox': [60, 45],
89                     'child1': [30, 5, 30, 0],
90                     'child2': [30, 10, 0, 0],
91                     'child3': [60, 5, 0, 10],
92                     'child4': [70, 20, -10, 15],
93                     'child5': [60, 10, 0, 35],
94                 },
95             },
96         },
97         'column': {
98             'ltr': {
99                 'wrap': {
100                     'flexbox': [600, 60],
101                     'child1': [5, 30, 0, 0],
102                     'child2': [10, 30, 0, 30],
103                     'child3': [5, 60, 10, 0],
104                     'child4': [20, 70, 15, 0],
105                     'child5': [10, 60, 35, 0],
106                 },
107             },
108             'rtl': {
109                 'wrap': {
110                     'flexbox': [600, 60],
111                     'child1': [5, 30, 595, 0],
112                     'child2': [10, 30, 590, 30],
113                     'child3': [5, 60, 585, 0],
114                     'child4': [20, 70, 565, 0],
115                     'child5': [10, 60, 555, 0],
116                 },
117             },
118         },
119         'row-reverse': {
120             'ltr': {
121                 'wrap': {
122                     'flexbox': [60, 45],
123                     'child1': [30, 5, 30, 0],
124                     'child2': [30, 10, 0, 0],
125                     'child3': [60, 5, 0, 10],
126                     'child4': [70, 20, -10, 15],
127                     'child5': [60, 10, 0, 35],
128                 },
129             },
130             'rtl': {
131                 'wrap': {
132                     'flexbox': [60, 45],
133                     'child1': [30, 5, 0, 0],
134                     'child2': [30, 10, 30, 0],
135                     'child3': [60, 5, 0, 10],
136                     'child4': [70, 20, 0, 15],
137                     'child5': [60, 10, 0, 35],
138                 },
139             },
140         },
141         'column-reverse': {
142             'ltr': {
143                 'wrap': {
144                     'flexbox': [600, 60],
145                     'child1': [5, 30, 0, 30],
146                     'child2': [10, 30, 0, 0],
147                     'child3': [5, 60, 10, 0],
148                     'child4': [20, 70, 15, -10],
149                     'child5': [10, 60, 35, 0],
150                 },
151             },
152             'rtl': {
153                 'wrap': {
154                     'flexbox': [600, 60],
155                     'child1': [5, 30, 595, 30],
156                     'child2': [10, 30, 590, 0],
157                     'child3': [5, 60, 585, 0],
158                     'child4': [20, 70, 565, -10],
159                     'child5': [10, 60, 555, 0],
160                 },
161             },
162         },
163     },
164     'horizontal-bt': {
165         'row': {
166             'ltr': {
167                 'wrap': {
168                     'flexbox': [60, 45],
169                     'child1': [30, 5, 0, 40],
170                     'child2': [30, 10, 30, 35],
171                     'child3': [60, 5, 0, 30],
172                     'child4': [70, 20, 0, 10],
173                     'child5': [60, 10, 0, 0],
174                 },
175             },
176             'rtl': {
177                 'wrap': {
178                     'flexbox': [60, 45],
179                     'child1': [30, 5, 30, 40],
180                     'child2': [30, 10, 0, 35],
181                     'child3': [60, 5, 0, 30],
182                     'child4': [70, 20, -10, 10],
183                     'child5': [60, 10, 0, 0],
184                 },
185             },
186         },
187         'column': {
188             'ltr': {
189                 'wrap': {
190                     'flexbox': [600, 60],
191                     'child1': [5, 30, 0, 30],
192                     'child2': [10, 30, 0, 0],
193                     'child3': [5, 60, 10, 0],
194                     'child4': [20, 70, 15, -10],
195                     'child5': [10, 60, 35, 0],
196                 },
197             },
198             'rtl': {
199                 'wrap': {
200                     'flexbox': [600, 60],
201                     'child1': [5, 30, 595, 30],
202                     'child2': [10, 30, 590, 0],
203                     'child3': [5, 60, 585, 0],
204                     'child4': [20, 70, 565, -10],
205                     'child5': [10, 60, 555, 0],
206                 },
207             },
208         },
209         'row-reverse': {
210             'ltr': {
211                 'wrap': {
212                     'flexbox': [60, 45],
213                     'child1': [30, 5, 30, 40],
214                     'child2': [30, 10, 0, 35],
215                     'child3': [60, 5, 0, 30],
216                     'child4': [70, 20, -10, 10],
217                     'child5': [60, 10, 0, 0],
218                 },
219             },
220             'rtl': {
221                 'wrap': {
222                     'flexbox': [60, 45],
223                     'child1': [30, 5, 0, 40],
224                     'child2': [30, 10, 30, 35],
225                     'child3': [60, 5, 0, 30],
226                     'child4': [70, 20, 0, 10],
227                     'child5': [60, 10, 0, 0],
228                 },
229             },
230         },
231         'column-reverse': {
232             'ltr': {
233                 'wrap': {
234                     'flexbox': [600, 60],
235                     'child1': [5, 30, 0, 0],
236                     'child2': [10, 30, 0, 30],
237                     'child3': [5, 60, 10, 0],
238                     'child4': [20, 70, 15, 0],
239                     'child5': [10, 60, 35, 0],
240                 },
241             },
242             'rtl': {
243                 'wrap': {
244                     'flexbox': [600, 60],
245                     'child1': [5, 30, 595, 0],
246                     'child2': [10, 30, 590, 30],
247                     'child3': [5, 60, 585, 0],
248                     'child4': [20, 70, 565, 0],
249                     'child5': [10, 60, 555, 0],
250                 },
251             },
252         },
253     },
254     'vertical-rl': {
255         'row': {
256             'ltr': {
257                 'wrap': {
258                     'flexbox': [45, 60],
259                     'child1': [5, 30, 40, 0],
260                     'child2': [10, 30, 35, 30],
261                     'child3': [5, 60, 30, 0],
262                     'child4': [20, 70, 10, 0],
263                     'child5': [10, 60, 0, 0],
264                 },
265             },
266             'rtl': {
267                 'wrap': {
268                     'flexbox': [45, 60],
269                     'child1': [5, 30, 40, 30],
270                     'child2': [10, 30, 35, 0],
271                     'child3': [5, 60, 30, 0],
272                     'child4': [20, 70, 10, -10],
273                     'child5': [10, 60, 0, 0],
274                 },
275             },
276         },
277         'column': {
278             'ltr': {
279                 'wrap': {
280                     'flexbox': [60, 45],
281                     'child1': [30, 5, 30, 0],
282                     'child2': [30, 10, 0, 0],
283                     'child3': [60, 5, 0, 10],
284                     'child4': [70, 20, -10, 15],
285                     'child5': [60, 10, 0, 35],
286                 },
287             },
288             'rtl': {
289                 'wrap': {
290                     'flexbox': [60, 45],
291                     'child1': [30, 5, 30, 40],
292                     'child2': [30, 10, 0, 35],
293                     'child3': [60, 5, 0, 30],
294                     'child4': [70, 20, -10, 10],
295                     'child5': [60, 10, 0, 0],
296                 },
297             },
298         },
299         'row-reverse': {
300             'ltr': {
301                 'wrap': {
302                     'flexbox': [45, 60],
303                     'child1': [5, 30, 40, 30],
304                     'child2': [10, 30, 35, 0],
305                     'child3': [5, 60, 30, 0],
306                     'child4': [20, 70, 10, -10],
307                     'child5': [10, 60, 0, 0],
308                 },
309             },
310             'rtl': {
311                 'wrap': {
312                     'flexbox': [45, 60],
313                     'child1': [5, 30, 40, 0],
314                     'child2': [10, 30, 35, 30],
315                     'child3': [5, 60, 30, 0],
316                     'child4': [20, 70, 10, 0],
317                     'child5': [10, 60, 0, 0],
318                 },
319             },
320         },
321         'column-reverse': {
322             'ltr': {
323                 'wrap': {
324                     'flexbox': [60, 45],
325                     'child1': [30, 5, 0, 0],
326                     'child2': [30, 10, 30, 0],
327                     'child3': [60, 5, 0, 10],
328                     'child4': [70, 20, 0, 15],
329                     'child5': [60, 10, 0, 35],
330                 },
331             },
332             'rtl': {
333                 'wrap': {
334                     'flexbox': [60, 45],
335                     'child1': [30, 5, 0, 40],
336                     'child2': [30, 10, 30, 35],
337                     'child3': [60, 5, 0, 30],
338                     'child4': [70, 20, 0, 10],
339                     'child5': [60, 10, 0, 0],
340                 },
341             },
342         },
343     },
344     'vertical-lr': {
345         'row': {
346             'ltr': {
347                 'wrap': {
348                     'flexbox': [45, 60],
349                     'child1': [5, 30, 0, 0],
350                     'child2': [10, 30, 0, 30],
351                     'child3': [5, 60, 10, 0],
352                     'child4': [20, 70, 15, 0],
353                     'child5': [10, 60, 35, 0],
354                 },
355             },
356             'rtl': {
357                 'wrap': {
358                     'flexbox': [45, 60],
359                     'child1': [5, 30, 0, 30],
360                     'child2': [10, 30, 0, 0],
361                     'child3': [5, 60, 10, 0],
362                     'child4': [20, 70, 15, -10],
363                     'child5': [10, 60, 35, 0],
364                 },
365             },
366         },
367         'column': {
368             'ltr': {
369                 'wrap': {
370                     'flexbox': [60, 45],
371                     'child1': [30, 5, 0, 0],
372                     'child2': [30, 10, 30, 0],
373                     'child3': [60, 5, 0, 10],
374                     'child4': [70, 20, 0, 15],
375                     'child5': [60, 10, 0, 35],
376                 },
377             },
378             'rtl': {
379                 'wrap': {
380                     'flexbox': [60, 45],
381                     'child1': [30, 5, 0, 40],
382                     'child2': [30, 10, 30, 35],
383                     'child3': [60, 5, 0, 30],
384                     'child4': [70, 20, 0, 10],
385                     'child5': [60, 10, 0, 0],
386                 },
387             },
388         },
389         'row-reverse': {
390             'ltr': {
391                 'wrap': {
392                     'flexbox': [45, 60],
393                     'child1': [5, 30, 0, 30],
394                     'child2': [10, 30, 0, 0],
395                     'child3': [5, 60, 10, 0],
396                     'child4': [20, 70, 15, -10],
397                     'child5': [10, 60, 35, 0],
398                 },
399             },
400             'rtl': {
401                 'wrap': {
402                     'flexbox': [45, 60],
403                     'child1': [5, 30, 0, 0],
404                     'child2': [10, 30, 0, 30],
405                     'child3': [5, 60, 10, 0],
406                     'child4': [20, 70, 15, 0],
407                     'child5': [10, 60, 35, 0],
408                 },
409             },
410         },
411         'column-reverse': {
412             'ltr': {
413                 'wrap': {
414                     'flexbox': [60, 45],
415                     'child1': [30, 5, 30, 0],
416                     'child2': [30, 10, 0, 0],
417                     'child3': [60, 5, 0, 10],
418                     'child4': [70, 20, -10, 15],
419                     'child5': [60, 10, 0, 35],
420                 },
421             },
422             'rtl': {
423                 'wrap': {
424                     'flexbox': [60, 45],
425                     'child1': [30, 5, 30, 40],
426                     'child2': [30, 10, 0, 35],
427                     'child3': [60, 5, 0, 30],
428                     'child4': [70, 20, -10, 10],
429                     'child5': [60, 10, 0, 0],
430                 },
431             },
432         },
433     },
434 };
435
436 function mainAxisDirection(writingMode, flexDirection)
437 {
438     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
439         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
440         return 'width';
441     return 'height';
442 }
443
444 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
445 {
446     var child = document.createElement('div');
447     child.setAttribute('style', mainAxis + ': -webkit-flex(1 ' + preferredSize + 'px);'
448         + crossAxis + ': ' + crossAxisLength + 'px;');
449
450     child.setAttribute("data-expected-width", expectations[0]);
451     child.setAttribute("data-expected-height", expectations[1]);
452     child.setAttribute("data-offset-x", expectations[2]);
453     child.setAttribute("data-offset-y", expectations[3]);
454
455     flexbox.appendChild(child);
456 }
457
458 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
459 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
460 var directions = ['ltr', 'rtl'];
461 // FIXME: Implement and test wrap-reverse.
462 var wraps = ['wrap'];
463
464 writingModes.forEach(function(writingMode) {
465     flexDirections.forEach(function(flexDirection) {
466         directions.forEach(function(direction) {
467             wraps.forEach(function(wrap) {
468                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
469                 var title = document.createElement('div');
470                 title.className = 'title';
471                 title.innerHTML = flexboxClassName;
472                 document.body.appendChild(title);
473
474                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
475                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
476
477                 var flexbox = document.createElement('div');
478                 flexbox.className = 'flexbox ' + flexboxClassName;
479                 flexbox.setAttribute('style', mainAxis + ': 60px');
480
481                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
482                 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child1']);
483                 addChild(flexbox, mainAxis, crossAxis, 25, 10, testExpectations['child2']);
484                 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child3']);
485                 addChild(flexbox, mainAxis, crossAxis, 70, 20, testExpectations['child4']);
486                 addChild(flexbox, mainAxis, crossAxis, 5, 10, testExpectations['child5']);
487
488                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
489                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
490
491                 document.body.appendChild(flexbox);
492             })
493         })
494     })
495 })
496 </script>
497 </body>
498 </html>