Need to implement flex-flow: row-reverse
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-flow-orientations.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .container {
5     position: relative;
6     background-color: pink;
7     outline: 1px solid black;
8     display: inline-block;
9 }
10 .flexbox {
11     display: -webkit-flexbox;
12     background-color: grey;
13     width: 100px;
14     height: 100px;
15 }
16 .title {
17     margin-top: 1em;
18 }
19 .ltr {
20     direction: ltr;
21 }
22 .rtl {
23     direction: rtl;
24 }
25 .horizontal-tb {
26     -webkit-writing-mode: horizontal-tb;
27 }
28 .horizontal-bt {
29     -webkit-writing-mode: horizontal-bt;
30 }
31 .vertical-rl {
32     -webkit-writing-mode: vertical-rl;
33 }
34 .vertical-lr {
35     -webkit-writing-mode: vertical-lr;
36 }
37 .row {
38     -webkit-flex-flow: row;    
39 }
40 .row-reverse {
41     -webkit-flex-flow: row-reverse;
42 }
43 .column {
44     -webkit-flex-flow: column;
45 }
46 .column-reverse {
47     -webkit-flex-flow: column-reverse;
48 }
49 .flexbox > :nth-child(1) {
50     background-color: blue;
51 }
52 .flexbox > :nth-child(2) {
53     background-color: green;
54 }
55 .flexbox > :nth-child(3) {
56     background-color: red;
57 }
58 </style>
59 <script>
60 if (window.layoutTestController)
61     layoutTestController.dumpAsText();
62 </script>
63 <script src="resources/flexbox.js"></script>
64 <body onload="checkFlexBoxen()">
65
66 <script>
67 function asString(position)
68 {
69     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
70 }
71
72 var expectations = {
73     'horizontal-tb': {
74         column: {
75             rtl: [[80, 0], [80, 20]],
76             ltr: [[0, 0], [0, 20]]
77         },
78         row: {
79             rtl: [[80, 0], [60, 0]],
80             ltr: [[0, 0], [20, 0]]
81         },
82         'row-reverse': {
83             rtl: [[0, 0], [20, 0]],
84             ltr: [[80, 0], [60, 0]]
85         }
86     },
87     'horizontal-bt': {
88         column: {
89             rtl: [[80, 80], [80, 60]],
90             ltr: [[0, 80], [0, 60]]
91         },
92         row: {
93             rtl: [[80, 80], [60, 80]],
94             ltr: [[0, 80], [20, 80]]
95         },
96         'row-reverse': {
97             rtl: [[0, 80], [20, 80]],
98             ltr: [[80, 80], [60, 80]]
99         }
100     },
101     'vertical-lr': {
102         column: {
103             rtl: [[0, 80], [20, 80]],
104             ltr: [[0, 0], [20, 0]]
105         },
106         row: {
107             rtl: [[0, 80], [0, 60]],
108             ltr: [[0, 0], [0, 20]]
109         },
110         'row-reverse': {
111             rtl: [[0, 0], [0, 20]],
112             ltr: [[0, 80], [0, 60]]
113         }
114     },
115     'vertical-rl': {
116         column: {
117             rtl: [[80, 80], [60, 80]],
118             ltr: [[80, 0], [60, 0]]
119         },
120         row: {
121             rtl: [[80, 80], [80, 60]],
122             ltr: [[80, 0], [80, 20]]
123         },
124         'row-reverse': {
125             rtl: [[80, 0], [80, 20]],
126             ltr: [[80, 80], [80, 60]]
127         }
128     }
129 };
130
131 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
132 // FIXME: Test column-reverse.
133 var flexFlows = ['row', 'column', 'row-reverse'];
134 var directions = ['rtl', 'ltr'];
135
136 function physicalWritingMode(writingMode, flexFlow, direction)
137 {
138     if (flexFlow.indexOf('column') == -1)
139         return writingMode;
140
141     var isReverse = flexFlow.indexOf('reverse') != -1;
142     switch (writingMode) {
143     case 'horizontal-tb':
144     case 'horizontal-bt':
145         return isReverse ? 'vertical-rl' : 'vertical-lr';
146     case 'vertical-lr':
147     case 'vertical-rl':
148         return isReverse ? 'horizontal-bt' : 'horizontal-tb';
149     }
150 }
151
152 writingModes.forEach(function(writingMode) {
153     flexFlows.forEach(function(flexFlow) {
154         directions.forEach(function(direction) {
155             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
156             var title = document.createElement('div');
157             title.className = 'title';
158             title.innerHTML = flexboxClassName;
159             document.body.appendChild(title);
160
161
162             var flexItemExpectations = expectations[writingMode][flexFlow][direction];
163
164             var container = document.createElement('div');
165             container.className = 'container';
166             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' +
167                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' +
168                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' +
169             '</div>';
170
171             document.body.appendChild(container);   
172         })
173     })
174 })
175 </script>
176 </body>
177 </html>