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