9 display: -webkit-flexbox;
10 background-color: grey;
22 -webkit-writing-mode: horizontal-bt;
25 .vertical-rl, .vertical-lr {
29 :-webkit-any(.vertical-rl, .vertical-lr) div {
34 -webkit-writing-mode: vertical-rl;
38 -webkit-writing-mode: vertical-lr;
41 .flexbox > :nth-child(1) {
42 background-color: blue;
44 .flexbox > :nth-child(2) {
45 background-color: green;
47 .flexbox > :nth-child(3) {
48 background-color: red;
52 if (window.layoutTestController)
53 layoutTestController.dumpAsText();
55 <script src="resources/flexbox.js"></script>
56 <body onload="checkFlexBoxen()">
58 <div class="flexbox rtl">
59 <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
60 <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
61 <div data-expected-width="75" data-offset-x="100" style="width: -webkit-flex(1 0 0); margin-left: 100px;"></div>
64 <div class="flexbox rtl">
65 <div data-expected-width="75" data-offset-x="525" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
66 <div data-expected-width="350" data-offset-x="175" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
67 <div data-expected-width="75" data-offset-x="0" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
70 <div class="flexbox rtl" style="-webkit-margin-start: 20px;-webkit-margin-end: 50px;">
71 <div data-expected-width="75" data-offset-x="575" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
72 <div data-expected-width="350" data-offset-x="225" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
73 <div data-expected-width="75" data-offset-x="50" style="width: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
76 <div style="position:relative">
77 <div class="flexbox vertical-lr">
78 <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
79 <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
80 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
84 <div style="position:relative">
85 <div class="flexbox vertical-lr">
86 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
87 <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
88 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
92 <div style="position:relative">
93 <div class="flexbox vertical-lr">
94 <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);"></div>
95 <div data-expected-height="300" data-offset-y="150" class="bt" style="height: -webkit-flex(2 0 0);"></div>
96 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
100 <div style="position:relative">
101 <div class="flexbox vertical-lr">
102 <div data-expected-height="450" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
103 <div data-expected-height="100" data-offset-y="450" style="height: -webkit-flex(2 0 0);"></div>
104 <div data-expected-height="50" data-offset-y="550" style="height: -webkit-flex(1 0 0);"></div>
108 <div style="position:relative">
109 <div class="flexbox vertical-lr">
110 <div data-expected-height="300" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webkit-padding-after:100px;"></div>
111 <div data-expected-height="200" data-offset-y="300" style="height: -webkit-flex(2 0 0);"></div>
112 <div data-expected-height="100" data-offset-y="500" style="height: -webkit-flex(1 0 0);"></div>
117 <div style="position:relative">
118 <div class="flexbox vertical-lr">
119 <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
120 <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
121 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
125 <div style="position:relative">
126 <div class="flexbox vertical-lr">
127 <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
128 <div data-expected-height="450" data-offset-y="75" style="height: -webkit-flex(2 0 auto);"><div data-offset-y="75" style="width:200px;height:300px;background-color:orange;"></div></div>
129 <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
133 <div style="position:relative">
134 <div class="flexbox vertical-lr">
135 <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0);margin: auto 0;"></div>
136 <div data-expected-height="450" data-offset-y="75" class="bt" style="height: -webkit-flex(2 0 auto);"><div style="width:200px;height:300px;background-color:orange;"></div></div>
137 <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0);"></div>
141 <div style="position:relative">
142 <div class="flexbox vertical-lr">
143 <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
144 <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
145 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
149 <div style="position:relative">
150 <div class="flexbox vertical-lr">
151 <div data-expected-height="150" data-offset-y="0" class="bt" style="height: -webkit-flex(1 0 0);-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-after:0;;"></div>
152 <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0);"></div>
153 <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0);"></div>
157 <div style="position:relative">
158 <div class="flexbox vertical-lr rtl">
159 <div data-expected-height="75" data-offset-y="525" style="height: -webkit-flex(1 0 0); margin: auto 0;"></div>
160 <div data-expected-height="350" data-offset-y="175" class="bt" style="height: -webkit-flex(2 0 0); padding: 100px 0;"></div>
161 <div data-expected-height="75" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-start: 100px;"></div>
165 <div class="flexbox vertical-lr">
166 <div data-expected-height="350" style="height: -webkit-flex(1 1 400px); min-height: 350px;"></div>
167 <div data-expected-height="250" style="height: -webkit-flex(1 1 400px);"></div>
170 <div style="position:relative">
171 <div class="flexbox vertical-rl">
172 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
173 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
174 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
178 <div style="position:relative">
179 <div class="flexbox vertical-rl">
180 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: 0 100px 0 50px;"></div>
181 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style="height: -webkit-flex(2 0 0);"></div>
182 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0);"></div>
186 <div style="position:relative">
187 <div class="flexbox bt" style="height:200px">
188 <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="width: -webkit-flex(1 0 0);"></div>
189 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
190 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
194 <div style="position:relative">
195 <div class="flexbox bt" style="height:200px">
196 <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 100px 0 50px 0;"></div>
197 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="width: -webkit-flex(2 0 0);"></div>
198 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="width: -webkit-flex(1 0 0);"></div>
202 <div style="position: relative;">
203 <div data-expected-width="600" style="direction: rtl; display: -webkit-flexbox; margin-left: 10px; margin-right:20px;" class="flexbox">
204 <div data-expected-width="75" data-offset-x="535" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
205 <div data-expected-width="350" data-offset-x="185" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
206 <div data-expected-width="75" data-offset-x="10" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>
210 <div style="position: relative;">
211 <div data-expected-width="700" style="direction: rtl; display: -webkit-flexbox; padding-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid; border-right: 40px solid;" class="flexbox ">
212 <div data-expected-width="75" data-offset-x="565" style="width: -webkit-flex(1 0 0); margin: 0 auto;"></div>
213 <div data-expected-width="350" data-offset-x="215" style="width: -webkit-flex(2 0 0); padding: 0 100px;"></div>
214 <div data-expected-width="75" data-offset-x="40" style="width: -webkit-flex(1 0 0);margin-right: 100px;"></div>