auto margins on flexbox should allocate space in the cross direction
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-align-vertical-writing-mode.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     height: 100px;
9     display: -webkit-flex;
10     background-color: #aaa;
11     position: relative;
12     -webkit-writing-mode: vertical-rl;
13 }
14 .flexbox div {
15     border: 0;
16 }
17
18 .flexbox :nth-child(1) {
19     background-color: blue;
20 }
21 .flexbox :nth-child(2) {
22     background-color: green;
23 }
24 .flexbox :nth-child(3) {
25     background-color: red;
26 }
27 .flexbox :nth-child(4) {
28     background-color: yellow;
29 }
30 .flexbox :nth-child(5) {
31     background-color: purple;
32 }
33 .flexbox :nth-child(6) {
34     background-color: orange;
35 }
36 .flexbox :nth-child(7) {
37     background-color: lime;
38 }
39 .flexbox :nth-child(8) {
40     background-color: lightblue;
41 }
42 .flexbox :nth-child(9) {
43     background-color: darkred;
44 }
45 .flexbox :nth-child(10) {
46     background-color: gold;
47 }
48 .flexbox :nth-child(11) {
49     background-color: salmon;
50 }
51 </style>
52 <script>
53 if (window.layoutTestController)
54     layoutTestController.dumpAsText();
55 </script>
56 <script src="resources/flexbox.js"></script>
57 <body onload="checkFlexBoxen()">
58
59 <!-- stretch is the default flex-align so these flexitems should all have the same height. -->
60 <div class="flexbox">
61   <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
62   <div data-expected-width="100" style="-webkit-flex: 1 0 0; width: 100px"></div>
63   <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
64 </div>
65
66 <div class="flexbox">
67   <div data-expected-width="60"  data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px;"></div>
68   <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
69   <div data-expected-width="60"  data-offset-x="30" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
70   <div data-expected-width="0" data-offset-x="60" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
71   <div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
72   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
73   <div data-expected-width="90" data-offset-x="10" style="-webkit-flex: 1 0 0; margin: 0 20px 0 10px;"></div>
74   <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;">
75     <!-- Since no parent has a fixed height, this div shrink-wraps. -->
76     <div data-expected-width="0" style="width: 100%; background-color:black"></div>
77   </div>
78 </div>
79
80 <div class="flexbox" style="width: 100px;">
81   <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
82   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
83   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100%;">
84     <div data-expected-width="100" style="width: 100%; background-color:black"></div>
85   </div>
86 </div>
87
88 <div class="flexbox" style="width: 100px;">
89   <div data-expected-width="50"  data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px;"></div>
90   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
91 </div>
92
93 <div class="flexbox">
94   <div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
95   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
96   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
97   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto 0 0"></div>
98   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 0 0 auto"></div>
99   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
100   <div data-expected-width="50" data-offset-x="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
101   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
102 </div>
103
104 <div class="flexbox">
105   <div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
106   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
107   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
108   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto 0 0"></div>
109   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 0 0 auto"></div>
110   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
111   <div data-expected-width="50" data-offset-x="10" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
112   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
113 </div>
114
115 <div class="flexbox">
116   <div data-expected-width="0" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"></div>
117   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
118   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
119   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto 0 0"></div>
120   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 0 0 auto"></div>
121   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
122   <div data-expected-width="50" data-offset-x="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
123   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
124 </div>
125
126 <div class="flexbox">
127   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
128   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
129   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
130   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0"></div>
131   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
132   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
133 </div>
134
135 <div class="flexbox">
136   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
137   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
138   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
139   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
140   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
141 </div>
142
143 <div class="flexbox">
144   <div data-expected-width="20" data-offset-x="60" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 20px;"></div>
145   <div data-expected-width="10" data-offset-x="70" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
146   <div data-expected-width="10" data-offset-x="60" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
147   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
148 </div>
149
150 <div class="flexbox">
151   <div id="baseline1" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
152   <div id="baseline2" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
153   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
154   <div id="baseline3" data-expected-width="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
155   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
156 </div>
157
158 <div class="flexbox">
159   <div id="baseline4" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
160   <div id="baseline5" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
161   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
162   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
163 </div>
164
165 <div class="flexbox" style="-webkit-writing-mode: vertical-lr">
166   <div id="baseline6" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
167   <div id="baseline7" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
168   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
169   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
170   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
171 </div>
172
173 <div class="flexbox" style="-webkit-writing-mode: vertical-lr">
174   <div id="baseline8" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;">ahem</div>
175   <div id="baseline9" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
176   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
177   <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; width: 100px;"></div>
178 </div>
179
180 <div id="results"></div>
181
182 <script>
183 function additionalBaselineChecks()
184 {
185     var baseline1 = document.getElementById("baseline1");
186     var baseline2 = document.getElementById("baseline2");
187     var baseline3 = document.getElementById("baseline3");
188     logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,
189                "baseline1 and baseline2 should have the same baseline.");
190     logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,
191                "baseline3 should be above the center flex-aligned item.");
192
193     var baseline4 = document.getElementById("baseline4");
194     var baseline5 = document.getElementById("baseline5");
195     logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetLeft + baseline5.offsetWidth,
196                "baseline4 and baseline5 should be right aligned with each other.");
197     logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,
198                "baseline4 and baseline5 should be below baseline6.");
199
200     var baseline6 = document.getElementById("baseline6");
201     var baseline7 = document.getElementById("baseline7");
202     logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,
203                "baseline6 and baseline7 should have the same baseline.");
204
205     var baseline8 = document.getElementById("baseline8");
206     var baseline9 = document.getElementById("baseline9");
207     logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,
208                "baseline8 and baseline9 should be left aligned with each other.");
209
210 }
211
212 function logIfFalse(condition, msg)
213 {
214     if (!condition)
215         document.getElementById("results").innerHTML += msg + "<br/>";
216 }
217
218 additionalBaselineChecks();
219 </script>
220
221 </body>
222 </html>