tizen beta release
[framework/web/webkit-efl.git] / LayoutTests / css3 / flexbox / writing-modes.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     width: 600px;
9     display: -webkit-flexbox;
10     background-color: grey;
11 }
12 .flexbox div {
13     height: 20px;
14     border: 0;
15 }
16
17 .rtl {
18     direction: rtl;
19 }
20
21 .bt {
22     -webkit-writing-mode: horizontal-bt;
23 }
24
25 .vertical-rl, .vertical-lr {
26     height: 600px;
27 }
28
29 :-webkit-any(.vertical-rl, .vertical-lr) div {
30     width: 20px;
31 }
32
33 .vertical-rl {
34     -webkit-writing-mode: vertical-rl;
35 }
36
37 .vertical-lr {
38     -webkit-writing-mode: vertical-lr;
39 }
40
41 .flexbox > :nth-child(1) {
42     background-color: blue;
43 }
44 .flexbox > :nth-child(2) {
45     background-color: green;
46 }
47 .flexbox > :nth-child(3) {
48     background-color: red;
49 }
50 </style>
51 <script>
52 if (window.layoutTestController)
53     layoutTestController.dumpAsText();
54 </script>
55 <script src="resources/flexbox.js"></script>
56 <body onload="checkFlexBoxen()">
57
58 <div class="flexbox rtl">
59   <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
60   <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
61   <div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
62 </div>
63
64 <div class="flexbox rtl">
65   <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
66   <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
67   <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
68 </div>
69
70 <div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
71   <div data-expected-width="75" data-offset-x="575" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
72   <div data-expected-width="350" data-offset-x="225" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
73   <div data-expected-width="75" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
74 </div>
75
76 <div style="position:relative">
77 <div class="flexbox vertical-lr">
78   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
79   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
80   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
81 </div>
82 </div>
83
84 <div style="position:relative">
85 <div class="flexbox vertical-lr">
86   <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
87   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
88   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
89 </div>
90 </div>
91
92 <div style="position:relative">
93 <div class="flexbox vertical-lr">
94   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
95   <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0);"></div>
96   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
97 </div>
98 </div>
99
100 <div style="position:relative">
101 <div class="flexbox vertical-lr">
102   <div data-expected-height="450" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
103   <div data-expected-height="100" data-offset-y="450" style="height: -webkit-flex(2 0 0);"></div>
104   <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
105 </div>
106 </div>
107
108 <div style="position:relative">
109 <div class="flexbox vertical-lr">
110   <div data-expected-height="300" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
111   <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
112   <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
113 </div>
114 </div>
115
116
117 <div style="position:relative">
118 <div class="flexbox vertical-lr">
119   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
120   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
121   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
122 </div>
123 </div>
124
125 <div style="position:relative">
126 <div class="flexbox vertical-lr">
127   <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
128   <div data-expected-height="450" data-offset-y="75" style="height: -webkit-flex(2 0 auto);"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
129   <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
130 </div>
131 </div>
132
133 <div style="position:relative">
134 <div class="flexbox vertical-lr">
135   <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
136   <div data-expected-height="450" data-offset-y="75" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
137   <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
138 </div>
139 </div>
140
141 <div style="position:relative">
142 <div class="flexbox vertical-lr">
143   <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
144   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
145   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
146 </div>
147 </div>
148
149 <div style="position:relative">
150 <div class="flexbox vertical-lr">
151   <div data-expected-height="150" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
152   <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
153   <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
154 </div>
155 </div>
156
157 <div style="position:relative">
158 <div class="flexbox vertical-lr rtl">
159   <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
160   <div data-expected-height="350" data-offset-y="175" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
161   <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
162 </div>
163 </div>
164
165 <div class="flexbox vertical-lr">
166   <div data-expected-height="350" style="height: -webkit-flex(1 1 400px); min-height: 350px;"></div>
167   <div data-expected-height="250" style="height: -webkit-flex(1 1 400px);"></div>
168 </div>
169
170 <div style="position:relative">
171 <div class="flexbox vertical-rl">
172   <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
173   <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
174   <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
175 </div>
176 </div>
177
178 <div style="position:relative">
179 <div class="flexbox vertical-rl">
180   <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
181   <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
182   <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
183 </div>
184 </div>
185
186 <div style="position:relative">
187 <div class="flexbox bt" style="height:200px">
188   <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="width: -webkit-flex(1 0 0);"></div>
189   <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
190   <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
191 </div>
192 </div>
193
194 <div style="position:relative">
195 <div class="flexbox bt" style="height:200px">
196   <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 100px 0 50px 0;"></div>
197   <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
198   <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
199 </div>
200 </div>
201
202 <div style="position: relative;">
203     <div data-expected-width="600" style="direction: rtl; display: -webkit-flexbox; margin-left: 10px; margin-right:20px;" class="flexbox">
204       <div data-expected-width="75" data-offset-x="535" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
205       <div data-expected-width="350" data-offset-x="185" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
206       <div data-expected-width="75" data-offset-x="10" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
207     </div>
208 </div>
209
210 <div style="position: relative;">
211     <div data-expected-width="700" style="direction: rtl; display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
212       <div data-expected-width="75" data-offset-x="565" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
213       <div data-expected-width="350" data-offset-x="215" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
214       <div data-expected-width="75" data-offset-x="40" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
215     </div>
216 </div>
217
218 </body>
219 </html>