Rename flex-align to flex-item-align.
[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: 600px;
9     display: -webkit-flexbox;
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 @font-face {
40     font-family: test;
41     src: url(../../resources/Ahem.ttf);
42 }
43 </style>
44 <script>
45 if (window.layoutTestController)
46     layoutTestController.dumpAsText();
47 </script>
48 <script src="resources/flexbox.js"></script>
49 <body onload="checkFlexBoxen()">
50
51 <!-- stretch is the default flex-align so these flexitems should all have the same height. -->
52 <div class="flexbox">
53   <div data-expected-width="100" style="height: -webkit-flex(1 0 0);"></div>
54   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
55   <div data-expected-width="100" style="height: -webkit-flex(1 0 0);"></div>
56 </div>
57
58 <div class="flexbox">
59   <div data-expected-width="60"  data-offset-x="60" style="height: -webkit-flex(1 0 0); width: 60px; margin: auto;"></div>
60   <div data-expected-width="120" data-offset-x="0" style="height: -webkit-flex(1 0 0); margin: 0 auto;"></div>
61   <div data-expected-width="100" data-offset-x="10" style="height: -webkit-flex(1 0 0); width: 100px; margin: 0 10px;"></div>
62   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: 0 20px 0 10px;"></div>
63   <div data-expected-width="90" data-offset-x="10" style="height: -webkit-flex(1 0 0); margin: 0 20px 0 10px;"></div>
64   <div data-expected-width="120" data-offset-x="0" style="height: -webkit-flex(1 0 0);">
65     <!-- Since no parent has a fixed height, this div shrink-wraps. -->
66     <div data-expected-width="0" style="width: 100%; background-color:black"></div>
67   </div>
68 </div>
69
70 <div class="flexbox" style="width: 100px;">
71   <div data-expected-width="50"  data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px;"></div>
72   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
73   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100%;">
74     <div data-expected-width="100" style="width: 100%; background-color:black"></div>
75   </div>
76 </div>
77
78 <div class="flexbox" style="width: 100px;">
79   <div data-expected-width="50"  data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px;"></div>
80   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
81 </div>
82
83 <div class="flexbox">
84   <div data-expected-width="0" data-offset-x="100" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start;"></div>
85   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
86   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
87   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: auto 0 0"></div>
88   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
89   <div data-expected-width="50" data-offset-x="30" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
90   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
91 </div>
92
93 <div class="flexbox">
94   <div data-expected-width="0" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end;"></div>
95   <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
96   <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
97   <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: auto 0 0"></div>
98   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
99   <div data-expected-width="50" data-offset-x="10" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
100   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
101 </div>
102
103 <div class="flexbox">
104   <div data-expected-width="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center;"></div>
105   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
106   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
107   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: auto 0 0"></div>
108   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
109   <div data-expected-width="50" data-offset-x="20" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>
110   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
111 </div>
112
113 <div class="flexbox">
114   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px;"></div>
115   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px;"></div>
116   <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px;"></div>
117   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0"></div>
118   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0);"></div>
119   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
120 </div>
121
122 <div class="flexbox">
123   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: start; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
124   <div data-expected-width="50" data-offset-x="25" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: center; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
125   <div data-expected-width="50" data-offset-x="0" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: end; width: 50px; -webkit-writing-mode: horizontal-tb;"></div>
126   <div data-expected-width="50" data-offset-x="50" style="height: -webkit-flex(1 0 0); width: 50px; margin: auto 0; -webkit-writing-mode: horizontal-tb;"></div>
127   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px; -webkit-writing-mode: horizontal-tb;"></div>
128 </div>
129
130 <div class="flexbox">
131   <div data-expected-width="20" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 20px;"></div>
132   <div data-expected-width="10" data-offset-x="70" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
133   <div data-expected-width="10" data-offset-x="60" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline; width: 10px; margin: 0 20px 0 0;"></div>
134   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
135 </div>
136
137 <div class="flexbox" style="font-family: test;">
138   <div id="baseline1" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
139   <div id="baseline2" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
140   <div data-expected-width="50" data-offset-x="25" style="height: -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>
141   <div id="baseline3" data-expected-width="50" style="height: -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>
142   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
143 </div>
144
145 <div class="flexbox" style="font-family: test;">
146   <div id="baseline4" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
147   <div id="baseline5" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
148   <div data-expected-width="50" data-offset-x="50" style="height: -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>
149   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
150 </div>
151
152 <div class="flexbox" style="font-family: test; -webkit-writing-mode: vertical-lr">
153   <div id="baseline6" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
154   <div id="baseline7" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
155   <div data-expected-width="50" data-offset-x="25" style="height: -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>
156   <div data-expected-width="50" data-offset-x="0" style="height: -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>
157   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
158 </div>
159
160 <div class="flexbox" style="font-family: test; -webkit-writing-mode: vertical-lr">
161   <div id="baseline8" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>
162   <div id="baseline9" style="height: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
163   <div data-expected-width="50" data-offset-x="0" style="height: -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>
164   <div data-expected-width="100" data-offset-x="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
165 </div>
166
167 <div id="results"></div>
168
169 <script>
170 function additionalBaselineChecks()
171 {
172     var baseline1 = document.getElementById("baseline1");
173     var baseline2 = document.getElementById("baseline2");
174     var baseline3 = document.getElementById("baseline3");
175     logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,
176                "baseline1 and baseline2 should have the same baseline.");
177     logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,
178                "baseline3 should be above the center flex-aligned item.");
179
180     var baseline4 = document.getElementById("baseline4");
181     var baseline5 = document.getElementById("baseline5");
182     logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetLeft + baseline5.offsetWidth,
183                "baseline4 and baseline5 should be right aligned with each other.");
184     logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,
185                "baseline4 and baseline5 should be below baseline6.");
186
187     var baseline6 = document.getElementById("baseline6");
188     var baseline7 = document.getElementById("baseline7");
189     logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,
190                "baseline6 and baseline7 should have the same baseline.");
191
192     var baseline8 = document.getElementById("baseline8");
193     var baseline9 = document.getElementById("baseline9");
194     logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,
195                "baseline8 and baseline9 should be left aligned with each other.");
196
197 }
198
199 function logIfFalse(condition, msg)
200 {
201     if (!condition)
202         document.getElementById("results").innerHTML += msg + "<br/>";
203 }
204
205 additionalBaselineChecks();
206 </script>
207
208 </body>
209 </html>