Changeset 110583 in webkit


Ignore:
Timestamp:
Mar 13, 2012 11:17:00 AM (12 years ago)
Author:
tony@chromium.org
Message:

flexbox's computePreferredLogicalWidth needs to take multiline into account
https://bugs.webkit.org/show_bug.cgi?id=80931

Reviewed by Ojan Vafai.

Source/WebCore:

Tests: css3/flexbox/multiline-shrink-to-fit-expected.html

css3/flexbox/multiline-shrink-to-fit.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computePreferredLogicalWidths): Set min/max preferredLogicalWidth based on always breaking or never breaking.
(WebCore::RenderFlexibleBox::computeNextFlexLine): Add a FIXME.
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Don't change the width after computePreferredWidth has been called.

LayoutTests:

  • css3/flexbox/cross-axis-scrollbar.html:
  • css3/flexbox/multiline-align.html:
  • css3/flexbox/multiline-pack.html:
  • css3/flexbox/multiline-shrink-to-fit-expected.html: Added.
  • css3/flexbox/multiline-shrink-to-fit.html: Added.
  • css3/flexbox/multiline.html:
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r110580 r110583  
     12012-03-13  Tony Chang  <tony@chromium.org>
     2
     3        flexbox's computePreferredLogicalWidth needs to take multiline into account
     4        https://bugs.webkit.org/show_bug.cgi?id=80931
     5
     6        Reviewed by Ojan Vafai.
     7
     8        * css3/flexbox/cross-axis-scrollbar.html:
     9        * css3/flexbox/multiline-align.html:
     10        * css3/flexbox/multiline-pack.html:
     11        * css3/flexbox/multiline-shrink-to-fit-expected.html: Added.
     12        * css3/flexbox/multiline-shrink-to-fit.html: Added.
     13        * css3/flexbox/multiline.html:
     14
    1152012-03-13  Max Vujovic  <mvujovic@adobe.com>
    216
  • trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html

    r106129 r110583  
    5454<div style="position: relative;">
    5555
    56 <div style="width: 50px; position: absolute; top: 0; left: 0;">
     56<div style="position: absolute; top: 0; left: 0;">
    5757<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
    5858    <div style="-webkit-flex-item-align: start"></div>
     
    6464</div>
    6565
    66 <div style="width: 50px; position: absolute; top: 0; left: 150px;">
     66<div style="position: absolute; top: 0; left: 150px;">
    6767<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
    6868    <div style="-webkit-flex-item-align: start"></div>
     
    7474</div>
    7575
    76 <div style="height: 20px; position: absolute; top:0; left: 300px" class="vertical-lr">
     76<div style="position: absolute; top:0; left: 300px" class="vertical-lr">
    7777<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
    7878    <div style="-webkit-flex-item-align: start"></div>
     
    8484</div>
    8585
    86 <div style="height: 20px; position: absolute; top:0; left: 450px;" class="vertical-lr">
     86<div style="position: absolute; top:0; left: 450px;" class="vertical-lr">
    8787<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
    8888    <div style="-webkit-flex-item-align: start"></div>
  • trunk/LayoutTests/css3/flexbox/multiline-align.html

    r110209 r110583  
    774774            'ltr': {
    775775                'wrap': {
    776                     'flexbox': [70, 60],
     776                    'flexbox': [70, 170],
    777777                    'child1': [10, 10, 60, 0],
    778778                    'child2': [10, 10, 50, 10],
     
    791791                },
    792792                'wrap-reverse': {
    793                     'flexbox': [70, 60],
    794                     'child1': [10, 10, 60, 50],
    795                     'child2': [10, 10, 50, 40],
    796                     'child3': [10, 10, 40, 30],
    797                     'child4': [10, 10, 30, 50],
    798                     'child5': [10, 10, 20, 50],
    799                     'child6': [10, 30, 10, 30],
    800                     'child7': [10, 30, 0, 30],
    801                     'child8': [10, 10, 60, 20],
    802                     'child9': [10, 10, 50, 10],
    803                     'child10': [10, 10, 40, 0],
    804                     'child11': [10, 10, 30, 20],
    805                     'child12': [10, 10, 20, 20],
    806                     'child13': [10, 30, 10, 0],
    807                     'child14': [10, 30, 0, 0],
    808                 },
    809             },
    810             'rtl': {
    811                 'wrap': {
    812                     'flexbox': [70, 60],
    813                     'child1': [10, 10, 60, 50],
    814                     'child2': [10, 10, 50, 40],
    815                     'child3': [10, 10, 40, 30],
    816                     'child4': [10, 10, 30, 45],
    817                     'child5': [10, 10, 20, 45],
    818                     'child6': [10, 30, 10, 30],
    819                     'child7': [10, 30, 0, 30],
    820                     'child8': [10, 10, 60, 20],
    821                     'child9': [10, 10, 50, 10],
    822                     'child10': [10, 10, 40, 0],
    823                     'child11': [10, 10, 30, 15],
    824                     'child12': [10, 10, 20, 15],
    825                     'child13': [10, 30, 10, 0],
    826                     'child14': [10, 30, 0, 0],
    827                 },
    828                 'wrap-reverse': {
    829                     'flexbox': [70, 60],
     793                    'flexbox': [70, 170],
     794                    'child1': [10, 10, 60, 160],
     795                    'child2': [10, 10, 50, 150],
     796                    'child3': [10, 10, 40, 140],
     797                    'child4': [10, 10, 30, 160],
     798                    'child5': [10, 10, 20, 160],
     799                    'child6': [10, 30, 10, 140],
     800                    'child7': [10, 30, 0, 140],
     801                    'child8': [10, 10, 60, 130],
     802                    'child9': [10, 10, 50, 120],
     803                    'child10': [10, 10, 40, 110],
     804                    'child11': [10, 10, 30, 130],
     805                    'child12': [10, 10, 20, 130],
     806                    'child13': [10, 30, 10, 110],
     807                    'child14': [10, 30, 0, 110],
     808                },
     809            },
     810            'rtl': {
     811                'wrap': {
     812                    'flexbox': [70, 170],
     813                    'child1': [10, 10, 60, 160],
     814                    'child2': [10, 10, 50, 150],
     815                    'child3': [10, 10, 40, 140],
     816                    'child4': [10, 10, 30, 155],
     817                    'child5': [10, 10, 20, 155],
     818                    'child6': [10, 30, 10, 140],
     819                    'child7': [10, 30, 0, 140],
     820                    'child8': [10, 10, 60, 130],
     821                    'child9': [10, 10, 50, 120],
     822                    'child10': [10, 10, 40, 110],
     823                    'child11': [10, 10, 30, 125],
     824                    'child12': [10, 10, 20, 125],
     825                    'child13': [10, 30, 10, 110],
     826                    'child14': [10, 30, 0, 110],
     827                },
     828                'wrap-reverse': {
     829                    'flexbox': [70, 170],
    830830                    'child1': [10, 10, 60, 0],
    831831                    'child2': [10, 10, 50, 10],
     
    922922            'ltr': {
    923923                'wrap': {
    924                     'flexbox': [70, 60],
     924                    'flexbox': [70, 170],
    925925                    'child1': [10, 10, 0, 0],
    926926                    'child2': [10, 10, 10, 10],
     
    939939                },
    940940                'wrap-reverse': {
    941                     'flexbox': [70, 60],
    942                     'child1': [10, 10, 0, 50],
    943                     'child2': [10, 10, 10, 40],
    944                     'child3': [10, 10, 20, 30],
    945                     'child4': [10, 10, 30, 50],
    946                     'child5': [10, 10, 40, 50],
    947                     'child6': [10, 30, 50, 30],
    948                     'child7': [10, 30, 60, 30],
    949                     'child8': [10, 10, 0, 20],
    950                     'child9': [10, 10, 10, 10],
    951                     'child10': [10, 10, 20, 0],
    952                     'child11': [10, 10, 30, 20],
    953                     'child12': [10, 10, 40, 20],
    954                     'child13': [10, 30, 50, 0],
    955                     'child14': [10, 30, 60, 0],
    956                 },
    957             },
    958             'rtl': {
    959                 'wrap': {
    960                     'flexbox': [70, 60],
    961                     'child1': [10, 10, 0, 50],
    962                     'child2': [10, 10, 10, 40],
    963                     'child3': [10, 10, 20, 30],
    964                     'child4': [10, 10, 30, 45],
    965                     'child5': [10, 10, 40, 45],
    966                     'child6': [10, 30, 50, 30],
    967                     'child7': [10, 30, 60, 30],
    968                     'child8': [10, 10, 0, 20],
    969                     'child9': [10, 10, 10, 10],
    970                     'child10': [10, 10, 20, 0],
    971                     'child11': [10, 10, 30, 15],
    972                     'child12': [10, 10, 40, 15],
    973                     'child13': [10, 30, 50, 0],
    974                     'child14': [10, 30, 60, 0],
    975                 },
    976                 'wrap-reverse': {
    977                     'flexbox': [70, 60],
     941                    'flexbox': [70, 170],
     942                    'child1': [10, 10, 0, 160],
     943                    'child2': [10, 10, 10, 150],
     944                    'child3': [10, 10, 20, 140],
     945                    'child4': [10, 10, 30, 160],
     946                    'child5': [10, 10, 40, 160],
     947                    'child6': [10, 30, 50, 140],
     948                    'child7': [10, 30, 60, 140],
     949                    'child8': [10, 10, 0, 130],
     950                    'child9': [10, 10, 10, 120],
     951                    'child10': [10, 10, 20, 110],
     952                    'child11': [10, 10, 30, 130],
     953                    'child12': [10, 10, 40, 130],
     954                    'child13': [10, 30, 50, 110],
     955                    'child14': [10, 30, 60, 110],
     956                },
     957            },
     958            'rtl': {
     959                'wrap': {
     960                    'flexbox': [70, 170],
     961                    'child1': [10, 10, 0, 160],
     962                    'child2': [10, 10, 10, 150],
     963                    'child3': [10, 10, 20, 140],
     964                    'child4': [10, 10, 30, 155],
     965                    'child5': [10, 10, 40, 155],
     966                    'child6': [10, 30, 50, 140],
     967                    'child7': [10, 30, 60, 140],
     968                    'child8': [10, 10, 0, 130],
     969                    'child9': [10, 10, 10, 120],
     970                    'child10': [10, 10, 20, 110],
     971                    'child11': [10, 10, 30, 125],
     972                    'child12': [10, 10, 40, 125],
     973                    'child13': [10, 30, 50, 110],
     974                    'child14': [10, 30, 60, 110],
     975                },
     976                'wrap-reverse': {
     977                    'flexbox': [70, 170],
    978978                    'child1': [10, 10, 0, 0],
    979979                    'child2': [10, 10, 10, 10],
     
    10721072            'ltr': {
    10731073                'wrap': {
    1074                     'flexbox': [70, 60],
     1074                    'flexbox': [70, 170],
    10751075                    'child1': [10, 10, 0, 0],
    10761076                    'child2': [10, 10, 10, 10],
     
    10891089                },
    10901090                'wrap-reverse': {
    1091                     'flexbox': [70, 60],
    1092                     'child1': [10, 10, 0, 50],
    1093                     'child2': [10, 10, 10, 40],
    1094                     'child3': [10, 10, 20, 30],
    1095                     'child4': [10, 10, 30, 50],
    1096                     'child5': [10, 10, 40, 50],
    1097                     'child6': [10, 30, 50, 30],
    1098                     'child7': [10, 30, 60, 30],
    1099                     'child8': [10, 10, 0, 20],
    1100                     'child9': [10, 10, 10, 10],
    1101                     'child10': [10, 10, 20, 0],
    1102                     'child11': [10, 10, 30, 20],
    1103                     'child12': [10, 10, 40, 20],
    1104                     'child13': [10, 30, 50, 0],
    1105                     'child14': [10, 30, 60, 0],
    1106                 },
    1107             },
    1108             'rtl': {
    1109                 'wrap': {
    1110                     'flexbox': [70, 60],
    1111                     'child1': [10, 10, 0, 50],
    1112                     'child2': [10, 10, 10, 40],
    1113                     'child3': [10, 10, 20, 30],
    1114                     'child4': [10, 10, 30, 45],
    1115                     'child5': [10, 10, 40, 45],
    1116                     'child6': [10, 30, 50, 30],
    1117                     'child7': [10, 30, 60, 30],
    1118                     'child8': [10, 10, 0, 20],
    1119                     'child9': [10, 10, 10, 10],
    1120                     'child10': [10, 10, 20, 0],
    1121                     'child11': [10, 10, 30, 15],
    1122                     'child12': [10, 10, 40, 15],
    1123                     'child13': [10, 30, 50, 0],
    1124                     'child14': [10, 30, 60, 0],
    1125                 },
    1126                 'wrap-reverse': {
    1127                     'flexbox': [70, 60],
     1091                    'flexbox': [70, 170],
     1092                    'child1': [10, 10, 0, 160],
     1093                    'child2': [10, 10, 10, 150],
     1094                    'child3': [10, 10, 20, 140],
     1095                    'child4': [10, 10, 30, 160],
     1096                    'child5': [10, 10, 40, 160],
     1097                    'child6': [10, 30, 50, 140],
     1098                    'child7': [10, 30, 60, 140],
     1099                    'child8': [10, 10, 0, 130],
     1100                    'child9': [10, 10, 10, 120],
     1101                    'child10': [10, 10, 20, 110],
     1102                    'child11': [10, 10, 30, 130],
     1103                    'child12': [10, 10, 40, 130],
     1104                    'child13': [10, 30, 50, 110],
     1105                    'child14': [10, 30, 60, 110],
     1106                },
     1107            },
     1108            'rtl': {
     1109                'wrap': {
     1110                    'flexbox': [70, 170],
     1111                    'child1': [10, 10, 0, 160],
     1112                    'child2': [10, 10, 10, 150],
     1113                    'child3': [10, 10, 20, 140],
     1114                    'child4': [10, 10, 30, 155],
     1115                    'child5': [10, 10, 40, 155],
     1116                    'child6': [10, 30, 50, 140],
     1117                    'child7': [10, 30, 60, 140],
     1118                    'child8': [10, 10, 0, 130],
     1119                    'child9': [10, 10, 10, 120],
     1120                    'child10': [10, 10, 20, 110],
     1121                    'child11': [10, 10, 30, 125],
     1122                    'child12': [10, 10, 40, 125],
     1123                    'child13': [10, 30, 50, 110],
     1124                    'child14': [10, 30, 60, 110],
     1125                },
     1126                'wrap-reverse': {
     1127                    'flexbox': [70, 170],
    11281128                    'child1': [10, 10, 0, 0],
    11291129                    'child2': [10, 10, 10, 10],
     
    12201220            'ltr': {
    12211221                'wrap': {
    1222                     'flexbox': [70, 60],
     1222                    'flexbox': [70, 170],
    12231223                    'child1': [10, 10, 60, 0],
    12241224                    'child2': [10, 10, 50, 10],
     
    12371237                },
    12381238                'wrap-reverse': {
    1239                     'flexbox': [70, 60],
    1240                     'child1': [10, 10, 60, 50],
    1241                     'child2': [10, 10, 50, 40],
    1242                     'child3': [10, 10, 40, 30],
    1243                     'child4': [10, 10, 30, 50],
    1244                     'child5': [10, 10, 20, 50],
    1245                     'child6': [10, 30, 10, 30],
    1246                     'child7': [10, 30, 0, 30],
    1247                     'child8': [10, 10, 60, 20],
    1248                     'child9': [10, 10, 50, 10],
    1249                     'child10': [10, 10, 40, 0],
    1250                     'child11': [10, 10, 30, 20],
    1251                     'child12': [10, 10, 20, 20],
    1252                     'child13': [10, 30, 10, 0],
    1253                     'child14': [10, 30, 0, 0],
    1254                 },
    1255             },
    1256             'rtl': {
    1257                 'wrap': {
    1258                     'flexbox': [70, 60],
    1259                     'child1': [10, 10, 60, 50],
    1260                     'child2': [10, 10, 50, 40],
    1261                     'child3': [10, 10, 40, 30],
    1262                     'child4': [10, 10, 30, 45],
    1263                     'child5': [10, 10, 20, 45],
    1264                     'child6': [10, 30, 10, 30],
    1265                     'child7': [10, 30, 0, 30],
    1266                     'child8': [10, 10, 60, 20],
    1267                     'child9': [10, 10, 50, 10],
    1268                     'child10': [10, 10, 40, 0],
    1269                     'child11': [10, 10, 30, 15],
    1270                     'child12': [10, 10, 20, 15],
    1271                     'child13': [10, 30, 10, 0],
    1272                     'child14': [10, 30, 0, 0],
    1273                 },
    1274                 'wrap-reverse': {
    1275                     'flexbox': [70, 60],
     1239                    'flexbox': [70, 170],
     1240                    'child1': [10, 10, 60, 160],
     1241                    'child2': [10, 10, 50, 150],
     1242                    'child3': [10, 10, 40, 140],
     1243                    'child4': [10, 10, 30, 160],
     1244                    'child5': [10, 10, 20, 160],
     1245                    'child6': [10, 30, 10, 140],
     1246                    'child7': [10, 30, 0, 140],
     1247                    'child8': [10, 10, 60, 130],
     1248                    'child9': [10, 10, 50, 120],
     1249                    'child10': [10, 10, 40, 110],
     1250                    'child11': [10, 10, 30, 130],
     1251                    'child12': [10, 10, 20, 130],
     1252                    'child13': [10, 30, 10, 110],
     1253                    'child14': [10, 30, 0, 110],
     1254                },
     1255            },
     1256            'rtl': {
     1257                'wrap': {
     1258                    'flexbox': [70, 170],
     1259                    'child1': [10, 10, 60, 160],
     1260                    'child2': [10, 10, 50, 150],
     1261                    'child3': [10, 10, 40, 140],
     1262                    'child4': [10, 10, 30, 155],
     1263                    'child5': [10, 10, 20, 155],
     1264                    'child6': [10, 30, 10, 140],
     1265                    'child7': [10, 30, 0, 140],
     1266                    'child8': [10, 10, 60, 130],
     1267                    'child9': [10, 10, 50, 120],
     1268                    'child10': [10, 10, 40, 110],
     1269                    'child11': [10, 10, 30, 125],
     1270                    'child12': [10, 10, 20, 125],
     1271                    'child13': [10, 30, 10, 110],
     1272                    'child14': [10, 30, 0, 110],
     1273                },
     1274                'wrap-reverse': {
     1275                    'flexbox': [70, 170],
    12761276                    'child1': [10, 10, 60, 0],
    12771277                    'child2': [10, 10, 50, 10],
  • trunk/LayoutTests/css3/flexbox/multiline-pack.html

    r110209 r110583  
    14791479                'wrap': {
    14801480                    'start': {
    1481                         'flexbox': [80, 20],
     1481                        'flexbox': [80, 40],
    14821482                        'child1': [40, 10, 40, 0],
    14831483                        'child2': [20, 10, 20, 0],
     
    14861486                    },
    14871487                    'end': {
    1488                         'flexbox': [80, 20],
     1488                        'flexbox': [80, 40],
    14891489                        'child1': [40, 10, 20, 0],
    14901490                        'child2': [20, 10, 0, 0],
     
    14931493                    },
    14941494                    'center': {
    1495                         'flexbox': [80, 20],
     1495                        'flexbox': [80, 40],
    14961496                        'child1': [40, 10, 30, 0],
    14971497                        'child2': [20, 10, 10, 0],
     
    15001500                    },
    15011501                    'justify': {
    1502                         'flexbox': [80, 20],
     1502                        'flexbox': [80, 40],
    15031503                        'child1': [40, 10, 40, 0],
    15041504                        'child2': [20, 10, 0, 0],
     
    15071507                    },
    15081508                    'distribute': {
    1509                         'flexbox': [80, 20],
     1509                        'flexbox': [80, 40],
    15101510                        'child1': [40, 10, 35, 0],
    15111511                        'child2': [20, 10, 5, 0],
     
    15161516                'wrap-reverse': {
    15171517                    'start': {
    1518                         'flexbox': [80, 20],
    1519                         'child1': [40, 10, 40, 10],
    1520                         'child2': [20, 10, 20, 10],
    1521                         'child3': [40, 10, 40, 0],
    1522                         'child4': [20, 10, 20, 0],
    1523                     },
    1524                     'end': {
    1525                         'flexbox': [80, 20],
    1526                         'child1': [40, 10, 20, 10],
    1527                         'child2': [20, 10, 0, 10],
    1528                         'child3': [40, 10, 20, 0],
    1529                         'child4': [20, 10, 0, 0],
    1530                     },
    1531                     'center': {
    1532                         'flexbox': [80, 20],
    1533                         'child1': [40, 10, 30, 10],
    1534                         'child2': [20, 10, 10, 10],
    1535                         'child3': [40, 10, 30, 0],
    1536                         'child4': [20, 10, 10, 0],
    1537                     },
    1538                     'justify': {
    1539                         'flexbox': [80, 20],
    1540                         'child1': [40, 10, 40, 10],
    1541                         'child2': [20, 10, 0, 10],
    1542                         'child3': [40, 10, 40, 0],
    1543                         'child4': [20, 10, 0, 0],
    1544                     },
    1545                     'distribute': {
    1546                         'flexbox': [80, 20],
    1547                         'child1': [40, 10, 35, 10],
    1548                         'child2': [20, 10, 5, 10],
    1549                         'child3': [40, 10, 35, 0],
    1550                         'child4': [20, 10, 5, 0],
     1518                        'flexbox': [80, 40],
     1519                        'child1': [40, 10, 40, 30],
     1520                        'child2': [20, 10, 20, 30],
     1521                        'child3': [40, 10, 40, 20],
     1522                        'child4': [20, 10, 20, 20],
     1523                    },
     1524                    'end': {
     1525                        'flexbox': [80, 40],
     1526                        'child1': [40, 10, 20, 30],
     1527                        'child2': [20, 10, 0, 30],
     1528                        'child3': [40, 10, 20, 20],
     1529                        'child4': [20, 10, 0, 20],
     1530                    },
     1531                    'center': {
     1532                        'flexbox': [80, 40],
     1533                        'child1': [40, 10, 30, 30],
     1534                        'child2': [20, 10, 10, 30],
     1535                        'child3': [40, 10, 30, 20],
     1536                        'child4': [20, 10, 10, 20],
     1537                    },
     1538                    'justify': {
     1539                        'flexbox': [80, 40],
     1540                        'child1': [40, 10, 40, 30],
     1541                        'child2': [20, 10, 0, 30],
     1542                        'child3': [40, 10, 40, 20],
     1543                        'child4': [20, 10, 0, 20],
     1544                    },
     1545                    'distribute': {
     1546                        'flexbox': [80, 40],
     1547                        'child1': [40, 10, 35, 30],
     1548                        'child2': [20, 10, 5, 30],
     1549                        'child3': [40, 10, 35, 20],
     1550                        'child4': [20, 10, 5, 20],
    15511551                    },
    15521552                },
     
    15551555                'wrap': {
    15561556                    'start': {
    1557                         'flexbox': [80, 20],
    1558                         'child1': [40, 10, 40, 10],
    1559                         'child2': [20, 10, 20, 10],
    1560                         'child3': [40, 10, 40, 0],
    1561                         'child4': [20, 10, 20, 0],
    1562                     },
    1563                     'end': {
    1564                         'flexbox': [80, 20],
    1565                         'child1': [40, 10, 20, 10],
    1566                         'child2': [20, 10, 0, 10],
    1567                         'child3': [40, 10, 20, 0],
    1568                         'child4': [20, 10, 0, 0],
    1569                     },
    1570                     'center': {
    1571                         'flexbox': [80, 20],
    1572                         'child1': [40, 10, 30, 10],
    1573                         'child2': [20, 10, 10, 10],
    1574                         'child3': [40, 10, 30, 0],
    1575                         'child4': [20, 10, 10, 0],
    1576                     },
    1577                     'justify': {
    1578                         'flexbox': [80, 20],
    1579                         'child1': [40, 10, 40, 10],
    1580                         'child2': [20, 10, 0, 10],
    1581                         'child3': [40, 10, 40, 0],
    1582                         'child4': [20, 10, 0, 0],
    1583                     },
    1584                     'distribute': {
    1585                         'flexbox': [80, 20],
    1586                         'child1': [40, 10, 35, 10],
    1587                         'child2': [20, 10, 5, 10],
    1588                         'child3': [40, 10, 35, 0],
    1589                         'child4': [20, 10, 5, 0],
    1590                     },
    1591                 },
    1592                 'wrap-reverse': {
    1593                     'start': {
    1594                         'flexbox': [80, 20],
     1557                        'flexbox': [80, 40],
     1558                        'child1': [40, 10, 40, 30],
     1559                        'child2': [20, 10, 20, 30],
     1560                        'child3': [40, 10, 40, 20],
     1561                        'child4': [20, 10, 20, 20],
     1562                    },
     1563                    'end': {
     1564                        'flexbox': [80, 40],
     1565                        'child1': [40, 10, 20, 30],
     1566                        'child2': [20, 10, 0, 30],
     1567                        'child3': [40, 10, 20, 20],
     1568                        'child4': [20, 10, 0, 20],
     1569                    },
     1570                    'center': {
     1571                        'flexbox': [80, 40],
     1572                        'child1': [40, 10, 30, 30],
     1573                        'child2': [20, 10, 10, 30],
     1574                        'child3': [40, 10, 30, 20],
     1575                        'child4': [20, 10, 10, 20],
     1576                    },
     1577                    'justify': {
     1578                        'flexbox': [80, 40],
     1579                        'child1': [40, 10, 40, 30],
     1580                        'child2': [20, 10, 0, 30],
     1581                        'child3': [40, 10, 40, 20],
     1582                        'child4': [20, 10, 0, 20],
     1583                    },
     1584                    'distribute': {
     1585                        'flexbox': [80, 40],
     1586                        'child1': [40, 10, 35, 30],
     1587                        'child2': [20, 10, 5, 30],
     1588                        'child3': [40, 10, 35, 20],
     1589                        'child4': [20, 10, 5, 20],
     1590                    },
     1591                },
     1592                'wrap-reverse': {
     1593                    'start': {
     1594                        'flexbox': [80, 40],
    15951595                        'child1': [40, 10, 40, 0],
    15961596                        'child2': [20, 10, 20, 0],
     
    15991599                    },
    16001600                    'end': {
    1601                         'flexbox': [80, 20],
     1601                        'flexbox': [80, 40],
    16021602                        'child1': [40, 10, 20, 0],
    16031603                        'child2': [20, 10, 0, 0],
     
    16061606                    },
    16071607                    'center': {
    1608                         'flexbox': [80, 20],
     1608                        'flexbox': [80, 40],
    16091609                        'child1': [40, 10, 30, 0],
    16101610                        'child2': [20, 10, 10, 0],
     
    16131613                    },
    16141614                    'justify': {
    1615                         'flexbox': [80, 20],
     1615                        'flexbox': [80, 40],
    16161616                        'child1': [40, 10, 40, 0],
    16171617                        'child2': [20, 10, 0, 0],
     
    16201620                    },
    16211621                    'distribute': {
    1622                         'flexbox': [80, 20],
     1622                        'flexbox': [80, 40],
    16231623                        'child1': [40, 10, 35, 0],
    16241624                        'child2': [20, 10, 5, 0],
     
    17871787                'wrap': {
    17881788                    'start': {
    1789                         'flexbox': [80, 20],
     1789                        'flexbox': [80, 40],
    17901790                        'child1': [40, 10, 0, 0],
    17911791                        'child2': [20, 10, 40, 0],
     
    17941794                    },
    17951795                    'end': {
    1796                         'flexbox': [80, 20],
     1796                        'flexbox': [80, 40],
    17971797                        'child1': [40, 10, 20, 0],
    17981798                        'child2': [20, 10, 60, 0],
     
    18011801                    },
    18021802                    'center': {
    1803                         'flexbox': [80, 20],
     1803                        'flexbox': [80, 40],
    18041804                        'child1': [40, 10, 10, 0],
    18051805                        'child2': [20, 10, 50, 0],
     
    18081808                    },
    18091809                    'justify': {
    1810                         'flexbox': [80, 20],
     1810                        'flexbox': [80, 40],
    18111811                        'child1': [40, 10, 0, 0],
    18121812                        'child2': [20, 10, 60, 0],
     
    18151815                    },
    18161816                    'distribute': {
    1817                         'flexbox': [80, 20],
     1817                        'flexbox': [80, 40],
    18181818                        'child1': [40, 10, 5, 0],
    18191819                        'child2': [20, 10, 55, 0],
     
    18241824                'wrap-reverse': {
    18251825                    'start': {
    1826                         'flexbox': [80, 20],
    1827                         'child1': [40, 10, 0, 10],
    1828                         'child2': [20, 10, 40, 10],
    1829                         'child3': [40, 10, 0, 0],
    1830                         'child4': [20, 10, 40, 0],
    1831                     },
    1832                     'end': {
    1833                         'flexbox': [80, 20],
    1834                         'child1': [40, 10, 20, 10],
    1835                         'child2': [20, 10, 60, 10],
    1836                         'child3': [40, 10, 20, 0],
    1837                         'child4': [20, 10, 60, 0],
    1838                     },
    1839                     'center': {
    1840                         'flexbox': [80, 20],
    1841                         'child1': [40, 10, 10, 10],
    1842                         'child2': [20, 10, 50, 10],
    1843                         'child3': [40, 10, 10, 0],
    1844                         'child4': [20, 10, 50, 0],
    1845                     },
    1846                     'justify': {
    1847                         'flexbox': [80, 20],
    1848                         'child1': [40, 10, 0, 10],
    1849                         'child2': [20, 10, 60, 10],
    1850                         'child3': [40, 10, 0, 0],
    1851                         'child4': [20, 10, 60, 0],
    1852                     },
    1853                     'distribute': {
    1854                         'flexbox': [80, 20],
    1855                         'child1': [40, 10, 5, 10],
    1856                         'child2': [20, 10, 55, 10],
    1857                         'child3': [40, 10, 5, 0],
    1858                         'child4': [20, 10, 55, 0],
     1826                        'flexbox': [80, 40],
     1827                        'child1': [40, 10, 0, 30],
     1828                        'child2': [20, 10, 40, 30],
     1829                        'child3': [40, 10, 0, 20],
     1830                        'child4': [20, 10, 40, 20],
     1831                    },
     1832                    'end': {
     1833                        'flexbox': [80, 40],
     1834                        'child1': [40, 10, 20, 30],
     1835                        'child2': [20, 10, 60, 30],
     1836                        'child3': [40, 10, 20, 20],
     1837                        'child4': [20, 10, 60, 20],
     1838                    },
     1839                    'center': {
     1840                        'flexbox': [80, 40],
     1841                        'child1': [40, 10, 10, 30],
     1842                        'child2': [20, 10, 50, 30],
     1843                        'child3': [40, 10, 10, 20],
     1844                        'child4': [20, 10, 50, 20],
     1845                    },
     1846                    'justify': {
     1847                        'flexbox': [80, 40],
     1848                        'child1': [40, 10, 0, 30],
     1849                        'child2': [20, 10, 60, 30],
     1850                        'child3': [40, 10, 0, 20],
     1851                        'child4': [20, 10, 60, 20],
     1852                    },
     1853                    'distribute': {
     1854                        'flexbox': [80, 40],
     1855                        'child1': [40, 10, 5, 30],
     1856                        'child2': [20, 10, 55, 30],
     1857                        'child3': [40, 10, 5, 20],
     1858                        'child4': [20, 10, 55, 20],
    18591859                    },
    18601860                },
     
    18631863                'wrap': {
    18641864                    'start': {
    1865                         'flexbox': [80, 20],
    1866                         'child1': [40, 10, 0, 10],
    1867                         'child2': [20, 10, 40, 10],
    1868                         'child3': [40, 10, 0, 0],
    1869                         'child4': [20, 10, 40, 0],
    1870                     },
    1871                     'end': {
    1872                         'flexbox': [80, 20],
    1873                         'child1': [40, 10, 20, 10],
    1874                         'child2': [20, 10, 60, 10],
    1875                         'child3': [40, 10, 20, 0],
    1876                         'child4': [20, 10, 60, 0],
    1877                     },
    1878                     'center': {
    1879                         'flexbox': [80, 20],
    1880                         'child1': [40, 10, 10, 10],
    1881                         'child2': [20, 10, 50, 10],
    1882                         'child3': [40, 10, 10, 0],
    1883                         'child4': [20, 10, 50, 0],
    1884                     },
    1885                     'justify': {
    1886                         'flexbox': [80, 20],
    1887                         'child1': [40, 10, 0, 10],
    1888                         'child2': [20, 10, 60, 10],
    1889                         'child3': [40, 10, 0, 0],
    1890                         'child4': [20, 10, 60, 0],
    1891                     },
    1892                     'distribute': {
    1893                         'flexbox': [80, 20],
    1894                         'child1': [40, 10, 5, 10],
    1895                         'child2': [20, 10, 55, 10],
    1896                         'child3': [40, 10, 5, 0],
    1897                         'child4': [20, 10, 55, 0],
    1898                     },
    1899                 },
    1900                 'wrap-reverse': {
    1901                     'start': {
    1902                         'flexbox': [80, 20],
     1865                        'flexbox': [80, 40],
     1866                        'child1': [40, 10, 0, 30],
     1867                        'child2': [20, 10, 40, 30],
     1868                        'child3': [40, 10, 0, 20],
     1869                        'child4': [20, 10, 40, 20],
     1870                    },
     1871                    'end': {
     1872                        'flexbox': [80, 40],
     1873                        'child1': [40, 10, 20, 30],
     1874                        'child2': [20, 10, 60, 30],
     1875                        'child3': [40, 10, 20, 20],
     1876                        'child4': [20, 10, 60, 20],
     1877                    },
     1878                    'center': {
     1879                        'flexbox': [80, 40],
     1880                        'child1': [40, 10, 10, 30],
     1881                        'child2': [20, 10, 50, 30],
     1882                        'child3': [40, 10, 10, 20],
     1883                        'child4': [20, 10, 50, 20],
     1884                    },
     1885                    'justify': {
     1886                        'flexbox': [80, 40],
     1887                        'child1': [40, 10, 0, 30],
     1888                        'child2': [20, 10, 60, 30],
     1889                        'child3': [40, 10, 0, 20],
     1890                        'child4': [20, 10, 60, 20],
     1891                    },
     1892                    'distribute': {
     1893                        'flexbox': [80, 40],
     1894                        'child1': [40, 10, 5, 30],
     1895                        'child2': [20, 10, 55, 30],
     1896                        'child3': [40, 10, 5, 20],
     1897                        'child4': [20, 10, 55, 20],
     1898                    },
     1899                },
     1900                'wrap-reverse': {
     1901                    'start': {
     1902                        'flexbox': [80, 40],
    19031903                        'child1': [40, 10, 0, 0],
    19041904                        'child2': [20, 10, 40, 0],
     
    19071907                    },
    19081908                    'end': {
    1909                         'flexbox': [80, 20],
     1909                        'flexbox': [80, 40],
    19101910                        'child1': [40, 10, 20, 0],
    19111911                        'child2': [20, 10, 60, 0],
     
    19141914                    },
    19151915                    'center': {
    1916                         'flexbox': [80, 20],
     1916                        'flexbox': [80, 40],
    19171917                        'child1': [40, 10, 10, 0],
    19181918                        'child2': [20, 10, 50, 0],
     
    19211921                    },
    19221922                    'justify': {
    1923                         'flexbox': [80, 20],
     1923                        'flexbox': [80, 40],
    19241924                        'child1': [40, 10, 0, 0],
    19251925                        'child2': [20, 10, 60, 0],
     
    19281928                    },
    19291929                    'distribute': {
    1930                         'flexbox': [80, 20],
     1930                        'flexbox': [80, 40],
    19311931                        'child1': [40, 10, 5, 0],
    19321932                        'child2': [20, 10, 55, 0],
     
    20972097                'wrap': {
    20982098                    'start': {
    2099                         'flexbox': [80, 20],
     2099                        'flexbox': [80, 40],
    21002100                        'child1': [40, 10, 0, 0],
    21012101                        'child2': [20, 10, 40, 0],
     
    21042104                    },
    21052105                    'end': {
    2106                         'flexbox': [80, 20],
     2106                        'flexbox': [80, 40],
    21072107                        'child1': [40, 10, 20, 0],
    21082108                        'child2': [20, 10, 60, 0],
     
    21112111                    },
    21122112                    'center': {
    2113                         'flexbox': [80, 20],
     2113                        'flexbox': [80, 40],
    21142114                        'child1': [40, 10, 10, 0],
    21152115                        'child2': [20, 10, 50, 0],
     
    21182118                    },
    21192119                    'justify': {
    2120                         'flexbox': [80, 20],
     2120                        'flexbox': [80, 40],
    21212121                        'child1': [40, 10, 0, 0],
    21222122                        'child2': [20, 10, 60, 0],
     
    21252125                    },
    21262126                    'distribute': {
    2127                         'flexbox': [80, 20],
     2127                        'flexbox': [80, 40],
    21282128                        'child1': [40, 10, 5, 0],
    21292129                        'child2': [20, 10, 55, 0],
     
    21342134                'wrap-reverse': {
    21352135                    'start': {
    2136                         'flexbox': [80, 20],
    2137                         'child1': [40, 10, 0, 10],
    2138                         'child2': [20, 10, 40, 10],
    2139                         'child3': [40, 10, 0, 0],
    2140                         'child4': [20, 10, 40, 0],
    2141                     },
    2142                     'end': {
    2143                         'flexbox': [80, 20],
    2144                         'child1': [40, 10, 20, 10],
    2145                         'child2': [20, 10, 60, 10],
    2146                         'child3': [40, 10, 20, 0],
    2147                         'child4': [20, 10, 60, 0],
    2148                     },
    2149                     'center': {
    2150                         'flexbox': [80, 20],
    2151                         'child1': [40, 10, 10, 10],
    2152                         'child2': [20, 10, 50, 10],
    2153                         'child3': [40, 10, 10, 0],
    2154                         'child4': [20, 10, 50, 0],
    2155                     },
    2156                     'justify': {
    2157                         'flexbox': [80, 20],
    2158                         'child1': [40, 10, 0, 10],
    2159                         'child2': [20, 10, 60, 10],
    2160                         'child3': [40, 10, 0, 0],
    2161                         'child4': [20, 10, 60, 0],
    2162                     },
    2163                     'distribute': {
    2164                         'flexbox': [80, 20],
    2165                         'child1': [40, 10, 5, 10],
    2166                         'child2': [20, 10, 55, 10],
    2167                         'child3': [40, 10, 5, 0],
    2168                         'child4': [20, 10, 55, 0],
     2136                        'flexbox': [80, 40],
     2137                        'child1': [40, 10, 0, 30],
     2138                        'child2': [20, 10, 40, 30],
     2139                        'child3': [40, 10, 0, 20],
     2140                        'child4': [20, 10, 40, 20],
     2141                    },
     2142                    'end': {
     2143                        'flexbox': [80, 40],
     2144                        'child1': [40, 10, 20, 30],
     2145                        'child2': [20, 10, 60, 30],
     2146                        'child3': [40, 10, 20, 20],
     2147                        'child4': [20, 10, 60, 20],
     2148                    },
     2149                    'center': {
     2150                        'flexbox': [80, 40],
     2151                        'child1': [40, 10, 10, 30],
     2152                        'child2': [20, 10, 50, 30],
     2153                        'child3': [40, 10, 10, 20],
     2154                        'child4': [20, 10, 50, 20],
     2155                    },
     2156                    'justify': {
     2157                        'flexbox': [80, 40],
     2158                        'child1': [40, 10, 0, 30],
     2159                        'child2': [20, 10, 60, 30],
     2160                        'child3': [40, 10, 0, 20],
     2161                        'child4': [20, 10, 60, 20],
     2162                    },
     2163                    'distribute': {
     2164                        'flexbox': [80, 40],
     2165                        'child1': [40, 10, 5, 30],
     2166                        'child2': [20, 10, 55, 30],
     2167                        'child3': [40, 10, 5, 20],
     2168                        'child4': [20, 10, 55, 20],
    21692169                    },
    21702170                },
     
    21732173                'wrap': {
    21742174                    'start': {
    2175                         'flexbox': [80, 20],
    2176                         'child1': [40, 10, 0, 10],
    2177                         'child2': [20, 10, 40, 10],
    2178                         'child3': [40, 10, 0, 0],
    2179                         'child4': [20, 10, 40, 0],
    2180                     },
    2181                     'end': {
    2182                         'flexbox': [80, 20],
    2183                         'child1': [40, 10, 20, 10],
    2184                         'child2': [20, 10, 60, 10],
    2185                         'child3': [40, 10, 20, 0],
    2186                         'child4': [20, 10, 60, 0],
    2187                     },
    2188                     'center': {
    2189                         'flexbox': [80, 20],
    2190                         'child1': [40, 10, 10, 10],
    2191                         'child2': [20, 10, 50, 10],
    2192                         'child3': [40, 10, 10, 0],
    2193                         'child4': [20, 10, 50, 0],
    2194                     },
    2195                     'justify': {
    2196                         'flexbox': [80, 20],
    2197                         'child1': [40, 10, 0, 10],
    2198                         'child2': [20, 10, 60, 10],
    2199                         'child3': [40, 10, 0, 0],
    2200                         'child4': [20, 10, 60, 0],
    2201                     },
    2202                     'distribute': {
    2203                         'flexbox': [80, 20],
    2204                         'child1': [40, 10, 5, 10],
    2205                         'child2': [20, 10, 55, 10],
    2206                         'child3': [40, 10, 5, 0],
    2207                         'child4': [20, 10, 55, 0],
    2208                     },
    2209                 },
    2210                 'wrap-reverse': {
    2211                     'start': {
    2212                         'flexbox': [80, 20],
     2175                        'flexbox': [80, 40],
     2176                        'child1': [40, 10, 0, 30],
     2177                        'child2': [20, 10, 40, 30],
     2178                        'child3': [40, 10, 0, 20],
     2179                        'child4': [20, 10, 40, 20],
     2180                    },
     2181                    'end': {
     2182                        'flexbox': [80, 40],
     2183                        'child1': [40, 10, 20, 30],
     2184                        'child2': [20, 10, 60, 30],
     2185                        'child3': [40, 10, 20, 20],
     2186                        'child4': [20, 10, 60, 20],
     2187                    },
     2188                    'center': {
     2189                        'flexbox': [80, 40],
     2190                        'child1': [40, 10, 10, 30],
     2191                        'child2': [20, 10, 50, 30],
     2192                        'child3': [40, 10, 10, 20],
     2193                        'child4': [20, 10, 50, 20],
     2194                    },
     2195                    'justify': {
     2196                        'flexbox': [80, 40],
     2197                        'child1': [40, 10, 0, 30],
     2198                        'child2': [20, 10, 60, 30],
     2199                        'child3': [40, 10, 0, 20],
     2200                        'child4': [20, 10, 60, 20],
     2201                    },
     2202                    'distribute': {
     2203                        'flexbox': [80, 40],
     2204                        'child1': [40, 10, 5, 30],
     2205                        'child2': [20, 10, 55, 30],
     2206                        'child3': [40, 10, 5, 20],
     2207                        'child4': [20, 10, 55, 20],
     2208                    },
     2209                },
     2210                'wrap-reverse': {
     2211                    'start': {
     2212                        'flexbox': [80, 40],
    22132213                        'child1': [40, 10, 0, 0],
    22142214                        'child2': [20, 10, 40, 0],
     
    22172217                    },
    22182218                    'end': {
    2219                         'flexbox': [80, 20],
     2219                        'flexbox': [80, 40],
    22202220                        'child1': [40, 10, 20, 0],
    22212221                        'child2': [20, 10, 60, 0],
     
    22242224                    },
    22252225                    'center': {
    2226                         'flexbox': [80, 20],
     2226                        'flexbox': [80, 40],
    22272227                        'child1': [40, 10, 10, 0],
    22282228                        'child2': [20, 10, 50, 0],
     
    22312231                    },
    22322232                    'justify': {
    2233                         'flexbox': [80, 20],
     2233                        'flexbox': [80, 40],
    22342234                        'child1': [40, 10, 0, 0],
    22352235                        'child2': [20, 10, 60, 0],
     
    22382238                    },
    22392239                    'distribute': {
    2240                         'flexbox': [80, 20],
     2240                        'flexbox': [80, 40],
    22412241                        'child1': [40, 10, 5, 0],
    22422242                        'child2': [20, 10, 55, 0],
     
    24052405                'wrap': {
    24062406                    'start': {
    2407                         'flexbox': [80, 20],
     2407                        'flexbox': [80, 40],
    24082408                        'child1': [40, 10, 40, 0],
    24092409                        'child2': [20, 10, 20, 0],
     
    24122412                    },
    24132413                    'end': {
    2414                         'flexbox': [80, 20],
     2414                        'flexbox': [80, 40],
    24152415                        'child1': [40, 10, 20, 0],
    24162416                        'child2': [20, 10, 0, 0],
     
    24192419                    },
    24202420                    'center': {
    2421                         'flexbox': [80, 20],
     2421                        'flexbox': [80, 40],
    24222422                        'child1': [40, 10, 30, 0],
    24232423                        'child2': [20, 10, 10, 0],
     
    24262426                    },
    24272427                    'justify': {
    2428                         'flexbox': [80, 20],
     2428                        'flexbox': [80, 40],
    24292429                        'child1': [40, 10, 40, 0],
    24302430                        'child2': [20, 10, 0, 0],
     
    24332433                    },
    24342434                    'distribute': {
    2435                         'flexbox': [80, 20],
     2435                        'flexbox': [80, 40],
    24362436                        'child1': [40, 10, 35, 0],
    24372437                        'child2': [20, 10, 5, 0],
     
    24422442                'wrap-reverse': {
    24432443                    'start': {
    2444                         'flexbox': [80, 20],
    2445                         'child1': [40, 10, 40, 10],
    2446                         'child2': [20, 10, 20, 10],
    2447                         'child3': [40, 10, 40, 0],
    2448                         'child4': [20, 10, 20, 0],
    2449                     },
    2450                     'end': {
    2451                         'flexbox': [80, 20],
    2452                         'child1': [40, 10, 20, 10],
    2453                         'child2': [20, 10, 0, 10],
    2454                         'child3': [40, 10, 20, 0],
    2455                         'child4': [20, 10, 0, 0],
    2456                     },
    2457                     'center': {
    2458                         'flexbox': [80, 20],
    2459                         'child1': [40, 10, 30, 10],
    2460                         'child2': [20, 10, 10, 10],
    2461                         'child3': [40, 10, 30, 0],
    2462                         'child4': [20, 10, 10, 0],
    2463                     },
    2464                     'justify': {
    2465                         'flexbox': [80, 20],
    2466                         'child1': [40, 10, 40, 10],
    2467                         'child2': [20, 10, 0, 10],
    2468                         'child3': [40, 10, 40, 0],
    2469                         'child4': [20, 10, 0, 0],
    2470                     },
    2471                     'distribute': {
    2472                         'flexbox': [80, 20],
    2473                         'child1': [40, 10, 35, 10],
    2474                         'child2': [20, 10, 5, 10],
    2475                         'child3': [40, 10, 35, 0],
    2476                         'child4': [20, 10, 5, 0],
     2444                        'flexbox': [80, 40],
     2445                        'child1': [40, 10, 40, 30],
     2446                        'child2': [20, 10, 20, 30],
     2447                        'child3': [40, 10, 40, 20],
     2448                        'child4': [20, 10, 20, 20],
     2449                    },
     2450                    'end': {
     2451                        'flexbox': [80, 40],
     2452                        'child1': [40, 10, 20, 30],
     2453                        'child2': [20, 10, 0, 30],
     2454                        'child3': [40, 10, 20, 20],
     2455                        'child4': [20, 10, 0, 20],
     2456                    },
     2457                    'center': {
     2458                        'flexbox': [80, 40],
     2459                        'child1': [40, 10, 30, 30],
     2460                        'child2': [20, 10, 10, 30],
     2461                        'child3': [40, 10, 30, 20],
     2462                        'child4': [20, 10, 10, 20],
     2463                    },
     2464                    'justify': {
     2465                        'flexbox': [80, 40],
     2466                        'child1': [40, 10, 40, 30],
     2467                        'child2': [20, 10, 0, 30],
     2468                        'child3': [40, 10, 40, 20],
     2469                        'child4': [20, 10, 0, 20],
     2470                    },
     2471                    'distribute': {
     2472                        'flexbox': [80, 40],
     2473                        'child1': [40, 10, 35, 30],
     2474                        'child2': [20, 10, 5, 30],
     2475                        'child3': [40, 10, 35, 20],
     2476                        'child4': [20, 10, 5, 20],
    24772477                    },
    24782478                },
     
    24812481                'wrap': {
    24822482                    'start': {
    2483                         'flexbox': [80, 20],
    2484                         'child1': [40, 10, 40, 10],
    2485                         'child2': [20, 10, 20, 10],
    2486                         'child3': [40, 10, 40, 0],
    2487                         'child4': [20, 10, 20, 0],
    2488                     },
    2489                     'end': {
    2490                         'flexbox': [80, 20],
    2491                         'child1': [40, 10, 20, 10],
    2492                         'child2': [20, 10, 0, 10],
    2493                         'child3': [40, 10, 20, 0],
    2494                         'child4': [20, 10, 0, 0],
    2495                     },
    2496                     'center': {
    2497                         'flexbox': [80, 20],
    2498                         'child1': [40, 10, 30, 10],
    2499                         'child2': [20, 10, 10, 10],
    2500                         'child3': [40, 10, 30, 0],
    2501                         'child4': [20, 10, 10, 0],
    2502                     },
    2503                     'justify': {
    2504                         'flexbox': [80, 20],
    2505                         'child1': [40, 10, 40, 10],
    2506                         'child2': [20, 10, 0, 10],
    2507                         'child3': [40, 10, 40, 0],
    2508                         'child4': [20, 10, 0, 0],
    2509                     },
    2510                     'distribute': {
    2511                         'flexbox': [80, 20],
    2512                         'child1': [40, 10, 35, 10],
    2513                         'child2': [20, 10, 5, 10],
    2514                         'child3': [40, 10, 35, 0],
    2515                         'child4': [20, 10, 5, 0],
    2516                     },
    2517                 },
    2518                 'wrap-reverse': {
    2519                     'start': {
    2520                         'flexbox': [80, 20],
     2483                        'flexbox': [80, 40],
     2484                        'child1': [40, 10, 40, 30],
     2485                        'child2': [20, 10, 20, 30],
     2486                        'child3': [40, 10, 40, 20],
     2487                        'child4': [20, 10, 20, 20],
     2488                    },
     2489                    'end': {
     2490                        'flexbox': [80, 40],
     2491                        'child1': [40, 10, 20, 30],
     2492                        'child2': [20, 10, 0, 30],
     2493                        'child3': [40, 10, 20, 20],
     2494                        'child4': [20, 10, 0, 20],
     2495                    },
     2496                    'center': {
     2497                        'flexbox': [80, 40],
     2498                        'child1': [40, 10, 30, 30],
     2499                        'child2': [20, 10, 10, 30],
     2500                        'child3': [40, 10, 30, 20],
     2501                        'child4': [20, 10, 10, 20],
     2502                    },
     2503                    'justify': {
     2504                        'flexbox': [80, 40],
     2505                        'child1': [40, 10, 40, 30],
     2506                        'child2': [20, 10, 0, 30],
     2507                        'child3': [40, 10, 40, 20],
     2508                        'child4': [20, 10, 0, 20],
     2509                    },
     2510                    'distribute': {
     2511                        'flexbox': [80, 40],
     2512                        'child1': [40, 10, 35, 30],
     2513                        'child2': [20, 10, 5, 30],
     2514                        'child3': [40, 10, 35, 20],
     2515                        'child4': [20, 10, 5, 20],
     2516                    },
     2517                },
     2518                'wrap-reverse': {
     2519                    'start': {
     2520                        'flexbox': [80, 40],
    25212521                        'child1': [40, 10, 40, 0],
    25222522                        'child2': [20, 10, 20, 0],
     
    25252525                    },
    25262526                    'end': {
    2527                         'flexbox': [80, 20],
     2527                        'flexbox': [80, 40],
    25282528                        'child1': [40, 10, 20, 0],
    25292529                        'child2': [20, 10, 0, 0],
     
    25322532                    },
    25332533                    'center': {
    2534                         'flexbox': [80, 20],
     2534                        'flexbox': [80, 40],
    25352535                        'child1': [40, 10, 30, 0],
    25362536                        'child2': [20, 10, 10, 0],
     
    25392539                    },
    25402540                    'justify': {
    2541                         'flexbox': [80, 20],
     2541                        'flexbox': [80, 40],
    25422542                        'child1': [40, 10, 40, 0],
    25432543                        'child2': [20, 10, 0, 0],
     
    25462546                    },
    25472547                    'distribute': {
    2548                         'flexbox': [80, 20],
     2548                        'flexbox': [80, 40],
    25492549                        'child1': [40, 10, 35, 0],
    25502550                        'child2': [20, 10, 5, 0],
  • trunk/LayoutTests/css3/flexbox/multiline.html

    r110209 r110583  
    422422            'ltr': {
    423423                'wrap': {
    424                     'flexbox': [60, 45],
     424                    'flexbox': [60, 50],
    425425                    'child1': [30, 5, 30, 0],
    426426                    'child2': [30, 10, 0, 0],
     
    430430                },
    431431                'wrap-reverse': {
    432                     'flexbox': [60, 45],
    433                     'child1': [30, 5, 30, 40],
    434                     'child2': [30, 10, 0, 35],
    435                     'child3': [60, 5, 0, 30],
    436                     'child4': [70, 20, -10, 10],
    437                     'child5': [60, 10, 0, 0],
    438                 },
    439             },
    440             'rtl': {
    441                 'wrap': {
    442                     'flexbox': [60, 45],
    443                     'child1': [30, 5, 30, 40],
    444                     'child2': [30, 10, 0, 35],
    445                     'child3': [60, 5, 0, 30],
    446                     'child4': [70, 20, -10, 10],
    447                     'child5': [60, 10, 0, 0],
    448                 },
    449                 'wrap-reverse': {
    450                     'flexbox': [60, 45],
     432                    'flexbox': [60, 50],
     433                    'child1': [30, 5, 30, 45],
     434                    'child2': [30, 10, 0, 40],
     435                    'child3': [60, 5, 0, 35],
     436                    'child4': [70, 20, -10, 15],
     437                    'child5': [60, 10, 0, 5],
     438                },
     439            },
     440            'rtl': {
     441                'wrap': {
     442                    'flexbox': [60, 50],
     443                    'child1': [30, 5, 30, 45],
     444                    'child2': [30, 10, 0, 40],
     445                    'child3': [60, 5, 0, 35],
     446                    'child4': [70, 20, -10, 15],
     447                    'child5': [60, 10, 0, 5],
     448                },
     449                'wrap-reverse': {
     450                    'flexbox': [60, 50],
    451451                    'child1': [30, 5, 30, 0],
    452452                    'child2': [30, 10, 0, 0],
     
    498498            'ltr': {
    499499                'wrap': {
    500                     'flexbox': [60, 45],
     500                    'flexbox': [60, 50],
    501501                    'child1': [30, 5, 0, 0],
    502502                    'child2': [30, 10, 30, 0],
     
    506506                },
    507507                'wrap-reverse': {
    508                     'flexbox': [60, 45],
    509                     'child1': [30, 5, 0, 40],
    510                     'child2': [30, 10, 30, 35],
    511                     'child3': [60, 5, 0, 30],
    512                     'child4': [70, 20, 0, 10],
    513                     'child5': [60, 10, 0, 0],
    514                 },
    515             },
    516             'rtl': {
    517                 'wrap': {
    518                     'flexbox': [60, 45],
    519                     'child1': [30, 5, 0, 40],
    520                     'child2': [30, 10, 30, 35],
    521                     'child3': [60, 5, 0, 30],
    522                     'child4': [70, 20, 0, 10],
    523                     'child5': [60, 10, 0, 0],
    524                 },
    525                 'wrap-reverse': {
    526                     'flexbox': [60, 45],
     508                    'flexbox': [60, 50],
     509                    'child1': [30, 5, 0, 45],
     510                    'child2': [30, 10, 30, 40],
     511                    'child3': [60, 5, 0, 35],
     512                    'child4': [70, 20, 0, 15],
     513                    'child5': [60, 10, 0, 5],
     514                },
     515            },
     516            'rtl': {
     517                'wrap': {
     518                    'flexbox': [60, 50],
     519                    'child1': [30, 5, 0, 45],
     520                    'child2': [30, 10, 30, 40],
     521                    'child3': [60, 5, 0, 35],
     522                    'child4': [70, 20, 0, 15],
     523                    'child5': [60, 10, 0, 5],
     524                },
     525                'wrap-reverse': {
     526                    'flexbox': [60, 50],
    527527                    'child1': [30, 5, 0, 0],
    528528                    'child2': [30, 10, 30, 0],
     
    576576            'ltr': {
    577577                'wrap': {
    578                     'flexbox': [60, 45],
     578                    'flexbox': [60, 50],
    579579                    'child1': [30, 5, 0, 0],
    580580                    'child2': [30, 10, 30, 0],
     
    584584                },
    585585                'wrap-reverse': {
    586                     'flexbox': [60, 45],
    587                     'child1': [30, 5, 0, 40],
    588                     'child2': [30, 10, 30, 35],
    589                     'child3': [60, 5, 0, 30],
    590                     'child4': [70, 20, 0, 10],
    591                     'child5': [60, 10, 0, 0],
    592                 },
    593             },
    594             'rtl': {
    595                 'wrap': {
    596                     'flexbox': [60, 45],
    597                     'child1': [30, 5, 0, 40],
    598                     'child2': [30, 10, 30, 35],
    599                     'child3': [60, 5, 0, 30],
    600                     'child4': [70, 20, 0, 10],
    601                     'child5': [60, 10, 0, 0],
    602                 },
    603                 'wrap-reverse': {
    604                     'flexbox': [60, 45],
     586                    'flexbox': [60, 50],
     587                    'child1': [30, 5, 0, 45],
     588                    'child2': [30, 10, 30, 40],
     589                    'child3': [60, 5, 0, 35],
     590                    'child4': [70, 20, 0, 15],
     591                    'child5': [60, 10, 0, 5],
     592                },
     593            },
     594            'rtl': {
     595                'wrap': {
     596                    'flexbox': [60, 50],
     597                    'child1': [30, 5, 0, 45],
     598                    'child2': [30, 10, 30, 40],
     599                    'child3': [60, 5, 0, 35],
     600                    'child4': [70, 20, 0, 15],
     601                    'child5': [60, 10, 0, 5],
     602                },
     603                'wrap-reverse': {
     604                    'flexbox': [60, 50],
    605605                    'child1': [30, 5, 0, 0],
    606606                    'child2': [30, 10, 30, 0],
     
    652652            'ltr': {
    653653                'wrap': {
    654                     'flexbox': [60, 45],
     654                    'flexbox': [60, 50],
    655655                    'child1': [30, 5, 30, 0],
    656656                    'child2': [30, 10, 0, 0],
     
    660660                },
    661661                'wrap-reverse': {
    662                     'flexbox': [60, 45],
    663                     'child1': [30, 5, 30, 40],
    664                     'child2': [30, 10, 0, 35],
    665                     'child3': [60, 5, 0, 30],
    666                     'child4': [70, 20, -10, 10],
    667                     'child5': [60, 10, 0, 0],
    668                 },
    669             },
    670             'rtl': {
    671                 'wrap': {
    672                     'flexbox': [60, 45],
    673                     'child1': [30, 5, 30, 40],
    674                     'child2': [30, 10, 0, 35],
    675                     'child3': [60, 5, 0, 30],
    676                     'child4': [70, 20, -10, 10],
    677                     'child5': [60, 10, 0, 0],
    678                 },
    679                 'wrap-reverse': {
    680                     'flexbox': [60, 45],
     662                    'flexbox': [60, 50],
     663                    'child1': [30, 5, 30, 45],
     664                    'child2': [30, 10, 0, 40],
     665                    'child3': [60, 5, 0, 35],
     666                    'child4': [70, 20, -10, 15],
     667                    'child5': [60, 10, 0, 5],
     668                },
     669            },
     670            'rtl': {
     671                'wrap': {
     672                    'flexbox': [60, 50],
     673                    'child1': [30, 5, 30, 45],
     674                    'child2': [30, 10, 0, 40],
     675                    'child3': [60, 5, 0, 35],
     676                    'child4': [70, 20, -10, 15],
     677                    'child5': [60, 10, 0, 5],
     678                },
     679                'wrap-reverse': {
     680                    'flexbox': [60, 50],
    681681                    'child1': [30, 5, 30, 0],
    682682                    'child2': [30, 10, 0, 0],
  • trunk/Source/WebCore/ChangeLog

    r110581 r110583  
     12012-03-13  Tony Chang  <tony@chromium.org>
     2
     3        flexbox's computePreferredLogicalWidth needs to take multiline into account
     4        https://bugs.webkit.org/show_bug.cgi?id=80931
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Tests: css3/flexbox/multiline-shrink-to-fit-expected.html
     9               css3/flexbox/multiline-shrink-to-fit.html
     10
     11        * rendering/RenderFlexibleBox.cpp:
     12        (WebCore::RenderFlexibleBox::computePreferredLogicalWidths): Set min/max preferredLogicalWidth based on always breaking or never breaking.
     13        (WebCore::RenderFlexibleBox::computeNextFlexLine): Add a FIXME.
     14        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Don't change the width after computePreferredWidth has been called.
     15
    1162012-03-13  Sheriff Bot  <webkit.review.bot@gmail.com>
    217
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r110257 r110583  
    189189            maxPreferredLogicalWidth += margin;
    190190            if (!isColumnFlow()) {
    191                 m_minPreferredLogicalWidth += minPreferredLogicalWidth;
    192191                m_maxPreferredLogicalWidth += maxPreferredLogicalWidth;
     192                if (isMultiline()) {
     193                    // For multiline, the min preferred width is if you put a break between each item.
     194                    m_minPreferredLogicalWidth = std::max(m_minPreferredLogicalWidth, minPreferredLogicalWidth);
     195                } else
     196                    m_minPreferredLogicalWidth += minPreferredLogicalWidth;
    193197            } else {
    194198                m_minPreferredLogicalWidth = std::max(minPreferredLogicalWidth, m_minPreferredLogicalWidth);
    195                 m_maxPreferredLogicalWidth = std::max(maxPreferredLogicalWidth, m_maxPreferredLogicalWidth);
     199                if (isMultiline()) {
     200                    // For multiline, the max preferred width is if you put a break between each item.
     201                    m_maxPreferredLogicalWidth += maxPreferredLogicalWidth;
     202                } else
     203                    m_maxPreferredLogicalWidth = std::max(maxPreferredLogicalWidth, m_maxPreferredLogicalWidth);
    196204            }
    197205        }
     
    683691            childMainAxisExtent += child->marginHeight();
    684692
     693        // FIXME: For auto sized column flexbox, mainAxisContentExtent (the height) hasn't been computed yet so we break
     694        // after the first child. If the height is auto, we need to look at max-height to determine the line breaks.
     695        // https://bugs.webkit.org/show_bug.cgi?id=80929
    685696        if (isMultiline() && preferredMainAxisExtent + childMainAxisExtent > mainAxisContentExtent() && orderedChildren.size() > 0)
    686697            break;
     
    846857        } else
    847858            childCrossAxisMarginBoxExtent = crossAxisExtentForChild(child) + crossAxisMarginExtentForChild(child);
    848         if (crossAxisLength().isAuto())
    849             setCrossAxisExtent(std::max(crossAxisExtent(), crossAxisOffset + flowAwareBorderAfter() + flowAwarePaddingAfter() + childCrossAxisMarginBoxExtent + crossAxisScrollbarExtent()));
     859        if (!isColumnFlow() && style()->logicalHeight().isAuto())
     860            setLogicalHeight(std::max(logicalHeight(), crossAxisOffset + flowAwareBorderAfter() + flowAwarePaddingAfter() + childCrossAxisMarginBoxExtent + crossAxisScrollbarExtent()));
    850861        maxChildCrossAxisExtent = std::max(maxChildCrossAxisExtent, childCrossAxisMarginBoxExtent);
    851862
Note: See TracChangeset for help on using the changeset viewer.