| 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 { |
| 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 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 98 childrow: [90, 20, 48, 23] | 95 childrow: [90, 20, 48, 23] |
| 99 }, | 96 }, |
| 100 ltr : { | 97 ltr : { |
| 101 containersize: horizontalContainerSize, | 98 containersize: horizontalContainerSize, |
| 102 flexitemcolumn: [30, 100, 40, 10], | 99 flexitemcolumn: [30, 100, 40, 10], |
| 103 flexitemrow: [100, 50, 40, 10], | 100 flexitemrow: [100, 50, 40, 10], |
| 104 childcolumn: [20, 20, 48, 23], | 101 childcolumn: [20, 20, 48, 23], |
| 105 childrow: [90, 20, 48, 23] | 102 childrow: [90, 20, 48, 23] |
| 106 } | 103 } |
| 107 }, | 104 }, |
| 108 'horizontal-bt': { | |
| 109 rtl: { | |
| 110 containersize: horizontalContainerSize, | |
| 111 flexitemcolumn: [30, 100, 110, 10], | |
| 112 flexitemrow: [100, 50, 40, 60], | |
| 113 childcolumn: [20, 20, 118, 73], | |
| 114 childrow: [90, 20, 48, 73] | |
| 115 }, | |
| 116 ltr : { | |
| 117 containersize: horizontalContainerSize, | |
| 118 flexitemcolumn: [30, 100, 40, 10], | |
| 119 flexitemrow: [100, 50, 40, 60], | |
| 120 childcolumn: [20, 20, 48, 73], | |
| 121 childrow: [90, 20, 48, 73] | |
| 122 } | |
| 123 }, | |
| 124 'vertical-lr': { | 105 'vertical-lr': { |
| 125 rtl: { | 106 rtl: { |
| 126 containersize: horizontalContainerSize, | 107 containersize: horizontalContainerSize, |
| 127 flexitemcolumn: [100, 50, 40, 60], | 108 flexitemcolumn: [100, 50, 40, 60], |
| 128 flexitemrow: [30, 100, 40, 10], | 109 flexitemrow: [30, 100, 40, 10], |
| 129 childcolumn: [20, 20, 48, 73], | 110 childcolumn: [20, 20, 48, 73], |
| 130 childrow: [20, 70, 48, 23] | 111 childrow: [20, 70, 48, 23] |
| 131 }, | 112 }, |
| 132 ltr : { | 113 ltr : { |
| 133 containersize: horizontalContainerSize, | 114 containersize: horizontalContainerSize, |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 165 childrow: [90, 20, 22, 23] | 146 childrow: [90, 20, 22, 23] |
| 166 }, | 147 }, |
| 167 ltr : { | 148 ltr : { |
| 168 containersize: horizontalContainerSize, | 149 containersize: horizontalContainerSize, |
| 169 flexitemcolumn: [30, 100, 40, 10], | 150 flexitemcolumn: [30, 100, 40, 10], |
| 170 flexitemrow: [100, 50, 40, 10], | 151 flexitemrow: [100, 50, 40, 10], |
| 171 childcolumn: [20, 20, 48, 23], | 152 childcolumn: [20, 20, 48, 23], |
| 172 childrow: [90, 20, 48, 23] | 153 childrow: [90, 20, 48, 23] |
| 173 } | 154 } |
| 174 }, | 155 }, |
| 175 'horizontal-bt': { | |
| 176 rtl: { | |
| 177 containersize: horizontalContainerSize, | |
| 178 flexitemcolumn: [30, 100, 90, 30], | |
| 179 flexitemrow: [100, 50, 20, 80], | |
| 180 childcolumn: [20, 20, 92, 97], | |
| 181 childrow: [90, 20, 22, 97] | |
| 182 }, | |
| 183 ltr : { | |
| 184 containersize: horizontalContainerSize, | |
| 185 flexitemcolumn: [30, 100, 40, 30], | |
| 186 flexitemrow: [100, 50, 40, 80], | |
| 187 childcolumn: [20, 20, 48, 97], | |
| 188 childrow: [90, 20, 48, 97] | |
| 189 } | |
| 190 }, | |
| 191 'vertical-lr': { | 156 'vertical-lr': { |
| 192 rtl: { | 157 rtl: { |
| 193 containersize: verticalContainerSize, | 158 containersize: verticalContainerSize, |
| 194 flexitemcolumn: [100, 30, 10, 90], | 159 flexitemcolumn: [100, 30, 10, 90], |
| 195 flexitemrow: [50, 100, 10, 20], | 160 flexitemrow: [50, 100, 10, 20], |
| 196 childcolumn: [20, 20, 23, 92], | 161 childcolumn: [20, 20, 23, 92], |
| 197 childrow: [20, 90, 23, 22] | 162 childrow: [20, 90, 23, 22] |
| 198 }, | 163 }, |
| 199 ltr : { | 164 ltr : { |
| 200 containersize: verticalContainerSize, | 165 containersize: verticalContainerSize, |
| (...skipping 14 matching lines...) Expand all Loading... |
| 215 ltr : { | 180 ltr : { |
| 216 containersize: verticalContainerSize, | 181 containersize: verticalContainerSize, |
| 217 flexitemcolumn: [100, 30, 30, 40], | 182 flexitemcolumn: [100, 30, 30, 40], |
| 218 flexitemrow: [50, 100, 80, 40], | 183 flexitemrow: [50, 100, 80, 40], |
| 219 childcolumn: [20, 20, 97, 48], | 184 childcolumn: [20, 20, 97, 48], |
| 220 childrow: [20, 90, 97, 48] | 185 childrow: [20, 90, 97, 48] |
| 221 } | 186 } |
| 222 } | 187 } |
| 223 } | 188 } |
| 224 | 189 |
| 225 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 190 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| 226 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 191 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 227 var directions = ['rtl', 'ltr']; | 192 var directions = ['rtl', 'ltr']; |
| 228 var marginTypes = ['physical', 'logical']; | 193 var marginTypes = ['physical', 'logical']; |
| 229 | 194 |
| 230 writingModes.forEach(function(writingMode) { | 195 writingModes.forEach(function(writingMode) { |
| 231 flexFlows.forEach(function(flexFlow) { | 196 flexFlows.forEach(function(flexFlow) { |
| 232 directions.forEach(function(direction) { | 197 directions.forEach(function(direction) { |
| 233 marginTypes.forEach(function(marginType) { | 198 marginTypes.forEach(function(marginType) { |
| 234 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; | 199 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xFlow + ' ' + marginType; |
| 235 var title = document.createElement('div'); | 200 var title = document.createElement('div'); |
| (...skipping 16 matching lines...) Expand all Loading... |
| 252 '</div>\n'; | 217 '</div>\n'; |
| 253 | 218 |
| 254 document.body.appendChild(container); | 219 document.body.appendChild(container); |
| 255 }) | 220 }) |
| 256 }) | 221 }) |
| 257 }) | 222 }) |
| 258 }) | 223 }) |
| 259 </script> | 224 </script> |
| 260 </body> | 225 </body> |
| 261 </html> | 226 </html> |
| OLD | NEW |