| 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 220 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 258 'child1': [10, 80], | 255 'child1': [10, 80], |
| 259 'child2': [0, 80], | 256 'child2': [0, 80], |
| 260 }, | 257 }, |
| 261 'space-around': { | 258 'space-around': { |
| 262 'child1': [10, 40], | 259 'child1': [10, 40], |
| 263 'child2': [0, 40], | 260 'child2': [0, 40], |
| 264 }, | 261 }, |
| 265 }, | 262 }, |
| 266 }, | 263 }, |
| 267 }, | 264 }, |
| 268 'horizontal-bt': { | |
| 269 'row': { | |
| 270 'ltr': { | |
| 271 'flex-start': { | |
| 272 'child1': [0, 10], | |
| 273 'child2': [0, 0], | |
| 274 }, | |
| 275 'flex-end': { | |
| 276 'child1': [80, 10], | |
| 277 'child2': [80, 0], | |
| 278 }, | |
| 279 'center': { | |
| 280 'child1': [40, 10], | |
| 281 'child2': [40, 0], | |
| 282 }, | |
| 283 'space-between': { | |
| 284 'child1': [0, 10], | |
| 285 'child2': [0, 0], | |
| 286 }, | |
| 287 'space-around': { | |
| 288 'child1': [40, 10], | |
| 289 'child2': [40, 0], | |
| 290 }, | |
| 291 }, | |
| 292 'rtl': { | |
| 293 'flex-start': { | |
| 294 'child1': [40, 10], | |
| 295 'child2': [70, 0], | |
| 296 }, | |
| 297 'flex-end': { | |
| 298 'child1': [-40, 10], | |
| 299 'child2': [-10, 0], | |
| 300 }, | |
| 301 'center': { | |
| 302 'child1': [0, 10], | |
| 303 'child2': [30, 0], | |
| 304 }, | |
| 305 'space-between': { | |
| 306 'child1': [40, 10], | |
| 307 'child2': [70, 0], | |
| 308 }, | |
| 309 'space-around': { | |
| 310 'child1': [0, 10], | |
| 311 'child2': [30, 0], | |
| 312 }, | |
| 313 }, | |
| 314 }, | |
| 315 'column': { | |
| 316 'ltr': { | |
| 317 'flex-start': { | |
| 318 'child1': [0, 40], | |
| 319 'child2': [0, 70], | |
| 320 }, | |
| 321 'flex-end': { | |
| 322 'child1': [0, -40], | |
| 323 'child2': [0, -10], | |
| 324 }, | |
| 325 'center': { | |
| 326 'child1': [0, 0], | |
| 327 'child2': [0, 30], | |
| 328 }, | |
| 329 'space-between': { | |
| 330 'child1': [0, 40], | |
| 331 'child2': [0, 70], | |
| 332 }, | |
| 333 'space-around': { | |
| 334 'child1': [0, 0], | |
| 335 'child2': [0, 30], | |
| 336 }, | |
| 337 }, | |
| 338 'rtl': { | |
| 339 'flex-start': { | |
| 340 'child1': [10, 40], | |
| 341 'child2': [0, 70], | |
| 342 }, | |
| 343 'flex-end': { | |
| 344 'child1': [10, -40], | |
| 345 'child2': [0, -10], | |
| 346 }, | |
| 347 'center': { | |
| 348 'child1': [10, 0], | |
| 349 'child2': [0, 30], | |
| 350 }, | |
| 351 'space-between': { | |
| 352 'child1': [10, 40], | |
| 353 'child2': [0, 70], | |
| 354 }, | |
| 355 'space-around': { | |
| 356 'child1': [10, 0], | |
| 357 'child2': [0, 30], | |
| 358 }, | |
| 359 }, | |
| 360 }, | |
| 361 'row-reverse': { | |
| 362 'ltr': { | |
| 363 'flex-start': { | |
| 364 'child1': [80, 10], | |
| 365 'child2': [80, 0], | |
| 366 }, | |
| 367 'flex-end': { | |
| 368 'child1': [0, 10], | |
| 369 'child2': [0, 0], | |
| 370 }, | |
| 371 'center': { | |
| 372 'child1': [40, 10], | |
| 373 'child2': [40, 0], | |
| 374 }, | |
| 375 'space-between': { | |
| 376 'child1': [80, 10], | |
| 377 'child2': [80, 0], | |
| 378 }, | |
| 379 'space-around': { | |
| 380 'child1': [40, 10], | |
| 381 'child2': [40, 0], | |
| 382 }, | |
| 383 }, | |
| 384 'rtl': { | |
| 385 'flex-start': { | |
| 386 'child1': [-40, 10], | |
| 387 'child2': [-10, 0], | |
| 388 }, | |
| 389 'flex-end': { | |
| 390 'child1': [40, 10], | |
| 391 'child2': [70, 0], | |
| 392 }, | |
| 393 'center': { | |
| 394 'child1': [0, 10], | |
| 395 'child2': [30, 0], | |
| 396 }, | |
| 397 'space-between': { | |
| 398 'child1': [-40, 10], | |
| 399 'child2': [-10, 0], | |
| 400 }, | |
| 401 'space-around': { | |
| 402 'child1': [0, 10], | |
| 403 'child2': [30, 0], | |
| 404 }, | |
| 405 }, | |
| 406 }, | |
| 407 'column-reverse': { | |
| 408 'ltr': { | |
| 409 'flex-start': { | |
| 410 'child1': [0, -40], | |
| 411 'child2': [0, -10], | |
| 412 }, | |
| 413 'flex-end': { | |
| 414 'child1': [0, 40], | |
| 415 'child2': [0, 70], | |
| 416 }, | |
| 417 'center': { | |
| 418 'child1': [0, 0], | |
| 419 'child2': [0, 30], | |
| 420 }, | |
| 421 'space-between': { | |
| 422 'child1': [0, -40], | |
| 423 'child2': [0, -10], | |
| 424 }, | |
| 425 'space-around': { | |
| 426 'child1': [0, 0], | |
| 427 'child2': [0, 30], | |
| 428 }, | |
| 429 }, | |
| 430 'rtl': { | |
| 431 'flex-start': { | |
| 432 'child1': [10, -40], | |
| 433 'child2': [0, -10], | |
| 434 }, | |
| 435 'flex-end': { | |
| 436 'child1': [10, 40], | |
| 437 'child2': [0, 70], | |
| 438 }, | |
| 439 'center': { | |
| 440 'child1': [10, 0], | |
| 441 'child2': [0, 30], | |
| 442 }, | |
| 443 'space-between': { | |
| 444 'child1': [10, -40], | |
| 445 'child2': [0, -10], | |
| 446 }, | |
| 447 'space-around': { | |
| 448 'child1': [10, 0], | |
| 449 'child2': [0, 30], | |
| 450 }, | |
| 451 }, | |
| 452 }, | |
| 453 }, | |
| 454 'vertical-rl': { | 265 'vertical-rl': { |
| 455 'row': { | 266 'row': { |
| 456 'ltr': { | 267 'ltr': { |
| 457 'flex-start': { | 268 'flex-start': { |
| 458 'child1': [10, 0], | 269 'child1': [10, 0], |
| 459 'child2': [0, 0], | 270 'child2': [0, 0], |
| 460 }, | 271 }, |
| 461 'flex-end': { | 272 'flex-end': { |
| 462 'child1': [10, 80], | 273 'child1': [10, 80], |
| 463 'child2': [0, 80], | 274 'child2': [0, 80], |
| (...skipping 354 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 818 }, | 629 }, |
| 819 'space-around': { | 630 'space-around': { |
| 820 'child1': [40, 10], | 631 'child1': [40, 10], |
| 821 'child2': [40, 0], | 632 'child2': [40, 0], |
| 822 }, | 633 }, |
| 823 }, | 634 }, |
| 824 }, | 635 }, |
| 825 }, | 636 }, |
| 826 }; | 637 }; |
| 827 | 638 |
| 828 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 639 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 829 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 640 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 830 var directions = ['ltr', 'rtl']; | 641 var directions = ['ltr', 'rtl']; |
| 831 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; | 642 var justifyContents = ['flex-start', 'flex-end', 'center', 'space-between', 'spa
ce-around']; |
| 832 | 643 |
| 833 function mainAxisDirection(writingMode, flexDirection) | 644 function mainAxisDirection(writingMode, flexDirection) |
| 834 { | 645 { |
| 835 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) | 646 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) |
| 836 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) | 647 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) |
| 837 return 'width'; | 648 return 'width'; |
| 838 return 'height'; | 649 return 'height'; |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 877 | 688 |
| 878 document.body.appendChild(flexbox); | 689 document.body.appendChild(flexbox); |
| 879 }) | 690 }) |
| 880 }) | 691 }) |
| 881 }) | 692 }) |
| 882 }) | 693 }) |
| 883 | 694 |
| 884 </script> | 695 </script> |
| 885 | 696 |
| 886 </body> | 697 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1419813004:
Remove the "horizontal-bt" value from -webkit-writing-mode (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master