OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 .container { | 4 .container { |
5 position: relative; | 5 position: relative; |
6 background-color: pink; | 6 background-color: pink; |
7 outline: 1px solid black; | 7 outline: 1px solid black; |
8 display: inline-block; | 8 display: inline-block; |
9 } | 9 } |
10 .flexbox { | 10 .flexbox { |
(...skipping 10 matching lines...) Expand all Loading... |
21 } | 21 } |
22 .ltr { | 22 .ltr { |
23 direction: ltr; | 23 direction: ltr; |
24 } | 24 } |
25 .rtl { | 25 .rtl { |
26 direction: rtl; | 26 direction: rtl; |
27 } | 27 } |
28 .horizontal-tb { | 28 .horizontal-tb { |
29 -webkit-writing-mode: horizontal-tb; | 29 -webkit-writing-mode: horizontal-tb; |
30 } | 30 } |
31 .horizontal-bt { | |
32 -webkit-writing-mode: horizontal-bt; | |
33 } | |
34 .vertical-rl { | 31 .vertical-rl { |
35 -webkit-writing-mode: vertical-rl; | 32 -webkit-writing-mode: vertical-rl; |
36 } | 33 } |
37 .vertical-lr { | 34 .vertical-lr { |
38 -webkit-writing-mode: vertical-lr; | 35 -webkit-writing-mode: vertical-lr; |
39 } | 36 } |
40 .row { | 37 .row { |
41 flex-flow: row; | 38 flex-flow: row; |
42 } | 39 } |
43 .row-reverse { | 40 .row-reverse { |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
106 }, | 103 }, |
107 ltr : { | 104 ltr : { |
108 container: physicalContainerSize, | 105 container: physicalContainerSize, |
109 flexbox: physicalFlexBoxPosition, | 106 flexbox: physicalFlexBoxPosition, |
110 column: [20, 20, 80, 23], | 107 column: [20, 20, 80, 23], |
111 row: [20, 20, 80, 23], | 108 row: [20, 20, 80, 23], |
112 'column-reverse': [20, 20, 80, 73], | 109 'column-reverse': [20, 20, 80, 73], |
113 'row-reverse': [20, 20, 80, 23], | 110 'row-reverse': [20, 20, 80, 23], |
114 } | 111 } |
115 }, | 112 }, |
116 'horizontal-bt': { | |
117 rtl: { | |
118 container: physicalContainerSize, | |
119 flexbox: physicalFlexBoxPosition, | |
120 column: [20, 20, 80, 73], | |
121 row: [20, 20, 80, 73], | |
122 'column-reverse': [20, 20, 80, 23], | |
123 'row-reverse': [20, 20, 80, 73], | |
124 }, | |
125 ltr : { | |
126 container: physicalContainerSize, | |
127 flexbox: physicalFlexBoxPosition, | |
128 column: [20, 20, 80, 73], | |
129 row: [20, 20, 80, 73], | |
130 'column-reverse': [20, 20, 80, 23], | |
131 'row-reverse': [20, 20, 80, 73], | |
132 } | |
133 }, | |
134 'vertical-lr': { | 113 'vertical-lr': { |
135 rtl: { | 114 rtl: { |
136 container: physicalContainerSize, | 115 container: physicalContainerSize, |
137 flexbox: physicalFlexBoxPosition, | 116 flexbox: physicalFlexBoxPosition, |
138 column: [20, 20, 80, 73], | 117 column: [20, 20, 80, 73], |
139 row: [20, 20, 80, 73], | 118 row: [20, 20, 80, 73], |
140 'column-reverse': [20, 20, 80, 73], | 119 'column-reverse': [20, 20, 80, 73], |
141 'row-reverse': [20, 20, 80, 23], | 120 'row-reverse': [20, 20, 80, 23], |
142 }, | 121 }, |
143 ltr : { | 122 ltr : { |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
181 }, | 160 }, |
182 ltr : { | 161 ltr : { |
183 container: [160, 140], | 162 container: [160, 140], |
184 flexbox: [40, 10], | 163 flexbox: [40, 10], |
185 column: [20, 20, 118, 73], | 164 column: [20, 20, 118, 73], |
186 row: [20, 20, 118, 73], | 165 row: [20, 20, 118, 73], |
187 'column-reverse': [20, 20, 118, 73], | 166 'column-reverse': [20, 20, 118, 73], |
188 'row-reverse': [20, 20, 118, 73], | 167 'row-reverse': [20, 20, 118, 73], |
189 } | 168 } |
190 }, | 169 }, |
191 'horizontal-bt': { | |
192 rtl: { | |
193 container: [160, 140], | |
194 flexbox: [20, 30], | |
195 column: [20, 20, 22, 47], | |
196 row: [20, 20, 22, 47], | |
197 'column-reverse': [20, 20, 22, 47], | |
198 'row-reverse': [20, 20, 22, 47], | |
199 }, | |
200 ltr : { | |
201 container: [160, 140], | |
202 flexbox: [40, 30], | |
203 column: [20, 20, 118, 47], | |
204 row: [20, 20, 118, 47], | |
205 'column-reverse': [20, 20, 118, 47], | |
206 'row-reverse': [20, 20, 118, 47], | |
207 } | |
208 }, | |
209 'vertical-lr': { | 170 'vertical-lr': { |
210 rtl: { | 171 rtl: { |
211 container: [140, 160], | 172 container: [140, 160], |
212 flexbox: [10, 20], | 173 flexbox: [10, 20], |
213 column: [20, 20, 73, 22], | 174 column: [20, 20, 73, 22], |
214 row: [20, 20, 73, 22], | 175 row: [20, 20, 73, 22], |
215 'column-reverse': [20, 20, 73, 22], | 176 'column-reverse': [20, 20, 73, 22], |
216 'row-reverse': [20, 20, 73, 22], | 177 'row-reverse': [20, 20, 73, 22], |
217 }, | 178 }, |
218 ltr : { | 179 ltr : { |
(...skipping 18 matching lines...) Expand all Loading... |
237 container: [140, 160], | 198 container: [140, 160], |
238 flexbox: [30, 40], | 199 flexbox: [30, 40], |
239 column: [20, 20, 47, 118], | 200 column: [20, 20, 47, 118], |
240 row: [20, 20, 47, 118], | 201 row: [20, 20, 47, 118], |
241 'column-reverse': [20, 20, 47, 118], | 202 'column-reverse': [20, 20, 47, 118], |
242 'row-reverse': [20, 20, 47, 118], | 203 'row-reverse': [20, 20, 47, 118], |
243 } | 204 } |
244 } | 205 } |
245 } | 206 } |
246 | 207 |
247 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 208 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
248 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 209 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
249 var directions = ['ltr', 'rtl']; | 210 var directions = ['ltr', 'rtl']; |
250 var marginTypes = ['physical', 'logical']; | 211 var marginTypes = ['physical', 'logical']; |
251 | 212 |
252 marginTypes.forEach(function(marginType) { | 213 marginTypes.forEach(function(marginType) { |
253 writingModes.forEach(function(writingMode) { | 214 writingModes.forEach(function(writingMode) { |
254 flexFlows.forEach(function(flexFlow) { | 215 flexFlows.forEach(function(flexFlow) { |
255 directions.forEach(function(direction) { | 216 directions.forEach(function(direction) { |
256 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; | 217 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; |
257 var title = document.createElement('div'); | 218 var title = document.createElement('div'); |
(...skipping 17 matching lines...) Expand all Loading... |
275 '</div>'; | 236 '</div>'; |
276 | 237 |
277 document.body.appendChild(container); | 238 document.body.appendChild(container); |
278 }) | 239 }) |
279 }) | 240 }) |
280 }) | 241 }) |
281 }) | 242 }) |
282 </script> | 243 </script> |
283 </body> | 244 </body> |
284 </html> | 245 </html> |
OLD | NEW |