OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 body { | 4 body { |
5 margin: 0; | 5 margin: 0; |
6 } | 6 } |
7 .flexbox { | 7 .flexbox { |
8 width: 600px; | 8 width: 600px; |
9 display: flex; | 9 display: flex; |
10 background-color: grey; | 10 background-color: grey; |
11 } | 11 } |
12 .flexbox div { | 12 .flexbox div { |
13 height: 20px; | 13 height: 20px; |
14 border: 0; | 14 border: 0; |
15 } | 15 } |
16 | 16 |
17 .rtl { | 17 .rtl { |
18 direction: rtl; | 18 direction: rtl; |
19 } | 19 } |
20 | 20 |
21 .bt { | 21 .horizontal-tb { |
22 -webkit-writing-mode: horizontal-bt; | 22 writing-mode:horizontal-tb; |
23 } | 23 } |
24 | 24 |
| 25 |
25 .vertical-rl, .vertical-lr { | 26 .vertical-rl, .vertical-lr { |
26 height: 600px; | 27 height: 600px; |
27 } | 28 } |
28 | 29 |
29 :-webkit-any(.vertical-rl, .vertical-lr) div { | 30 :-webkit-any(.vertical-rl, .vertical-lr) div { |
30 width: 20px; | 31 width: 20px; |
31 } | 32 } |
32 | |
33 .vertical-rl { | 33 .vertical-rl { |
34 -webkit-writing-mode: vertical-rl; | 34 -webkit-writing-mode: vertical-rl; |
35 } | 35 } |
36 | 36 |
37 .vertical-lr { | 37 .vertical-lr { |
38 -webkit-writing-mode: vertical-lr; | 38 -webkit-writing-mode: vertical-lr; |
39 } | 39 } |
40 | 40 |
41 .flexbox > :nth-child(1) { | 41 .flexbox > :nth-child(1) { |
42 background-color: blue; | 42 background-color: blue; |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
81 <div class="flexbox vertical-lr"> | 81 <div class="flexbox vertical-lr"> |
82 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="fl
ex: 1 0 0; margin: 0 100px 0 50px;"></div> | 82 <div data-expected-height="150" data-offset-y="0" data-offset-x="50" style="fl
ex: 1 0 0; margin: 0 100px 0 50px;"></div> |
83 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> | 83 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> |
84 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> | 84 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> |
85 </div> | 85 </div> |
86 </div> | 86 </div> |
87 | 87 |
88 <div style="position:relative"> | 88 <div style="position:relative"> |
89 <div class="flexbox vertical-lr"> | 89 <div class="flexbox vertical-lr"> |
90 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div> | 90 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;"></div> |
91 <div data-expected-height="300" data-offset-y="150" class="bt" style="flex: 2
0 0;"></div> | 91 <div data-expected-height="300" data-offset-y="150" class="horizontal-tb" styl
e="flex: 2 0 0;"></div> |
92 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> | 92 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> |
93 </div> | 93 </div> |
94 </div> | 94 </div> |
95 | 95 |
96 <div style="position:relative"> | 96 <div style="position:relative"> |
97 <div class="flexbox vertical-lr"> | 97 <div class="flexbox vertical-lr"> |
98 <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;-webkit-p
adding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webki
t-padding-after:100px;"></div> | 98 <div data-expected-height="450" data-offset-y="0" style="flex: 1 0 0;-webkit-p
adding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:100px;-webki
t-padding-after:100px;"></div> |
99 <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div
> | 99 <div data-expected-height="100" data-offset-y="450" style="flex: 2 0 0;"></div
> |
100 <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div> | 100 <div data-expected-height="50" data-offset-y="550" style="flex: 1 0 0;"></div> |
101 </div> | 101 </div> |
102 </div> | 102 </div> |
103 | 103 |
104 <div style="position:relative"> | 104 <div style="position:relative"> |
105 <div class="flexbox vertical-lr"> | 105 <div class="flexbox vertical-lr"> |
106 <div data-expected-height="300" data-offset-y="0" class="bt" style="flex: 1 0
0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-padding-before:1
00px;-webkit-padding-after:100px;"></div> | 106 <div data-expected-height="300" data-offset-y="0" class="horizontal-tb" style=
"flex: 1 0 0;-webkit-padding-start:200px;-webkit-padding-end:200px;-webkit-paddi
ng-before:100px;-webkit-padding-after:100px;"></div> |
107 <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div
> | 107 <div data-expected-height="200" data-offset-y="300" style="flex: 2 0 0;"></div
> |
108 <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div
> | 108 <div data-expected-height="100" data-offset-y="500" style="flex: 1 0 0;"></div
> |
109 </div> | 109 </div> |
110 </div> | 110 </div> |
111 | 111 |
112 | 112 |
113 <div style="position:relative"> | 113 <div style="position:relative"> |
114 <div class="flexbox vertical-lr"> | 114 <div class="flexbox vertical-lr"> |
115 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin:
auto 0;"></div> | 115 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin:
auto 0;"></div> |
116 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> | 116 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> |
117 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> | 117 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> |
118 </div> | 118 </div> |
119 </div> | 119 </div> |
120 | 120 |
121 <div style="position:relative"> | 121 <div style="position:relative"> |
122 <div class="flexbox vertical-lr"> | 122 <div class="flexbox vertical-lr"> |
123 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au
to 0;"></div> | 123 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au
to 0;"></div> |
124 <div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; heig
ht: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-co
lor:orange;"></div></div> | 124 <div data-expected-height="450" data-offset-y="75" style="flex: 2 0 auto; heig
ht: auto;"><div data-offset-y="75" style="width:200px;height:300px;background-co
lor:orange;"></div></div> |
125 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> | 125 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> |
126 </div> | 126 </div> |
127 </div> | 127 </div> |
128 | 128 |
129 <div style="position:relative"> | 129 <div style="position:relative"> |
130 <div class="flexbox vertical-lr"> | 130 <div class="flexbox vertical-lr"> |
131 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au
to 0;"></div> | 131 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0;margin: au
to 0;"></div> |
132 <div data-expected-height="450" data-offset-y="75" class="bt" style="flex: 2 0
auto; height: auto;"><div style="width:200px;height:300px;background-color:oran
ge;"></div></div> | 132 <div data-expected-height="450" data-offset-y="75" class="horizontal-tb" style
="flex: 2 0 auto; height: auto;"><div style="width:200px;height:300px;background
-color:orange;"></div></div> |
133 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> | 133 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0;"></div> |
134 </div> | 134 </div> |
135 </div> | 135 </div> |
136 | 136 |
137 <div style="position:relative"> | 137 <div style="position:relative"> |
138 <div class="flexbox vertical-lr"> | 138 <div class="flexbox vertical-lr"> |
139 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;-webkit-m
argin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-
after:0;;"></div> | 139 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0;-webkit-m
argin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-webkit-margin-
after:0;;"></div> |
140 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> | 140 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> |
141 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> | 141 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> |
142 </div> | 142 </div> |
143 </div> | 143 </div> |
144 | 144 |
145 <div style="position:relative"> | 145 <div style="position:relative"> |
146 <div class="flexbox vertical-lr"> | 146 <div class="flexbox vertical-lr"> |
147 <div data-expected-height="150" data-offset-y="0" class="bt" style="flex: 1 0
0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-before:0;-web
kit-margin-after:0;;"></div> | 147 <div data-expected-height="150" data-offset-y="0" class="horizontal-tb" style=
"flex: 1 0 0;-webkit-margin-start:auto;-webkit-margin-end:auto;-webkit-margin-be
fore:0;-webkit-margin-after:0;;"></div> |
148 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> | 148 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0;"></div
> |
149 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> | 149 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0;"></div
> |
150 </div> | 150 </div> |
151 </div> | 151 </div> |
152 | 152 |
153 <div style="position:relative"> | 153 <div style="position:relative"> |
154 <div class="flexbox vertical-lr rtl"> | 154 <div class="flexbox vertical-lr rtl"> |
155 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin:
auto 0;"></div> | 155 <div data-expected-height="75" data-offset-y="525" style="flex: 1 0 0; margin:
auto 0;"></div> |
156 <div data-expected-height="350" data-offset-y="175" class="bt" style="flex: 2
0 0; padding: 100px 0;"></div> | 156 <div data-expected-height="350" data-offset-y="175" class="horizontal-tb" styl
e="flex: 2 0 0; padding: 100px 0;"></div> |
157 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; -webkit-m
argin-start: 100px;"></div> | 157 <div data-expected-height="75" data-offset-y="0" style="flex: 1 0 0; -webkit-m
argin-start: 100px;"></div> |
158 </div> | 158 </div> |
159 </div> | 159 </div> |
160 | 160 |
161 <div class="flexbox vertical-lr"> | 161 <div class="flexbox vertical-lr"> |
162 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></
div> | 162 <div data-expected-height="350" style="flex: 1 1 400px; min-height: 350px;"></
div> |
163 <div data-expected-height="250" style="flex: 1 1 400px;"></div> | 163 <div data-expected-height="250" style="flex: 1 1 400px;"></div> |
164 </div> | 164 </div> |
165 | 165 |
166 <div style="position:relative"> | 166 <div style="position:relative"> |
167 <div class="flexbox vertical-rl"> | 167 <div class="flexbox vertical-rl"> |
168 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="f
lex: 1 0 0;"></div> | 168 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="f
lex: 1 0 0;"></div> |
169 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style=
"flex: 2 0 0;"></div> | 169 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style=
"flex: 2 0 0;"></div> |
170 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style=
"flex: 1 0 0;"></div> | 170 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style=
"flex: 1 0 0;"></div> |
171 </div> | 171 </div> |
172 </div> | 172 </div> |
173 | 173 |
174 <div style="position:relative"> | 174 <div style="position:relative"> |
175 <div class="flexbox vertical-rl"> | 175 <div class="flexbox vertical-rl"> |
176 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="f
lex: 1 0 0; margin: 0 100px 0 50px;"></div> | 176 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="f
lex: 1 0 0; margin: 0 100px 0 50px;"></div> |
177 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style=
"flex: 2 0 0;"></div> | 177 <div data-expected-height="300" data-offset-y="150" data-offset-x="580" style=
"flex: 2 0 0;"></div> |
178 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style=
"flex: 1 0 0;"></div> | 178 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style=
"flex: 1 0 0;"></div> |
179 </div> | 179 </div> |
180 </div> | 180 </div> |
181 | 181 |
182 <div style="position:relative"> | |
183 <div class="flexbox bt" style="height:200px"> | |
184 <div data-expected-width="150" data-offset-y="180" data-offset-x="0" style="fl
ex: 1 0 0;"></div> | |
185 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="
flex: 2 0 0;"></div> | |
186 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="
flex: 1 0 0;"></div> | |
187 </div> | |
188 </div> | |
189 | |
190 <div style="position:relative"> | |
191 <div class="flexbox bt" style="height:200px"> | |
192 <div data-expected-width="150" data-offset-y="130" data-offset-x="0" style="fl
ex: 1 0 0; margin: 100px 0 50px 0;"></div> | |
193 <div data-expected-width="300" data-offset-y="180" data-offset-x="150" style="
flex: 2 0 0;"></div> | |
194 <div data-expected-width="150" data-offset-y="180" data-offset-x="450" style="
flex: 1 0 0;"></div> | |
195 </div> | |
196 </div> | |
197 | |
198 <div style="position: relative;"> | 182 <div style="position: relative;"> |
199 <div data-expected-width="600" style="direction: rtl; display: flex; margin-
left: 10px; margin-right:20px;" class="flexbox"> | 183 <div data-expected-width="600" style="direction: rtl; display: flex; margin-
left: 10px; margin-right:20px;" class="flexbox"> |
200 <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; marg
in: 0 auto;"></div> | 184 <div data-expected-width="75" data-offset-x="535" style="flex: 1 0 0; marg
in: 0 auto;"></div> |
201 <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; pad
ding: 0 100px;"></div> | 185 <div data-expected-width="350" data-offset-x="185" style="flex: 2 0 0; pad
ding: 0 100px;"></div> |
202 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin
-right: 100px;"></div> | 186 <div data-expected-width="75" data-offset-x="10" style="flex: 1 0 0;margin
-right: 100px;"></div> |
203 </div> | 187 </div> |
204 </div> | 188 </div> |
205 | 189 |
206 <div style="position: relative;"> | 190 <div style="position: relative;"> |
207 <div data-expected-width="700" style="direction: rtl; display: flex; padding
-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid;
border-right: 40px solid;" class="flexbox "> | 191 <div data-expected-width="700" style="direction: rtl; display: flex; padding
-left: 10px; padding-right: 20px; border-style: solid; border-left: 30px solid;
border-right: 40px solid;" class="flexbox "> |
208 <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; marg
in: 0 auto;"></div> | 192 <div data-expected-width="75" data-offset-x="565" style="flex: 1 0 0; marg
in: 0 auto;"></div> |
209 <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; pad
ding: 0 100px;"></div> | 193 <div data-expected-width="350" data-offset-x="215" style="flex: 2 0 0; pad
ding: 0 100px;"></div> |
210 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin
-right: 100px;"></div> | 194 <div data-expected-width="75" data-offset-x="40" style="flex: 1 0 0;margin
-right: 100px;"></div> |
211 </div> | 195 </div> |
212 </div> | 196 </div> |
213 | 197 |
214 </body> | 198 </body> |
215 </html> | 199 </html> |
OLD | NEW |