7e29f8ab7e853d2f79ed085ebb94c55acbc9f497
[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     },
83     'horizontal-bt': {
84         column: {
85             rtl: [[80, 80], [80, 60]],
86             ltr: [[0, 80], [0, 60]]
87         },
88         row: {
89             rtl: [[80, 80], [60, 80]],
90             ltr: [[0, 80], [20, 80]]
91         }
92     },
93     'vertical-lr': {
94         column: {
95             rtl: [[0, 80], [20, 80]],
96             ltr: [[0, 0], [20, 0]]
97         },
98         row: {
99             rtl: [[0, 80], [0, 60]],
100             ltr: [[0, 0], [0, 20]]
101         }
102     },
103     'vertical-rl': {
104         column: {
105             rtl: [[80, 80], [60, 80]],
106             ltr: [[80, 0], [60, 0]]
107         },
108         row: {
109             rtl: [[80, 80], [80, 60]],
110             ltr: [[80, 0], [80, 20]]
111         }
112     }
113 };
114
115 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
116 // FIXME: Test row-reverse and column-reverse.
117 var flexFlows = ['row', 'column'];
118 var directions = ['rtl', 'ltr'];
119
120 function physicalWritingMode(writingMode, flexFlow, direction)
121 {
122     if (flexFlow.indexOf('column') == -1)
123         return writingMode;
124
125     var isReverse = flexFlow.indexOf('reverse') != -1;
126     switch (writingMode) {
127     case 'horizontal-tb':
128     case 'horizontal-bt':
129         return isReverse ? 'vertical-rl' : 'vertical-lr';
130     case 'vertical-lr':
131     case 'vertical-rl':
132         return isReverse ? 'horizontal-bt' : 'horizontal-tb';
133     }
134 }
135
136 writingModes.forEach(function(writingMode) {
137     flexFlows.forEach(function(flexFlow) {
138         directions.forEach(function(direction) {
139             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
140             var title = document.createElement('div');
141             title.className = 'title';
142             title.innerHTML = flexboxClassName;
143             document.body.appendChild(title);
144
145
146             var flexItemExpectations = expectations[writingMode][flexFlow][direction];
147
148             var container = document.createElement('div');
149             container.className = 'container';
150             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' +
151                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' +
152                 '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' +
153             '</div>';
154
155             document.body.appendChild(container);   
156         })
157     })
158 })
159 </script>
160 </body>
161 </html>