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