4dda40fa52a7ade692dcf542e8019e868e4197d4
[WebKit-https.git] / LayoutTests / css3 / flexbox / line-wrapping.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     width: 500px;
6     height: 500px;
7     margin: 0;
8     border: 1px solid;
9 }
10 .column {
11     -webkit-flex-flow: column;
12 }
13 .flexbox {
14     display: -webkit-flexbox;
15     background-color: gray;
16     position: relative;
17 }
18 .flexbox > div {
19     line-height: 0px;
20 }
21 .flexbox > div > div {
22     display: inline-block;
23     line-height: 0px;
24 }
25 .horizontal-tb {
26     -webkit-writing-mode: horizontal-tb;
27 }
28 .vertical-rl {
29     -webkit-writing-mode: vertical-rl;
30 }
31 .vertical-lr {
32     -webkit-writing-mode: vertical-lr;
33 }
34
35 .horizontal-tb.row, .horizontal-tb.fixed.column {
36     height: 100px; 
37 }
38 .vertical-lr.row, .vertical-rl.row, .vertical-lr.fixed.column, .vertical-rl.fixed.column {
39     width: 100px; 
40 }
41
42 .horizontal-tb.row > div {
43     width: -webkit-flex(1);
44 }
45 .vertical-lr.row > div, .vertical-rl.row > div {
46     height: -webkit-flex(1);
47 }
48
49 .horizontal-tb.column > div {
50     height: -webkit-flex(1);
51 }
52 .vertical-lr.column > div, .vertical-rl.column > div {
53     width: -webkit-flex(1);
54 }
55
56 .horizontal-tb.fixed {
57     width: 200px;
58 }
59 .vertical-lr.fixed, .vertical-rl.fixed {
60     height: 200px;
61 }
62
63 .horizontal-tb.flexbox > div > div {
64     height: 20px;
65 }
66 .vertical-lr.flexbox > div > div, .vertical-rl.flexbox > div > div {
67     width: 20px;
68 }
69
70 .horizontal-tb.fixed > div > div {
71     width: 40px;
72 }
73 .vertical-lr.fixed > div > div, .vertical-rl.fixed > div > div {
74     height: 40px;
75 }
76
77 .horizontal-tb.auto > div > div {
78     width: 100px;
79 }
80 .vertical-lr.auto > div > div, .vertical-rl.auto > div > div {
81     height: 100px;
82 }
83
84 .flexbox > :nth-child(1) {
85     background-color: lightblue;
86 }
87 .flexbox > :nth-child(2) {
88     background-color: pink;
89 }
90 .flexbox > div > :nth-child(1) {
91     background-color: blue;
92 }
93 .flexbox > div > :nth-child(2) {
94     background-color: green;
95 }
96 .flexbox > div > :nth-child(3) {
97     background-color: red;
98 }
99 .flexbox > div > :nth-child(4) {
100     background-color: yellow;
101 }
102 .flexbox > div > :nth-child(5) {
103     background-color: purple;
104 }
105 .flexbox > div > :nth-child(6) {
106     background-color: orange;
107 }
108 </style>
109 <script>
110 if (window.layoutTestController)
111     layoutTestController.dumpAsText();
112 </script>
113 <script src="resources/flexbox.js"></script>
114 <body onload="checkFlexBoxen()">
115
116 <div class="flexbox fixed row horizontal-tb">
117     <div data-expected-width=100 data-expected-height=100>
118         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
119     </div>
120     <div data-expected-width=100 data-expected-height=40 style="-webkit-flex-item-align: start;">
121         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
122     </div>
123 </div>
124
125 <div class="flexbox fixed column horizontal-tb">
126     <div data-expected-width=200 data-expected-height=50>
127         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
128     </div>
129     <div data-expected-width=200 data-expected-height=50 style="-webkit-flex-item-align: start;">
130         <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div>
131     </div>
132 </div>
133
134 <div class="flexbox fixed column horizontal-tb">
135     <div data-expected-width=200 data-expected-height=50>
136         <div data-offset-y=0></div><div data-offset-y=0></div>
137     </div>
138     <div data-expected-width=80 data-expected-height=50 style="-webkit-flex-item-align: start;">
139         <div data-offset-y=50></div><div data-offset-y=50></div>
140     </div>
141 </div>
142
143 <div class="flexbox auto row horizontal-tb" data-expected-width=500>
144     <div data-expected-width=250 data-expected-height=100>
145         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
146     </div>
147     <div data-expected-width=250 data-expected-height=40 style="-webkit-flex-item-align: start;">
148         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
149     </div>
150 </div>
151
152 <div data-expected-width=500 data-expected-height=0 class="flexbox auto column horizontal-tb">
153     <div data-expected-width=500 data-expected-height=0>
154         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
155     </div>
156     <div data-expected-width=500 data-expected-height=0 style="-webkit-flex-item-align: start;">
157         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
158     </div>
159 </div>
160
161 <!-- FIXME: All the vertical-lr cases are off by 4px in the x direction. See http://webkit.org/b/71193. -->
162
163 <div class="flexbox fixed row vertical-lr">
164     <div data-expected-height data-expected-width=100>
165         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
166     </div>
167     <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-item-align: start;">
168         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=100></div>
169     </div>
170 </div>
171
172 <div class="flexbox fixed column vertical-lr">
173     <div data-expected-height=200 data-expected-width=50>
174         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
175     </div>
176     <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-item-align: start;">
177         <div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=74 data-offset-y=0></div>
178     </div>
179 </div>
180
181 <div class="flexbox fixed column vertical-lr">
182     <div data-expected-height=200 data-expected-width=50>
183         <div data-offset-x=4></div><div data-offset-x=4></div>
184     </div>
185     <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-item-align: start;">
186         <div data-offset-x=54></div><div data-offset-x=54></div>
187     </div>
188 </div>
189
190 <div class="flexbox auto row vertical-lr" data-expected-height=500>
191     <div data-expected-height=250 data-expected-width=100>
192         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
193     </div>
194     <div data-expected-height=250 data-expected-width=40 style="-webkit-flex-item-align: start;">
195         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=250></div>
196     </div>
197 </div>
198
199 <div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-lr">
200     <div data-expected-height=500 data-expected-width=0>
201         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
202     </div>
203     <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-item-align: start;">
204         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
205     </div>
206 </div>
207
208
209 <div class="flexbox fixed row vertical-rl">
210     <div data-expected-height=100 data-expected-width=100>
211         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
212     </div>
213     <div data-expected-height=100 data-expected-width=40 style="-webkit-flex-item-align: start;">
214         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
215     </div>
216 </div>
217
218 <div class="flexbox fixed column vertical-rl">
219     <div data-expected-height=200 data-expected-width=50>
220         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
221     </div>
222     <div data-expected-height=200 data-expected-width=50 style="-webkit-flex-item-align: start;">
223         <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div>
224     </div>
225 </div>
226
227 <div class="flexbox fixed column vertical-rl">
228     <div data-expected-height=200 data-expected-width=50>
229         <div data-offset-x=80></div><div data-offset-x=80></div>
230     </div>
231     <div data-expected-height=80 data-expected-width=50 style="-webkit-flex-item-align: start;">
232         <div data-offset-x=30></div><div data-offset-x=30></div>
233     </div>
234 </div>
235
236 <div class="flexbox auto row vertical-rl" data-expected-height=500>
237     <div data-expected-height=250 data-expected-width=100>
238         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
239     </div>
240     <div data-expected-height=250 data-expected-width=40 style="-webkit-flex-item-align: start;">
241         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div>
242     </div>
243 </div>
244
245 <!-- Not sure if these negative offsets are correct, but if there's a bug it's not a flexbox bug, e.g. the following html gets the same negative offsets:
246 <div style="-webkit-writing-mode:vertical-rl;"><div style="width: 0"><div style="display: inline-block; height: 40px; width: 20px; background-color: blue;"></div></div></div>
247 -->
248 <div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-rl">
249     <div data-expected-height=500 data-expected-width=0>
250         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
251     </div>
252     <div data-expected-height=500 data-expected-width=0 style="-webkit-flex-item-align: start;">
253         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
254     </div>
255 </div>
256
257 </body>
258 </html>