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