Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / flexbox / inline-flexbox-wrap-vertically-width-calculation.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/flexbox.css" rel="stylesheet">
4 <style>
5 .inline-flexbox {
6     background-color: #aaa;
7     position: relative;
8 }
9
10 .writing-mode-vertical {
11   writing-mode: vertical-rl;
12 }
13 .inline-flexbox > * {
14     flex: none;
15 }
16 .inline-flexbox :nth-child(1) {
17     background-color: lightblue;
18 }
19 .inline-flexbox :nth-child(2) {
20     background-color: lightgreen;
21 }
22 .inline-flexbox :nth-child(3) {
23     background-color: pink;
24 }
25 .inline-flexbox :nth-child(4) {
26     background-color: yellow;
27 }
28 </style>
29 <script src="../../resources/testharness.js"></script>
30 <script src="../../resources/testharnessreport.js"></script>
31 <script src="../../resources/check-layout-th.js"></script>
32 <body onload="checkLayout('.inline-flexbox');">
33 <div id=log></div>
34 <div class="inline-flexbox column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
35   <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
36   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
37   <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
38   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
39 </div>
40
41 <div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
42   <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
43   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
44   <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div>
45   <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div>
46 </div>
47
48 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
49   <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div>
50   <div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div>
51   <div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div>
52   <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div>
53 </div>
54
55 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
56   <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div>
57   <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
58   <div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div>
59   <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div>
60 </div>
61
62 <div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
63   <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div>
64   <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div>
65   <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div>
66   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
67 </div>
68
69 <div class="inline-flexbox column align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
70   <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="0"></div>
71   <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="20"></div>
72   <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="0"></div>
73   <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="10"></div>
74 </div>
75
76 <div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
77   <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div>
78   <div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div>
79   <div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div>
80   <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
81 </div>
82
83 <div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
84   <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="50"></div>
85   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
86   <div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="0"></div>
87   <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="-30"></div>
88 </div>
89
90 <div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
91   <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
92   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
93   <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
94   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
95 </div>
96
97 <div class="inline-flexbox column-reverse align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
98   <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div>
99   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div>
100   <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div>
101   <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div>
102 </div>
103
104 <div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
105   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
106   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div>
107   <div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div>
108   <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div>
109 </div>
110
111 <div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
112   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
113   <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
114   <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div>
115   <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div>
116 </div>
117
118 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
119   <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div>
120   <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div>
121   <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div>
122   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
123 </div>
124
125 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
126   <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="15"></div>
127   <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="5"></div>
128   <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="25"></div>
129   <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="5"></div>
130 </div>
131
132 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
133   <div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
134   <div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div>
135   <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div>
136   <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div>
137 </div>
138
139 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
140   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="50"></div>
141   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
142   <div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="40"></div>
143   <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="-50"></div>
144 </div>
145 </body>
146 </html>