| 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 |