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