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 { |
11 display: flex; | 11 display: flex; |
12 background-color: grey; | 12 background-color: grey; |
13 width: 100px; | 13 width: 100px; |
14 height: 100px; | 14 height: 100px; |
15 } | 15 } |
16 .title { | 16 .title { |
17 margin-top: 1em; | 17 margin-top: 1em; |
18 } | 18 } |
19 .ltr { | 19 .ltr { |
20 direction: ltr; | 20 direction: ltr; |
21 } | 21 } |
22 .rtl { | 22 .rtl { |
23 direction: rtl; | 23 direction: rtl; |
24 } | 24 } |
25 .horizontal-tb { | 25 .horizontal-tb { |
26 -webkit-writing-mode: horizontal-tb; | 26 -webkit-writing-mode: horizontal-tb; |
27 } | 27 } |
28 .horizontal-bt { | |
29 -webkit-writing-mode: horizontal-bt; | |
30 } | |
31 .vertical-rl { | 28 .vertical-rl { |
32 -webkit-writing-mode: vertical-rl; | 29 -webkit-writing-mode: vertical-rl; |
33 } | 30 } |
34 .vertical-lr { | 31 .vertical-lr { |
35 -webkit-writing-mode: vertical-lr; | 32 -webkit-writing-mode: vertical-lr; |
36 } | 33 } |
37 .row { | 34 .row { |
38 flex-flow: row; | 35 flex-flow: row; |
39 } | 36 } |
40 .row-reverse { | 37 .row-reverse { |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
99 column: [20, 70, 118, 23], | 96 column: [20, 70, 118, 23], |
100 row: [90, 20, 48, 23] | 97 row: [90, 20, 48, 23] |
101 }, | 98 }, |
102 ltr : { | 99 ltr : { |
103 container: physicalContainerSize, | 100 container: physicalContainerSize, |
104 flexbox: physicalFlexBoxPosition, | 101 flexbox: physicalFlexBoxPosition, |
105 column: [20, 70, 48, 23], | 102 column: [20, 70, 48, 23], |
106 row: [90, 20, 48, 23] | 103 row: [90, 20, 48, 23] |
107 } | 104 } |
108 }, | 105 }, |
109 'horizontal-bt': { | |
110 rtl: { | |
111 container: physicalContainerSize, | |
112 flexbox: physicalFlexBoxPosition, | |
113 column: [20, 70, 118, 23], | |
114 row: [90, 20, 48, 73] | |
115 }, | |
116 ltr : { | |
117 container: physicalContainerSize, | |
118 flexbox: physicalFlexBoxPosition, | |
119 column: [20, 70, 48, 23], | |
120 row: [90, 20, 48, 73] | |
121 } | |
122 }, | |
123 'vertical-lr': { | 106 'vertical-lr': { |
124 rtl: { | 107 rtl: { |
125 container: physicalContainerSize, | 108 container: physicalContainerSize, |
126 flexbox: physicalFlexBoxPosition, | 109 flexbox: physicalFlexBoxPosition, |
127 column: [90, 20, 48, 73], | 110 column: [90, 20, 48, 73], |
128 row: [20, 70, 48, 23] | 111 row: [20, 70, 48, 23] |
129 }, | 112 }, |
130 ltr : { | 113 ltr : { |
131 container: physicalContainerSize, | 114 container: physicalContainerSize, |
132 flexbox: physicalFlexBoxPosition, | 115 flexbox: physicalFlexBoxPosition, |
(...skipping 25 matching lines...) Expand all Loading... |
158 column: [20, 70, 92, 23], | 141 column: [20, 70, 92, 23], |
159 row: [90, 20, 22, 23] | 142 row: [90, 20, 22, 23] |
160 }, | 143 }, |
161 ltr : { | 144 ltr : { |
162 container: [160, 140], | 145 container: [160, 140], |
163 flexbox: [40, 10], | 146 flexbox: [40, 10], |
164 column: [20, 70, 48, 23], | 147 column: [20, 70, 48, 23], |
165 row: [90, 20, 48, 23] | 148 row: [90, 20, 48, 23] |
166 } | 149 } |
167 }, | 150 }, |
168 'horizontal-bt': { | |
169 rtl: { | |
170 container: [160, 140], | |
171 flexbox: [20, 30], | |
172 column: [20, 70, 92, 47], | |
173 row: [90, 20, 22, 97] | |
174 }, | |
175 ltr : { | |
176 container: [160, 140], | |
177 flexbox: [40, 30], | |
178 column: [20, 70, 48, 47], | |
179 row: [90, 20, 48, 97] | |
180 } | |
181 }, | |
182 'vertical-lr': { | 151 'vertical-lr': { |
183 rtl: { | 152 rtl: { |
184 container: [140, 160], | 153 container: [140, 160], |
185 flexbox: [10, 20], | 154 flexbox: [10, 20], |
186 column: [70, 20, 23, 92], | 155 column: [70, 20, 23, 92], |
187 row: [20, 90, 23, 22] | 156 row: [20, 90, 23, 22] |
188 }, | 157 }, |
189 ltr : { | 158 ltr : { |
190 container: [140, 160], | 159 container: [140, 160], |
191 flexbox: [10, 40], | 160 flexbox: [10, 40], |
(...skipping 10 matching lines...) Expand all Loading... |
202 }, | 171 }, |
203 ltr : { | 172 ltr : { |
204 container: [140, 160], | 173 container: [140, 160], |
205 flexbox: [30, 40], | 174 flexbox: [30, 40], |
206 column: [70, 20, 47, 48], | 175 column: [70, 20, 47, 48], |
207 row: [20, 90, 97, 48] | 176 row: [20, 90, 97, 48] |
208 } | 177 } |
209 } | 178 } |
210 } | 179 } |
211 | 180 |
212 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 181 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
213 var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse']; | 182 var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse']; |
214 var directions = ['rtl', 'ltr']; | 183 var directions = ['rtl', 'ltr']; |
215 var marginTypes = ['physical', 'logical']; | 184 var marginTypes = ['physical', 'logical']; |
216 | 185 |
217 writingModes.forEach(function(writingMode) { | 186 writingModes.forEach(function(writingMode) { |
218 flexFlows.forEach(function(flexFlow) { | 187 flexFlows.forEach(function(flexFlow) { |
219 directions.forEach(function(direction) { | 188 directions.forEach(function(direction) { |
220 marginTypes.forEach(function(marginType) { | 189 marginTypes.forEach(function(marginType) { |
221 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; | 190 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; |
222 var title = document.createElement('div'); | 191 var title = document.createElement('div'); |
(...skipping 17 matching lines...) Expand all Loading... |
240 '</div>'; | 209 '</div>'; |
241 | 210 |
242 document.body.appendChild(container); | 211 document.body.appendChild(container); |
243 }) | 212 }) |
244 }) | 213 }) |
245 }) | 214 }) |
246 }) | 215 }) |
247 </script> | 216 </script> |
248 </body> | 217 </body> |
249 </html> | 218 </html> |
OLD | NEW |