Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(206)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/multiline.html

Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Addressing comments of patch set 6 Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html ('K') | « LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt ('k') | LayoutTests/css3/flexbox/multiline-align-self.html » ('j') | LayoutTests/css3/flexbox/multiline-justify-content.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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: -webkit-flex; 6 display: -webkit-flex;
7 background-color: grey; 7 background-color: grey;
8 max-width: 600px; 8 max-width: 600px;
9 -webkit-align-content: flex-start; 9 -webkit-align-content: flex-start;
10 } 10 }
(...skipping 403 matching lines...) Expand 10 before | Expand all | Expand 10 after
414 'child2': [10, 30, 0, 0], 414 'child2': [10, 30, 0, 0],
415 'child3': [5, 60, 10, 0], 415 'child3': [5, 60, 10, 0],
416 'child4': [20, 70, 15, -10], 416 'child4': [20, 70, 15, -10],
417 'child5': [10, 60, 35, 0], 417 'child5': [10, 60, 35, 0],
418 }, 418 },
419 }, 419 },
420 }, 420 },
421 'column': { 421 'column': {
422 'ltr': { 422 'ltr': {
423 'wrap': { 423 'wrap': {
424 'flexbox': [60, 50], 424 'flexbox': [60, 20],
425 'child1': [30, 5, 30, 0], 425 'child1': [30, 5, 30, 0],
426 'child2': [30, 10, 0, 0], 426 'child2': [30, 10, 0, 0],
427 'child3': [60, 5, 0, 10], 427 'child3': [60, 5, 0, 10],
428 'child4': [70, 20, -10, 15], 428 'child4': [70, 20, -10, 15],
429 'child5': [60, 10, 0, 35], 429 'child5': [60, 10, 0, 35],
430 }, 430 },
431 'wrap-reverse': { 431 'wrap-reverse': {
432 'flexbox': [60, 50], 432 'flexbox': [60, 20],
433 'child1': [30, 5, 30, 45], 433 'child1': [30, 5, 30, 15],
434 'child2': [30, 10, 0, 40], 434 'child2': [30, 10, 0, 10],
435 'child3': [60, 5, 0, 35], 435 'child3': [60, 5, 0, 5],
436 'child4': [70, 20, -10, 15], 436 'child4': [70, 20, -10, -15],
437 'child5': [60, 10, 0, 5], 437 'child5': [60, 10, 0, -25],
438 }, 438 },
439 }, 439 },
440 'rtl': { 440 'rtl': {
441 'wrap': { 441 'wrap': {
442 'flexbox': [60, 50], 442 'flexbox': [60, 20],
443 'child1': [30, 5, 30, 45], 443 'child1': [30, 5, 30, 15],
444 'child2': [30, 10, 0, 40], 444 'child2': [30, 10, 0, 10],
445 'child3': [60, 5, 0, 35], 445 'child3': [60, 5, 0, 5],
446 'child4': [70, 20, -10, 15], 446 'child4': [70, 20, -10, -15],
447 'child5': [60, 10, 0, 5], 447 'child5': [60, 10, 0, -25],
448 }, 448 },
449 'wrap-reverse': { 449 'wrap-reverse': {
450 'flexbox': [60, 50], 450 'flexbox': [60, 20],
451 'child1': [30, 5, 30, 0], 451 'child1': [30, 5, 30, 0],
452 'child2': [30, 10, 0, 0], 452 'child2': [30, 10, 0, 0],
453 'child3': [60, 5, 0, 10], 453 'child3': [60, 5, 0, 10],
454 'child4': [70, 20, -10, 15], 454 'child4': [70, 20, -10, 15],
455 'child5': [60, 10, 0, 35], 455 'child5': [60, 10, 0, 35],
456 }, 456 },
457 }, 457 },
458 }, 458 },
459 'row-reverse': { 459 'row-reverse': {
460 'ltr': { 460 'ltr': {
(...skipping 29 matching lines...) Expand all
490 'child2': [10, 30, 0, 30], 490 'child2': [10, 30, 0, 30],
491 'child3': [5, 60, 10, 0], 491 'child3': [5, 60, 10, 0],
492 'child4': [20, 70, 15, 0], 492 'child4': [20, 70, 15, 0],
493 'child5': [10, 60, 35, 0], 493 'child5': [10, 60, 35, 0],
494 }, 494 },
495 }, 495 },
496 }, 496 },
497 'column-reverse': { 497 'column-reverse': {
498 'ltr': { 498 'ltr': {
499 'wrap': { 499 'wrap': {
500 'flexbox': [60, 50], 500 'flexbox': [60, 20],
501 'child1': [30, 5, 0, 0], 501 'child1': [30, 5, 0, 0],
502 'child2': [30, 10, 30, 0], 502 'child2': [30, 10, 30, 0],
503 'child3': [60, 5, 0, 10], 503 'child3': [60, 5, 0, 10],
504 'child4': [70, 20, 0, 15], 504 'child4': [70, 20, 0, 15],
505 'child5': [60, 10, 0, 35], 505 'child5': [60, 10, 0, 35],
506 }, 506 },
507 'wrap-reverse': { 507 'wrap-reverse': {
508 'flexbox': [60, 50], 508 'flexbox': [60, 20],
509 'child1': [30, 5, 0, 45], 509 'child1': [30, 5, 0, 15],
510 'child2': [30, 10, 30, 40], 510 'child2': [30, 10, 30, 10],
511 'child3': [60, 5, 0, 35], 511 'child3': [60, 5, 0, 5],
512 'child4': [70, 20, 0, 15], 512 'child4': [70, 20, 0, -15],
513 'child5': [60, 10, 0, 5], 513 'child5': [60, 10, 0, -25],
514 }, 514 },
515 }, 515 },
516 'rtl': { 516 'rtl': {
517 'wrap': { 517 'wrap': {
518 'flexbox': [60, 50], 518 'flexbox': [60, 20],
519 'child1': [30, 5, 0, 45], 519 'child1': [30, 5, 0, 15],
520 'child2': [30, 10, 30, 40], 520 'child2': [30, 10, 30, 10],
521 'child3': [60, 5, 0, 35], 521 'child3': [60, 5, 0, 5],
522 'child4': [70, 20, 0, 15], 522 'child4': [70, 20, 0,-15],
523 'child5': [60, 10, 0, 5], 523 'child5': [60, 10, 0, -25],
524 }, 524 },
525 'wrap-reverse': { 525 'wrap-reverse': {
526 'flexbox': [60, 50], 526 'flexbox': [60, 20],
527 'child1': [30, 5, 0, 0], 527 'child1': [30, 5, 0, 0],
528 'child2': [30, 10, 30, 0], 528 'child2': [30, 10, 30, 0],
529 'child3': [60, 5, 0, 10], 529 'child3': [60, 5, 0, 10],
530 'child4': [70, 20, 0, 15], 530 'child4': [70, 20, 0, 15],
531 'child5': [60, 10, 0, 35], 531 'child5': [60, 10, 0, 35],
532 }, 532 },
533 }, 533 },
534 }, 534 },
535 }, 535 },
536 'vertical-lr': { 536 'vertical-lr': {
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
568 'child2': [10, 30, 35, 0], 568 'child2': [10, 30, 35, 0],
569 'child3': [5, 60, 30, 0], 569 'child3': [5, 60, 30, 0],
570 'child4': [20, 70, 10, -10], 570 'child4': [20, 70, 10, -10],
571 'child5': [10, 60, 0, 0], 571 'child5': [10, 60, 0, 0],
572 }, 572 },
573 }, 573 },
574 }, 574 },
575 'column': { 575 'column': {
576 'ltr': { 576 'ltr': {
577 'wrap': { 577 'wrap': {
578 'flexbox': [60, 50], 578 'flexbox': [60, 20],
579 'child1': [30, 5, 0, 0], 579 'child1': [30, 5, 0, 0],
580 'child2': [30, 10, 30, 0], 580 'child2': [30, 10, 30, 0],
581 'child3': [60, 5, 0, 10], 581 'child3': [60, 5, 0, 10],
582 'child4': [70, 20, 0, 15], 582 'child4': [70, 20, 0, 15],
583 'child5': [60, 10, 0, 35], 583 'child5': [60, 10, 0, 35],
584 }, 584 },
585 'wrap-reverse': { 585 'wrap-reverse': {
586 'flexbox': [60, 50], 586 'flexbox': [60, 20],
587 'child1': [30, 5, 0, 45], 587 'child1': [30, 5, 0, 15],
588 'child2': [30, 10, 30, 40], 588 'child2': [30, 10, 30, 10],
589 'child3': [60, 5, 0, 35], 589 'child3': [60, 5, 0, 5],
590 'child4': [70, 20, 0, 15], 590 'child4': [70, 20, 0, -15],
591 'child5': [60, 10, 0, 5], 591 'child5': [60, 10, 0, -25],
592 }, 592 },
593 }, 593 },
594 'rtl': { 594 'rtl': {
595 'wrap': { 595 'wrap': {
596 'flexbox': [60, 50], 596 'flexbox': [60, 20],
597 'child1': [30, 5, 0, 45], 597 'child1': [30, 5, 0, 15],
598 'child2': [30, 10, 30, 40], 598 'child2': [30, 10, 30, 10],
599 'child3': [60, 5, 0, 35], 599 'child3': [60, 5, 0, 5],
600 'child4': [70, 20, 0, 15], 600 'child4': [70, 20, 0, -15],
601 'child5': [60, 10, 0, 5], 601 'child5': [60, 10, 0, -25],
602 }, 602 },
603 'wrap-reverse': { 603 'wrap-reverse': {
604 'flexbox': [60, 50], 604 'flexbox': [60, 20],
605 'child1': [30, 5, 0, 0], 605 'child1': [30, 5, 0, 0],
606 'child2': [30, 10, 30, 0], 606 'child2': [30, 10, 30, 0],
607 'child3': [60, 5, 0, 10], 607 'child3': [60, 5, 0, 10],
608 'child4': [70, 20, 0, 15], 608 'child4': [70, 20, 0, 15],
609 'child5': [60, 10, 0, 35], 609 'child5': [60, 10, 0, 35],
610 }, 610 },
611 }, 611 },
612 }, 612 },
613 'row-reverse': { 613 'row-reverse': {
614 'ltr': { 614 'ltr': {
(...skipping 29 matching lines...) Expand all
644 'child2': [10, 30, 35, 30], 644 'child2': [10, 30, 35, 30],
645 'child3': [5, 60, 30, 0], 645 'child3': [5, 60, 30, 0],
646 'child4': [20, 70, 10, 0], 646 'child4': [20, 70, 10, 0],
647 'child5': [10, 60, 0, 0], 647 'child5': [10, 60, 0, 0],
648 }, 648 },
649 }, 649 },
650 }, 650 },
651 'column-reverse': { 651 'column-reverse': {
652 'ltr': { 652 'ltr': {
653 'wrap': { 653 'wrap': {
654 'flexbox': [60, 50], 654 'flexbox': [60, 20],
655 'child1': [30, 5, 30, 0], 655 'child1': [30, 5, 30, 0],
656 'child2': [30, 10, 0, 0], 656 'child2': [30, 10, 0, 0],
657 'child3': [60, 5, 0, 10], 657 'child3': [60, 5, 0, 10],
658 'child4': [70, 20, -10, 15], 658 'child4': [70, 20, -10, 15],
659 'child5': [60, 10, 0, 35], 659 'child5': [60, 10, 0, 35],
660 }, 660 },
661 'wrap-reverse': { 661 'wrap-reverse': {
662 'flexbox': [60, 50], 662 'flexbox': [60, 20],
663 'child1': [30, 5, 30, 45], 663 'child1': [30, 5, 30, 15],
664 'child2': [30, 10, 0, 40], 664 'child2': [30, 10, 0, 10],
665 'child3': [60, 5, 0, 35], 665 'child3': [60, 5, 0, 5],
666 'child4': [70, 20, -10, 15], 666 'child4': [70, 20, -10, -15],
667 'child5': [60, 10, 0, 5], 667 'child5': [60, 10, 0, -25],
668 }, 668 },
669 }, 669 },
670 'rtl': { 670 'rtl': {
671 'wrap': { 671 'wrap': {
672 'flexbox': [60, 50], 672 'flexbox': [60, 20],
673 'child1': [30, 5, 30, 45], 673 'child1': [30, 5, 30, 15],
674 'child2': [30, 10, 0, 40], 674 'child2': [30, 10, 0, 10],
675 'child3': [60, 5, 0, 35], 675 'child3': [60, 5, 0, 5],
676 'child4': [70, 20, -10, 15], 676 'child4': [70, 20, -10, -15],
677 'child5': [60, 10, 0, 5], 677 'child5': [60, 10, 0, -25],
678 }, 678 },
679 'wrap-reverse': { 679 'wrap-reverse': {
680 'flexbox': [60, 50], 680 'flexbox': [60, 20],
681 'child1': [30, 5, 30, 0], 681 'child1': [30, 5, 30, 0],
682 'child2': [30, 10, 0, 0], 682 'child2': [30, 10, 0, 0],
683 'child3': [60, 5, 0, 10], 683 'child3': [60, 5, 0, 10],
684 'child4': [70, 20, -10, 15], 684 'child4': [70, 20, -10, 15],
685 'child5': [60, 10, 0, 35], 685 'child5': [60, 10, 0, 35],
686 }, 686 },
687 }, 687 },
688 }, 688 },
689 }, 689 },
690 }; 690 };
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
744 flexbox.setAttribute("data-expected-height", testExpectations.fl exbox[1]); 744 flexbox.setAttribute("data-expected-height", testExpectations.fl exbox[1]);
745 745
746 document.body.appendChild(flexbox); 746 document.body.appendChild(flexbox);
747 }) 747 })
748 }) 748 })
749 }) 749 })
750 }) 750 })
751 </script> 751 </script>
752 </body> 752 </body>
753 </html> 753 </html>
OLDNEW
« LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html ('K') | « LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation-expected.txt ('k') | LayoutTests/css3/flexbox/multiline-align-self.html » ('j') | LayoutTests/css3/flexbox/multiline-justify-content.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698