Google Git
Sign in
webkit / WebKit / a5d24144db8352c4735c4967935cce2c04e9e862 / . / LayoutTests / css3 / flexbox / line-wrapping.html
blob: fb65cf787bfb70a01e52373f91fa200739e5cffd [file] [log] [blame]
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]1<!DOCTYPE html>
2<html>
3<style>
4body {
5 width: 500px;
6 height: 500px;
7 margin: 0;
8 border: 1px solid;
9}
10.column {
11 -webkit-flex-flow: column;
12}
13.flexbox {
tony@chromium.org3f320ee2012-05-17 03:19:31 +0000[diff] [blame]14 display: -webkit-flex;
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]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 {
tony@chromium.org176a7c92012-04-03 22:34:03 +0000[diff] [blame]43 -webkit-flex: 1;
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]44}
45.vertical-lr.row > div, .vertical-rl.row > div {
tony@chromium.org176a7c92012-04-03 22:34:03 +0000[diff] [blame]46 -webkit-flex: 1;
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]47}
48
49.horizontal-tb.column > div {
tony@chromium.org176a7c92012-04-03 22:34:03 +0000[diff] [blame]50 -webkit-flex: 1;
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]51}
52.vertical-lr.column > div, .vertical-rl.column > div {
tony@chromium.org176a7c92012-04-03 22:34:03 +0000[diff] [blame]53 -webkit-flex: 1;
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]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>
tony@chromium.orgb1541ca2012-07-13 19:58:47 +0000[diff] [blame]109<script src="../../resources/check-layout.js"></script>
110<body onload="checkLayout('.flexbox')">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]111
112<div class="flexbox fixed row horizontal-tb">
113 <div data-expected-width=100 data-expected-height=100>
114 <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
115 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]116 <div data-expected-width=100 data-expected-height=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]117 <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
118 </div>
119</div>
120
121<div class="flexbox fixed column horizontal-tb">
122 <div data-expected-width=200 data-expected-height=50>
123 <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>
124 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]125 <div data-expected-width=200 data-expected-height=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]126 <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>
127 </div>
128</div>
129
130<div class="flexbox fixed column horizontal-tb">
131 <div data-expected-width=200 data-expected-height=50>
132 <div data-offset-y=0></div><div data-offset-y=0></div>
133 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]134 <div data-expected-width=80 data-expected-height=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]135 <div data-offset-y=50></div><div data-offset-y=50></div>
136 </div>
137</div>
138
139<div class="flexbox auto row horizontal-tb" data-expected-width=500>
140 <div data-expected-width=250 data-expected-height=100>
141 <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
142 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]143 <div data-expected-width=250 data-expected-height=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]144 <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
145 </div>
146</div>
147
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]148<div data-expected-width=500 data-expected-height=80 class="flexbox auto column horizontal-tb">
149 <div data-expected-width=500 data-expected-height=40>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]150 <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>
151 </div>
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]152 <div data-expected-width=500 data-expected-height=40 style="-webkit-align-self: flex-start;">
153 <div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=60 data-offset-x=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]154 </div>
155</div>
156
157<!-- FIXME: All the vertical-lr cases are off by 4px in the x direction. See http://webkit.org/b/71193. -->
158
159<div class="flexbox fixed row vertical-lr">
160 <div data-expected-height data-expected-width=100>
161 <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
162 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]163 <div data-expected-height=100 data-expected-width=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]164 <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=100></div>
165 </div>
166</div>
167
168<div class="flexbox fixed column vertical-lr">
169 <div data-expected-height=200 data-expected-width=50>
170 <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>
171 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]172 <div data-expected-height=200 data-expected-width=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]173 <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>
174 </div>
175</div>
176
177<div class="flexbox fixed column vertical-lr">
178 <div data-expected-height=200 data-expected-width=50>
179 <div data-offset-x=4></div><div data-offset-x=4></div>
180 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]181 <div data-expected-height=80 data-expected-width=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]182 <div data-offset-x=54></div><div data-offset-x=54></div>
183 </div>
184</div>
185
ojan@chromium.org852c3312012-02-13 23:37:55 +0000[diff] [blame]186<div class="flexbox auto row vertical-lr" data-expected-height=500>
187 <div data-expected-height=250 data-expected-width=100>
188 <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]189 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]190 <div data-expected-height=250 data-expected-width=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org852c3312012-02-13 23:37:55 +0000[diff] [blame]191 <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=250></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]192 </div>
193</div>
194
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]195<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-lr">
196 <div data-expected-height=500 data-expected-width=40>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]197 <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>
198 </div>
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]199 <div data-expected-height=500 data-expected-width=40 style="-webkit-align-self: flex-start;">
200 <div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=64 data-offset-y=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]201 </div>
202</div>
203
204
205<div class="flexbox fixed row vertical-rl">
206 <div data-expected-height=100 data-expected-width=100>
207 <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
208 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]209 <div data-expected-height=100 data-expected-width=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]210 <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
211 </div>
212</div>
213
214<div class="flexbox fixed column vertical-rl">
215 <div data-expected-height=200 data-expected-width=50>
216 <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>
217 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]218 <div data-expected-height=200 data-expected-width=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]219 <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>
220 </div>
221</div>
222
223<div class="flexbox fixed column vertical-rl">
224 <div data-expected-height=200 data-expected-width=50>
225 <div data-offset-x=80></div><div data-offset-x=80></div>
226 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]227 <div data-expected-height=80 data-expected-width=50 style="-webkit-align-self: flex-start;">
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]228 <div data-offset-x=30></div><div data-offset-x=30></div>
229 </div>
230</div>
231
ojan@chromium.org852c3312012-02-13 23:37:55 +0000[diff] [blame]232<div class="flexbox auto row vertical-rl" data-expected-height=500>
233 <div data-expected-height=250 data-expected-width=100>
234 <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]235 </div>
tony@chromium.org354e7e92012-06-02 08:15:04 +0000[diff] [blame]236 <div data-expected-height=250 data-expected-width=40 style="-webkit-align-self: flex-start;">
ojan@chromium.org852c3312012-02-13 23:37:55 +0000[diff] [blame]237 <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]238 </div>
239</div>
240
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]241<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-rl">
242 <div data-expected-height=500 data-expected-width=40>
243 <div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]244 </div>
ojan@chromium.orge1037f52012-07-12 21:38:33 +0000[diff] [blame]245 <div data-expected-height=500 data-expected-width=40 style="-webkit-align-self: flex-start;">
246 <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=0 data-offset-y=0></div>
ojan@chromium.org2515e4c2011-11-16 00:29:12 +0000[diff] [blame]247 </div>
248</div>
249
250</body>
rniwa@webkit.org42948af2012-06-11 18:23:57 +0000[diff] [blame]251</html>