| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 position: relative; | 5 position: relative; |
| 6 display: flex; | 6 display: flex; |
| 7 background-color: grey; | 7 background-color: grey; |
| 8 max-width: 600px; | 8 max-width: 600px; |
| 9 align-content: flex-start; | 9 align-content: flex-start; |
| 10 } | 10 } |
| 11 .title { | 11 .title { |
| 12 margin-top: 1em; | 12 margin-top: 1em; |
| 13 } | 13 } |
| 14 .ltr { | 14 .ltr { |
| 15 direction: ltr; | 15 direction: ltr; |
| 16 } | 16 } |
| 17 .rtl { | 17 .rtl { |
| 18 direction: rtl; | 18 direction: rtl; |
| 19 } | 19 } |
| 20 .horizontal-tb { | 20 .horizontal-tb { |
| 21 -webkit-writing-mode: horizontal-tb; | 21 -webkit-writing-mode: horizontal-tb; |
| 22 } | 22 } |
| 23 .horizontal-bt { | |
| 24 -webkit-writing-mode: horizontal-bt; | |
| 25 } | |
| 26 .vertical-rl { | 23 .vertical-rl { |
| 27 -webkit-writing-mode: vertical-rl; | 24 -webkit-writing-mode: vertical-rl; |
| 28 } | 25 } |
| 29 .vertical-lr { | 26 .vertical-lr { |
| 30 -webkit-writing-mode: vertical-lr; | 27 -webkit-writing-mode: vertical-lr; |
| 31 } | 28 } |
| 32 .row { | 29 .row { |
| 33 flex-flow: row; | 30 flex-flow: row; |
| 34 } | 31 } |
| 35 .row-reverse { | 32 .row-reverse { |
| (...skipping 351 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 387 'child9': [10, 10, 40, 50], | 384 'child9': [10, 10, 40, 50], |
| 388 'child10': [10, 10, 50, 40], | 385 'child10': [10, 10, 50, 40], |
| 389 'child11': [10, 10, 30, 30], | 386 'child11': [10, 10, 30, 30], |
| 390 'child12': [10, 10, 30, 20], | 387 'child12': [10, 10, 30, 20], |
| 391 'child13': [30, 10, 30, 10], | 388 'child13': [30, 10, 30, 10], |
| 392 'child14': [30, 10, 30, 0], | 389 'child14': [30, 10, 30, 0], |
| 393 }, | 390 }, |
| 394 }, | 391 }, |
| 395 }, | 392 }, |
| 396 }, | 393 }, |
| 397 'horizontal-bt': { | |
| 398 'row': { | |
| 399 'ltr': { | |
| 400 'wrap': { | |
| 401 'flexbox': [70, 60], | |
| 402 'child1': [10, 10, 0, 50], | |
| 403 'child2': [10, 10, 10, 40], | |
| 404 'child3': [10, 10, 20, 30], | |
| 405 'child4': [10, 10, 30, 45], | |
| 406 'child5': [10, 10, 40, 45], | |
| 407 'child6': [10, 30, 50, 30], | |
| 408 'child7': [10, 30, 60, 30], | |
| 409 'child8': [10, 10, 0, 20], | |
| 410 'child9': [10, 10, 10, 10], | |
| 411 'child10': [10, 10, 20, 0], | |
| 412 'child11': [10, 10, 30, 15], | |
| 413 'child12': [10, 10, 40, 15], | |
| 414 'child13': [10, 30, 50, 0], | |
| 415 'child14': [10, 30, 60, 0], | |
| 416 }, | |
| 417 'wrap-reverse': { | |
| 418 'flexbox': [70, 60], | |
| 419 'child1': [10, 10, 0, 0], | |
| 420 'child2': [10, 10, 10, 10], | |
| 421 'child3': [10, 10, 20, 20], | |
| 422 'child4': [10, 10, 30, 0], | |
| 423 'child5': [10, 10, 40, 0], | |
| 424 'child6': [10, 30, 50, 0], | |
| 425 'child7': [10, 30, 60, 0], | |
| 426 'child8': [10, 10, 0, 30], | |
| 427 'child9': [10, 10, 10, 40], | |
| 428 'child10': [10, 10, 20, 50], | |
| 429 'child11': [10, 10, 30, 30], | |
| 430 'child12': [10, 10, 40, 30], | |
| 431 'child13': [10, 30, 50, 30], | |
| 432 'child14': [10, 30, 60, 30], | |
| 433 }, | |
| 434 }, | |
| 435 'rtl': { | |
| 436 'wrap': { | |
| 437 'flexbox': [70, 60], | |
| 438 'child1': [10, 10, 60, 50], | |
| 439 'child2': [10, 10, 50, 40], | |
| 440 'child3': [10, 10, 40, 30], | |
| 441 'child4': [10, 10, 30, 45], | |
| 442 'child5': [10, 10, 20, 45], | |
| 443 'child6': [10, 30, 10, 30], | |
| 444 'child7': [10, 30, 0, 30], | |
| 445 'child8': [10, 10, 60, 20], | |
| 446 'child9': [10, 10, 50, 10], | |
| 447 'child10': [10, 10, 40, 0], | |
| 448 'child11': [10, 10, 30, 15], | |
| 449 'child12': [10, 10, 20, 15], | |
| 450 'child13': [10, 30, 10, 0], | |
| 451 'child14': [10, 30, 0, 0], | |
| 452 }, | |
| 453 'wrap-reverse': { | |
| 454 'flexbox': [70, 60], | |
| 455 'child1': [10, 10, 60, 0], | |
| 456 'child2': [10, 10, 50, 10], | |
| 457 'child3': [10, 10, 40, 20], | |
| 458 'child4': [10, 10, 30, 0], | |
| 459 'child5': [10, 10, 20, 0], | |
| 460 'child6': [10, 30, 10, 0], | |
| 461 'child7': [10, 30, 0, 0], | |
| 462 'child8': [10, 10, 60, 30], | |
| 463 'child9': [10, 10, 50, 40], | |
| 464 'child10': [10, 10, 40, 50], | |
| 465 'child11': [10, 10, 30, 30], | |
| 466 'child12': [10, 10, 20, 30], | |
| 467 'child13': [10, 30, 10, 30], | |
| 468 'child14': [10, 30, 0, 30], | |
| 469 }, | |
| 470 }, | |
| 471 }, | |
| 472 'column': { | |
| 473 'ltr': { | |
| 474 'wrap': { | |
| 475 'flexbox': [600, 70], | |
| 476 'child1': [10, 10, 0, 60], | |
| 477 'child2': [10, 10, 10, 50], | |
| 478 'child3': [10, 10, 20, 40], | |
| 479 'child4': [10, 10, 0, 30], | |
| 480 'child5': [10, 10, 5, 20], | |
| 481 'child6': [30, 10, 0, 10], | |
| 482 'child7': [30, 10, 0, 0], | |
| 483 'child8': [10, 10, 30, 60], | |
| 484 'child9': [10, 10, 40, 50], | |
| 485 'child10': [10, 10, 50, 40], | |
| 486 'child11': [10, 10, 30, 30], | |
| 487 'child12': [10, 10, 35, 20], | |
| 488 'child13': [30, 10, 30, 10], | |
| 489 'child14': [30, 10, 30, 0], | |
| 490 }, | |
| 491 'wrap-reverse': { | |
| 492 'flexbox': [600, 70], | |
| 493 'child1': [10, 10, 590, 60], | |
| 494 'child2': [10, 10, 580, 50], | |
| 495 'child3': [10, 10, 570, 40], | |
| 496 'child4': [10, 10, 590, 30], | |
| 497 'child5': [10, 10, 590, 20], | |
| 498 'child6': [30, 10, 570, 10], | |
| 499 'child7': [30, 10, 570, 0], | |
| 500 'child8': [10, 10, 560, 60], | |
| 501 'child9': [10, 10, 550, 50], | |
| 502 'child10': [10, 10, 540, 40], | |
| 503 'child11': [10, 10, 560, 30], | |
| 504 'child12': [10, 10, 560, 20], | |
| 505 'child13': [30, 10, 540, 10], | |
| 506 'child14': [30, 10, 540, 0], | |
| 507 }, | |
| 508 }, | |
| 509 'rtl': { | |
| 510 'wrap': { | |
| 511 'flexbox': [600, 70], | |
| 512 'child1': [10, 10, 590, 60], | |
| 513 'child2': [10, 10, 580, 50], | |
| 514 'child3': [10, 10, 570, 40], | |
| 515 'child4': [10, 10, 590, 30], | |
| 516 'child5': [10, 10, 585, 20], | |
| 517 'child6': [30, 10, 570, 10], | |
| 518 'child7': [30, 10, 570, 0], | |
| 519 'child8': [10, 10, 560, 60], | |
| 520 'child9': [10, 10, 550, 50], | |
| 521 'child10': [10, 10, 540, 40], | |
| 522 'child11': [10, 10, 560, 30], | |
| 523 'child12': [10, 10, 555, 20], | |
| 524 'child13': [30, 10, 540, 10], | |
| 525 'child14': [30, 10, 540, 0], | |
| 526 }, | |
| 527 'wrap-reverse': { | |
| 528 'flexbox': [600, 70], | |
| 529 'child1': [10, 10, 0, 60], | |
| 530 'child2': [10, 10, 10, 50], | |
| 531 'child3': [10, 10, 20, 40], | |
| 532 'child4': [10, 10, 0, 30], | |
| 533 'child5': [10, 10, 0, 20], | |
| 534 'child6': [30, 10, 0, 10], | |
| 535 'child7': [30, 10, 0, 0], | |
| 536 'child8': [10, 10, 30, 60], | |
| 537 'child9': [10, 10, 40, 50], | |
| 538 'child10': [10, 10, 50, 40], | |
| 539 'child11': [10, 10, 30, 30], | |
| 540 'child12': [10, 10, 30, 20], | |
| 541 'child13': [30, 10, 30, 10], | |
| 542 'child14': [30, 10, 30, 0], | |
| 543 }, | |
| 544 }, | |
| 545 }, | |
| 546 'row-reverse': { | |
| 547 'ltr': { | |
| 548 'wrap': { | |
| 549 'flexbox': [70, 60], | |
| 550 'child1': [10, 10, 60, 50], | |
| 551 'child2': [10, 10, 50, 40], | |
| 552 'child3': [10, 10, 40, 30], | |
| 553 'child4': [10, 10, 30, 45], | |
| 554 'child5': [10, 10, 20, 45], | |
| 555 'child6': [10, 30, 10, 30], | |
| 556 'child7': [10, 30, 0, 30], | |
| 557 'child8': [10, 10, 60, 20], | |
| 558 'child9': [10, 10, 50, 10], | |
| 559 'child10': [10, 10, 40, 0], | |
| 560 'child11': [10, 10, 30, 15], | |
| 561 'child12': [10, 10, 20, 15], | |
| 562 'child13': [10, 30, 10, 0], | |
| 563 'child14': [10, 30, 0, 0], | |
| 564 }, | |
| 565 'wrap-reverse': { | |
| 566 'flexbox': [70, 60], | |
| 567 'child1': [10, 10, 60, 0], | |
| 568 'child2': [10, 10, 50, 10], | |
| 569 'child3': [10, 10, 40, 20], | |
| 570 'child4': [10, 10, 30, 0], | |
| 571 'child5': [10, 10, 20, 0], | |
| 572 'child6': [10, 30, 10, 0], | |
| 573 'child7': [10, 30, 0, 0], | |
| 574 'child8': [10, 10, 60, 30], | |
| 575 'child9': [10, 10, 50, 40], | |
| 576 'child10': [10, 10, 40, 50], | |
| 577 'child11': [10, 10, 30, 30], | |
| 578 'child12': [10, 10, 20, 30], | |
| 579 'child13': [10, 30, 10, 30], | |
| 580 'child14': [10, 30, 0, 30], | |
| 581 }, | |
| 582 }, | |
| 583 'rtl': { | |
| 584 'wrap': { | |
| 585 'flexbox': [70, 60], | |
| 586 'child1': [10, 10, 0, 50], | |
| 587 'child2': [10, 10, 10, 40], | |
| 588 'child3': [10, 10, 20, 30], | |
| 589 'child4': [10, 10, 30, 45], | |
| 590 'child5': [10, 10, 40, 45], | |
| 591 'child6': [10, 30, 50, 30], | |
| 592 'child7': [10, 30, 60, 30], | |
| 593 'child8': [10, 10, 0, 20], | |
| 594 'child9': [10, 10, 10, 10], | |
| 595 'child10': [10, 10, 20, 0], | |
| 596 'child11': [10, 10, 30, 15], | |
| 597 'child12': [10, 10, 40, 15], | |
| 598 'child13': [10, 30, 50, 0], | |
| 599 'child14': [10, 30, 60, 0], | |
| 600 }, | |
| 601 'wrap-reverse': { | |
| 602 'flexbox': [70, 60], | |
| 603 'child1': [10, 10, 0, 0], | |
| 604 'child2': [10, 10, 10, 10], | |
| 605 'child3': [10, 10, 20, 20], | |
| 606 'child4': [10, 10, 30, 0], | |
| 607 'child5': [10, 10, 40, 0], | |
| 608 'child6': [10, 30, 50, 0], | |
| 609 'child7': [10, 30, 60, 0], | |
| 610 'child8': [10, 10, 0, 30], | |
| 611 'child9': [10, 10, 10, 40], | |
| 612 'child10': [10, 10, 20, 50], | |
| 613 'child11': [10, 10, 30, 30], | |
| 614 'child12': [10, 10, 40, 30], | |
| 615 'child13': [10, 30, 50, 30], | |
| 616 'child14': [10, 30, 60, 30], | |
| 617 }, | |
| 618 }, | |
| 619 }, | |
| 620 'column-reverse': { | |
| 621 'ltr': { | |
| 622 'wrap': { | |
| 623 'flexbox': [600, 70], | |
| 624 'child1': [10, 10, 0, 0], | |
| 625 'child2': [10, 10, 10, 10], | |
| 626 'child3': [10, 10, 20, 20], | |
| 627 'child4': [10, 10, 0, 30], | |
| 628 'child5': [10, 10, 5, 40], | |
| 629 'child6': [30, 10, 0, 50], | |
| 630 'child7': [30, 10, 0, 60], | |
| 631 'child8': [10, 10, 30, 0], | |
| 632 'child9': [10, 10, 40, 10], | |
| 633 'child10': [10, 10, 50, 20], | |
| 634 'child11': [10, 10, 30, 30], | |
| 635 'child12': [10, 10, 35, 40], | |
| 636 'child13': [30, 10, 30, 50], | |
| 637 'child14': [30, 10, 30, 60], | |
| 638 }, | |
| 639 'wrap-reverse': { | |
| 640 'flexbox': [600, 70], | |
| 641 'child1': [10, 10, 590, 0], | |
| 642 'child2': [10, 10, 580, 10], | |
| 643 'child3': [10, 10, 570, 20], | |
| 644 'child4': [10, 10, 590, 30], | |
| 645 'child5': [10, 10, 590, 40], | |
| 646 'child6': [30, 10, 570, 50], | |
| 647 'child7': [30, 10, 570, 60], | |
| 648 'child8': [10, 10, 560, 0], | |
| 649 'child9': [10, 10, 550, 10], | |
| 650 'child10': [10, 10, 540, 20], | |
| 651 'child11': [10, 10, 560, 30], | |
| 652 'child12': [10, 10, 560, 40], | |
| 653 'child13': [30, 10, 540, 50], | |
| 654 'child14': [30, 10, 540, 60], | |
| 655 }, | |
| 656 }, | |
| 657 'rtl': { | |
| 658 'wrap': { | |
| 659 'flexbox': [600, 70], | |
| 660 'child1': [10, 10, 590, 0], | |
| 661 'child2': [10, 10, 580, 10], | |
| 662 'child3': [10, 10, 570, 20], | |
| 663 'child4': [10, 10, 590, 30], | |
| 664 'child5': [10, 10, 585, 40], | |
| 665 'child6': [30, 10, 570, 50], | |
| 666 'child7': [30, 10, 570, 60], | |
| 667 'child8': [10, 10, 560, 0], | |
| 668 'child9': [10, 10, 550, 10], | |
| 669 'child10': [10, 10, 540, 20], | |
| 670 'child11': [10, 10, 560, 30], | |
| 671 'child12': [10, 10, 555, 40], | |
| 672 'child13': [30, 10, 540, 50], | |
| 673 'child14': [30, 10, 540, 60], | |
| 674 }, | |
| 675 'wrap-reverse': { | |
| 676 'flexbox': [600, 70], | |
| 677 'child1': [10, 10, 0, 0], | |
| 678 'child2': [10, 10, 10, 10], | |
| 679 'child3': [10, 10, 20, 20], | |
| 680 'child4': [10, 10, 0, 30], | |
| 681 'child5': [10, 10, 0, 40], | |
| 682 'child6': [30, 10, 0, 50], | |
| 683 'child7': [30, 10, 0, 60], | |
| 684 'child8': [10, 10, 30, 0], | |
| 685 'child9': [10, 10, 40, 10], | |
| 686 'child10': [10, 10, 50, 20], | |
| 687 'child11': [10, 10, 30, 30], | |
| 688 'child12': [10, 10, 30, 40], | |
| 689 'child13': [30, 10, 30, 50], | |
| 690 'child14': [30, 10, 30, 60], | |
| 691 }, | |
| 692 }, | |
| 693 }, | |
| 694 }, | |
| 695 'vertical-rl': { | 394 'vertical-rl': { |
| 696 'row': { | 395 'row': { |
| 697 'ltr': { | 396 'ltr': { |
| 698 'wrap': { | 397 'wrap': { |
| 699 'flexbox': [60, 70], | 398 'flexbox': [60, 70], |
| 700 'child1': [10, 10, 50, 0], | 399 'child1': [10, 10, 50, 0], |
| 701 'child2': [10, 10, 40, 10], | 400 'child2': [10, 10, 40, 10], |
| 702 'child3': [10, 10, 30, 20], | 401 'child3': [10, 10, 30, 20], |
| 703 'child4': [10, 10, 45, 30], | 402 'child4': [10, 10, 45, 30], |
| 704 'child5': [10, 10, 45, 40], | 403 'child5': [10, 10, 45, 40], |
| (...skipping 601 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1306 + 'align-self: ' + alignment); | 1005 + 'align-self: ' + alignment); |
| 1307 | 1006 |
| 1308 child.setAttribute("data-expected-width", expectations[0]); | 1007 child.setAttribute("data-expected-width", expectations[0]); |
| 1309 child.setAttribute("data-expected-height", expectations[1]); | 1008 child.setAttribute("data-expected-height", expectations[1]); |
| 1310 child.setAttribute("data-offset-x", expectations[2]); | 1009 child.setAttribute("data-offset-x", expectations[2]); |
| 1311 child.setAttribute("data-offset-y", expectations[3]); | 1010 child.setAttribute("data-offset-y", expectations[3]); |
| 1312 | 1011 |
| 1313 flexbox.appendChild(child); | 1012 flexbox.appendChild(child); |
| 1314 } | 1013 } |
| 1315 | 1014 |
| 1316 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-l
r']; | 1015 var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| 1317 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 1016 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 1318 var directions = ['ltr', 'rtl']; | 1017 var directions = ['ltr', 'rtl']; |
| 1319 var wraps = ['wrap', 'wrap-reverse']; | 1018 var wraps = ['wrap', 'wrap-reverse']; |
| 1320 | 1019 |
| 1321 writingModes.forEach(function(writingMode) { | 1020 writingModes.forEach(function(writingMode) { |
| 1322 flexDirections.forEach(function(flexDirection) { | 1021 flexDirections.forEach(function(flexDirection) { |
| 1323 directions.forEach(function(direction) { | 1022 directions.forEach(function(direction) { |
| 1324 wraps.forEach(function(wrap) { | 1023 wraps.forEach(function(wrap) { |
| 1325 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; | 1024 var flexboxClassName = writingMode + ' ' + direction + ' ' + fle
xDirection + ' ' + wrap; |
| 1326 var title = document.createElement('div'); | 1025 var title = document.createElement('div'); |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1358 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); | 1057 flexbox.setAttribute("data-expected-height", testExpectations.fl
exbox[1]); |
| 1359 | 1058 |
| 1360 document.body.appendChild(flexbox); | 1059 document.body.appendChild(flexbox); |
| 1361 }) | 1060 }) |
| 1362 }) | 1061 }) |
| 1363 }) | 1062 }) |
| 1364 }) | 1063 }) |
| 1365 </script> | 1064 </script> |
| 1366 </body> | 1065 </body> |
| 1367 </html> | 1066 </html> |
| 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