| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 body { | 4 body { |
| 5 margin: 0; | 5 margin: 0; |
| 6 } | 6 } |
| 7 | 7 |
| 8 .title { | 8 .title { |
| 9 margin-top: 1em; | 9 margin-top: 1em; |
| 10 } | 10 } |
| 11 | 11 |
| 12 .flexbox { | 12 .flexbox { |
| 13 display: flex; | 13 display: flex; |
| 14 background-color: #aaa; | 14 background-color: #aaa; |
| 15 position: relative; | 15 position: relative; |
| 16 } | 16 } |
| 17 .flexbox div { | 17 .flexbox div { |
| 18 border: 0; | 18 border: 0; |
| 19 flex: none; | 19 flex: none; |
| 20 } | 20 } |
| 21 | 21 |
| 22 .horizontal-tb { | 22 .horizontal-tb { |
| 23 -webkit-writing-mode: horizontal-tb; | 23 -webkit-writing-mode: horizontal-tb; |
| 24 } | 24 } |
| 25 .horizontal-bt { | |
| 26 -webkit-writing-mode: horizontal-bt; | |
| 27 } | |
| 28 .vertical-rl { | 25 .vertical-rl { |
| 29 -webkit-writing-mode: vertical-rl; | 26 -webkit-writing-mode: vertical-rl; |
| 30 } | 27 } |
| 31 .vertical-lr { | 28 .vertical-lr { |
| 32 -webkit-writing-mode: vertical-lr; | 29 -webkit-writing-mode: vertical-lr; |
| 33 } | 30 } |
| 34 | 31 |
| 35 .row { | 32 .row { |
| 36 flex-flow: row; | 33 flex-flow: row; |
| 37 } | 34 } |
| (...skipping 29 matching lines...) Expand all Loading... |
| 67 <body onload="checkLayout('.flexbox')"> | 64 <body onload="checkLayout('.flexbox')"> |
| 68 | 65 |
| 69 <script> | 66 <script> |
| 70 function getFlexDirection(flexFlow, writingMode) | 67 function getFlexDirection(flexFlow, writingMode) |
| 71 { | 68 { |
| 72 if (writingMode.indexOf('horizontal') != -1) | 69 if (writingMode.indexOf('horizontal') != -1) |
| 73 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height'; | 70 return (flexFlow.indexOf('row') != -1) ? 'width' : 'height'; |
| 74 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width'; | 71 return (flexFlow.indexOf('row') != -1) ? 'height' : 'width'; |
| 75 } | 72 } |
| 76 | 73 |
| 77 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 74 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 78 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 75 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 79 var directions = ['ltr', 'rtl']; | 76 var directions = ['ltr', 'rtl']; |
| 80 | 77 |
| 81 var expectations = { | 78 var expectations = { |
| 82 'horizontal-tb': { | 79 'horizontal-tb': { |
| 83 row: { | 80 row: { |
| 84 ltr: [ | 81 ltr: [ |
| 85 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | 82 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, |
| 86 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | 83 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, |
| 87 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | 84 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 170 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | 167 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, |
| 171 { offsets: [120, 80, 0] }, | 168 { offsets: [120, 80, 0] }, |
| 172 { offsets: [80, 40, 0] }, | 169 { offsets: [80, 40, 0] }, |
| 173 { offsets: [80, 0, 0] }, | 170 { offsets: [80, 0, 0] }, |
| 174 { offsets: [90, 50, 10], crossAxisOffset: 60 }, | 171 { offsets: [90, 50, 10], crossAxisOffset: 60 }, |
| 175 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | 172 { offsets: [50, 50, 10], crossAxisOffset: 60 }, |
| 176 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | 173 { offsets: [50, 10, 10], crossAxisOffset: 60 }, |
| 177 ], | 174 ], |
| 178 }, | 175 }, |
| 179 }, | 176 }, |
| 180 'horizontal-bt': { | |
| 181 // This matches the horizontal-tb values above. | |
| 182 row: { | |
| 183 ltr: [ | |
| 184 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | |
| 185 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | |
| 186 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | |
| 187 { offsets: [0, 0, 560] }, | |
| 188 { offsets: [0, 560, 560] }, | |
| 189 { offsets: [0, 560, 600] }, | |
| 190 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
| 191 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
| 192 { offsets: [10, 50, 90], crossAxisOffset: 60 }, | |
| 193 ], | |
| 194 rtl: [ | |
| 195 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, | |
| 196 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, | |
| 197 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, | |
| 198 { offsets: [580, 560, 0] }, | |
| 199 { offsets: [560, 20, 0] }, | |
| 200 { offsets: [560, 0, -20] }, | |
| 201 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
| 202 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
| 203 { offsets: [50, 10, -30], crossAxisOffset: 60 }, | |
| 204 ], | |
| 205 }, | |
| 206 // horizontal-bt flips the main axis direction so the offsets are differ
ent from horizontal-tb. | |
| 207 column: { | |
| 208 ltr: [ | |
| 209 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, | |
| 210 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, | |
| 211 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | |
| 212 { offsets: [100, 80, 0] }, | |
| 213 { offsets: [80, 20, 0] }, | |
| 214 { offsets: [80, 0, -20] }, | |
| 215 { offsets: [50, 50, 10], crossAxisOffset: 0 }, | |
| 216 { offsets: [50, 10, 10], crossAxisOffset: 0 }, | |
| 217 { offsets: [50, 10, -30], crossAxisOffset: 0 }, | |
| 218 ], | |
| 219 rtl: [ | |
| 220 { offsets: [120, 72, 0], sizes: [0, 48, 72] }, | |
| 221 { offsets: [90, 90, 0], sizes: [30, 0, 90] }, | |
| 222 { offsets: [80, 0, 0], sizes: [40, 80, 0] }, | |
| 223 { offsets: [100, 80, 0] }, | |
| 224 { offsets: [80, 20, 0] }, | |
| 225 { offsets: [80, 0, -20] }, | |
| 226 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
| 227 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
| 228 { offsets: [50, 10, -30], crossAxisOffset: 60 }, | |
| 229 ], | |
| 230 }, | |
| 231 'row-reverse': { | |
| 232 ltr: [ | |
| 233 { offsets: [600, 360, 0], sizes: [0, 240, 360] }, | |
| 234 { offsets: [450, 450, 0], sizes: [150, 0, 450] }, | |
| 235 { offsets: [400, 0, 0], sizes: [200, 400, 0] }, | |
| 236 { offsets: [600, 560, 0] }, | |
| 237 { offsets: [560, 40, 0] }, | |
| 238 { offsets: [560, 0, 0] }, | |
| 239 { offsets: [90, 50, 10], crossAxisOffset: 60 }, | |
| 240 { offsets: [50, 50, 10], crossAxisOffset: 60 }, | |
| 241 { offsets: [50, 10, 10], crossAxisOffset: 60 }, | |
| 242 ], | |
| 243 rtl: [ | |
| 244 { offsets: [0, 0, 240], sizes: [0, 240, 360] }, | |
| 245 { offsets: [0, 150, 150], sizes: [150, 0, 450] }, | |
| 246 { offsets: [0, 200, 600], sizes: [200, 400, 0] }, | |
| 247 { offsets: [-20, 0, 560] }, | |
| 248 { offsets: [0, 540, 560] }, | |
| 249 { offsets: [0, 560, 580] }, | |
| 250 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, | |
| 251 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
| 252 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
| 253 ], | |
| 254 }, | |
| 255 'column-reverse': { | |
| 256 ltr: [ | |
| 257 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | |
| 258 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | |
| 259 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | |
| 260 { offsets: [-20, 0, 80] }, | |
| 261 { offsets: [0, 60, 80] }, | |
| 262 { offsets: [0, 80, 100] }, | |
| 263 { offsets: [-30, 10, 50], crossAxisOffset: 0 }, | |
| 264 { offsets: [10, 10, 50], crossAxisOffset: 0 }, | |
| 265 { offsets: [10, 50, 50], crossAxisOffset: 0 }, | |
| 266 ], | |
| 267 rtl: [ | |
| 268 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | |
| 269 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | |
| 270 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | |
| 271 { offsets: [-20, 0, 80] }, | |
| 272 { offsets: [0, 60, 80] }, | |
| 273 { offsets: [0, 80, 100] }, | |
| 274 { offsets: [-30, 10, 50], crossAxisOffset: 60 }, | |
| 275 { offsets: [10, 10, 50], crossAxisOffset: 60 }, | |
| 276 { offsets: [10, 50, 50], crossAxisOffset: 60 }, | |
| 277 ], | |
| 278 }, | |
| 279 }, | |
| 280 'vertical-rl': { | 177 'vertical-rl': { |
| 281 row: { | 178 row: { |
| 282 // The same as horizontal-tb + column. | 179 // The same as horizontal-tb + column. |
| 283 ltr: [ | 180 ltr: [ |
| 284 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, | 181 { offsets: [0, 0, 48], sizes: [0, 48, 72] }, |
| 285 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, | 182 { offsets: [0, 30, 30], sizes: [30, 0, 90] }, |
| 286 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, | 183 { offsets: [0, 40, 120], sizes: [40, 80, 0] }, |
| 287 { offsets: [0, 0, 80] }, | 184 { offsets: [0, 0, 80] }, |
| 288 { offsets: [0, 80, 80] }, | 185 { offsets: [0, 80, 80] }, |
| 289 { offsets: [0, 80, 120] }, | 186 { offsets: [0, 80, 120] }, |
| (...skipping 303 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 593 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction,
flexDirection); | 490 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction,
flexDirection); |
| 594 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec
tion); | 491 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec
tion); |
| 595 }) | 492 }) |
| 596 }) | 493 }) |
| 597 }) | 494 }) |
| 598 | 495 |
| 599 </script> | 496 </script> |
| 600 | 497 |
| 601 </body> | 498 </body> |
| 602 </html> | 499 </html> |
| OLD | NEW |