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 red; | 7 outline: 1px solid red; |
8 display: inline-block; | 8 display: inline-block; |
9 } | 9 } |
10 .flexbox { | 10 .flexbox { |
(...skipping 12 matching lines...) Expand all Loading... |
23 } | 23 } |
24 .ltr { | 24 .ltr { |
25 direction: ltr; | 25 direction: ltr; |
26 } | 26 } |
27 .rtl { | 27 .rtl { |
28 direction: rtl; | 28 direction: rtl; |
29 } | 29 } |
30 .horizontal-tb { | 30 .horizontal-tb { |
31 -webkit-writing-mode: horizontal-tb; | 31 -webkit-writing-mode: horizontal-tb; |
32 } | 32 } |
33 .horizontal-bt { | |
34 -webkit-writing-mode: horizontal-bt; | |
35 } | |
36 .vertical-rl { | 33 .vertical-rl { |
37 -webkit-writing-mode: vertical-rl; | 34 -webkit-writing-mode: vertical-rl; |
38 } | 35 } |
39 .vertical-lr { | 36 .vertical-lr { |
40 -webkit-writing-mode: vertical-lr; | 37 -webkit-writing-mode: vertical-lr; |
41 } | 38 } |
42 .row { | 39 .row { |
43 flex-flow: row; | 40 flex-flow: row; |
44 } | 41 } |
45 .row-reverse { | 42 .row-reverse { |
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
109 column: [20, 70, 118, 23], | 106 column: [20, 70, 118, 23], |
110 row: [90, 20, 48, 23] | 107 row: [90, 20, 48, 23] |
111 }, | 108 }, |
112 ltr : { | 109 ltr : { |
113 size: physicalFlexBoxOffsetSize, | 110 size: physicalFlexBoxOffsetSize, |
114 position: physicalFlexBoxClientPosition, | 111 position: physicalFlexBoxClientPosition, |
115 column: [20, 70, 48, 23], | 112 column: [20, 70, 48, 23], |
116 row: [90, 20, 48, 23] | 113 row: [90, 20, 48, 23] |
117 } | 114 } |
118 }, | 115 }, |
119 'horizontal-bt': { | |
120 rtl: { | |
121 size: physicalFlexBoxOffsetSize, | |
122 position: physicalFlexBoxClientPosition, | |
123 column: [20, 70, 118, 23], | |
124 row: [90, 20, 48, 73] | |
125 }, | |
126 ltr : { | |
127 size: physicalFlexBoxOffsetSize, | |
128 position: physicalFlexBoxClientPosition, | |
129 column: [20, 70, 48, 23], | |
130 row: [90, 20, 48, 73] | |
131 } | |
132 }, | |
133 'vertical-lr': { | 116 'vertical-lr': { |
134 rtl: { | 117 rtl: { |
135 size: physicalFlexBoxOffsetSize, | 118 size: physicalFlexBoxOffsetSize, |
136 position: physicalFlexBoxClientPosition, | 119 position: physicalFlexBoxClientPosition, |
137 column: [90, 20, 48, 73], | 120 column: [90, 20, 48, 73], |
138 row: [20, 70, 48, 23] | 121 row: [20, 70, 48, 23] |
139 }, | 122 }, |
140 ltr : { | 123 ltr : { |
141 size: physicalFlexBoxOffsetSize, | 124 size: physicalFlexBoxOffsetSize, |
142 position: physicalFlexBoxClientPosition, | 125 position: physicalFlexBoxClientPosition, |
(...skipping 25 matching lines...) Expand all Loading... |
168 column: [20, 70, 92, 23], | 151 column: [20, 70, 92, 23], |
169 row: [90, 20, 22, 23] | 152 row: [90, 20, 22, 23] |
170 }, | 153 }, |
171 ltr : { | 154 ltr : { |
172 size: [160, 140], | 155 size: [160, 140], |
173 position: [40, 10], | 156 position: [40, 10], |
174 column: [20, 70, 48, 23], | 157 column: [20, 70, 48, 23], |
175 row: [90, 20, 48, 23] | 158 row: [90, 20, 48, 23] |
176 } | 159 } |
177 }, | 160 }, |
178 'horizontal-bt': { | |
179 rtl: { | |
180 size: [160, 140], | |
181 position: [20, 30], | |
182 column: [20, 70, 92, 47], | |
183 row: [90, 20, 22, 97] | |
184 }, | |
185 ltr : { | |
186 size: [160, 140], | |
187 position: [40, 30], | |
188 column: [20, 70, 48, 47], | |
189 row: [90, 20, 48, 97] | |
190 } | |
191 }, | |
192 'vertical-lr': { | 161 'vertical-lr': { |
193 rtl: { | 162 rtl: { |
194 size: [140, 160], | 163 size: [140, 160], |
195 position: [10, 20], | 164 position: [10, 20], |
196 column: [70, 20, 23, 92], | 165 column: [70, 20, 23, 92], |
197 row: [20, 90, 23, 22] | 166 row: [20, 90, 23, 22] |
198 }, | 167 }, |
199 ltr : { | 168 ltr : { |
200 size: [140, 160], | 169 size: [140, 160], |
201 position: [10, 40], | 170 position: [10, 40], |
(...skipping 10 matching lines...) Expand all Loading... |
212 }, | 181 }, |
213 ltr : { | 182 ltr : { |
214 size: [140, 160], | 183 size: [140, 160], |
215 position: [30, 40], | 184 position: [30, 40], |
216 column: [70, 20, 47, 48], | 185 column: [70, 20, 47, 48], |
217 row: [20, 90, 97, 48] | 186 row: [20, 90, 97, 48] |
218 } | 187 } |
219 } | 188 } |
220 } | 189 } |
221 | 190 |
222 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 191 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
223 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 192 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
224 var directions = ['rtl', 'ltr']; | 193 var directions = ['rtl', 'ltr']; |
225 var marginTypes = ['physical', 'logical']; | 194 var marginTypes = ['physical', 'logical']; |
226 | 195 |
227 writingModes.forEach(function(writingMode) { | 196 writingModes.forEach(function(writingMode) { |
228 flexFlows.forEach(function(flexFlow) { | 197 flexFlows.forEach(function(flexFlow) { |
229 directions.forEach(function(direction) { | 198 directions.forEach(function(direction) { |
230 marginTypes.forEach(function(marginType) { | 199 marginTypes.forEach(function(marginType) { |
231 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; | 200 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; |
232 var title = document.createElement('div'); | 201 var title = document.createElement('div'); |
(...skipping 14 matching lines...) Expand all Loading... |
247 '</div>\n'; | 216 '</div>\n'; |
248 | 217 |
249 document.body.appendChild(container); | 218 document.body.appendChild(container); |
250 }) | 219 }) |
251 }) | 220 }) |
252 }) | 221 }) |
253 }) | 222 }) |
254 </script> | 223 </script> |
255 </body> | 224 </body> |
256 </html> | 225 </html> |
OLD | NEW |