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