Changeset 118279 in webkit


Ignore:
Timestamp:
May 23, 2012 5:19:40 PM (12 years ago)
Author:
tony@chromium.org
Message:

auto margins on flexbox should allocate space in the cross direction
​https://bugs.webkit.org/show_bug.cgi?id=86913

Reviewed by Ojan Vafai.

Source/WebCore:

Test: css3/flexbox/auto-margins.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis):
(WebCore):
(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): If we have flex-align: baseline and auto margins, we ignore flex-align: baseline.
(WebCore::RenderFlexibleBox::alignChildren): auto margins apply before flex-align.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

  • css3/flexbox/auto-margins-expected.html: Added.
  • css3/flexbox/auto-margins.html: Added. These are the test cases in the spec.
  • css3/flexbox/flex-align-vertical-writing-mode.html: Fix tests with auto margins and add more tests.

Also reduce the height so it's easier to see the test cases (these vertical tests don't check the height).

  • css3/flexbox/flex-align.html: Fix tests with auto margins and add more tests.
  • css3/flexbox/flex-flow-auto-margins.html: Fix results now that we handle auto in the cross direction.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r118267 r118279  
     12012-05-23  Tony Chang  <tony@chromium.org>
     2
     3        auto margins on flexbox should allocate space in the cross direction
     4        https://bugs.webkit.org/show_bug.cgi?id=86913
     5
     6        Reviewed by Ojan Vafai.
     7
     8        * css3/flexbox/auto-margins-expected.html: Added.
     9        * css3/flexbox/auto-margins.html: Added. These are the test cases in the spec.
     10        * css3/flexbox/flex-align-vertical-writing-mode.html: Fix tests with auto margins and add more tests.
     11        Also reduce the height so it's easier to see the test cases (these vertical tests don't check the height).
     12        * css3/flexbox/flex-align.html: Fix tests with auto margins and add more tests.
     13        * css3/flexbox/flex-flow-auto-margins.html: Fix results now that we handle auto in the cross direction.
     14
    1152012-05-23  Joshua Bell  <jsbell@chromium.org>
    216

  • trunk/LayoutTests/css3/flexbox/flex-align-vertical-writing-mode.html

    r117385 r118279  
    66}
    77.flexbox {
    8     height: 600px;
     8    height: 100px;
    99    display: -webkit-flex;
    1010    background-color: #aaa;
    … …  
    3636.flexbox :nth-child(7) {
    3737    background-color: lime;
     38}
     39.flexbox :nth-child(8) {
     40    background-color: lightblue;
     41}
     42.flexbox :nth-child(9) {
     43    background-color: darkred;
     44}
     45.flexbox :nth-child(10) {
     46    background-color: gold;
     47}
     48.flexbox :nth-child(11) {
     49    background-color: salmon;
    3850}
    3951</style>
    … …  
    5365
    5466<div class="flexbox">
    55   <div data-expected-width="60"  data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
    56   <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
     67  <div data-expected-width="60"  data-offset-x="60" style="-webkit-flex: 1 0 0; width: 60px;"></div>
     68  <div data-expected-width="120" data-offset-x="0" style="-webkit-flex: 1 0 0;"></div>
     69  <div data-expected-width="60"  data-offset-x="30" style="-webkit-flex: 1 0 0; width: 60px; margin: auto;"></div>
     70  <div data-expected-width="0" data-offset-x="60" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div>
    5771  <div data-expected-width="100" data-offset-x="10" style="-webkit-flex: 1 0 0; width: 100px; margin: 0 10px;"></div>
    5872  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; width: 50px; margin: 0 20px 0 10px;"></div>
    … …  
    8094  <div data-expected-width="0" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
    8195  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px;"></div>
    82   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
    83   <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: auto 0 0"></div>
     96  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto"></div>
     97  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 auto 0 0"></div>
     98  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 0 0 auto"></div>
    8499  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 25px"></div>
    85100  <div data-expected-width="50" data-offset-x="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; width: 50px; margin: 0 20px 0 10px;"></div>
    … …  
    90105  <div data-expected-width="0" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
    91106  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px;"></div>
    92   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
    93   <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: auto 0 0"></div>
     107  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto"></div>
     108  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 auto 0 0"></div>
     109  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 0 0 auto"></div>
    94110  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 25px"></div>
    95111  <div data-expected-width="50" data-offset-x="10" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; width: 50px; margin: 0 20px 0 10px;"></div>
    … …  
    101117  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px;"></div>
    102118  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto"></div>
    103   <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: auto 0 0"></div>
     119  <div data-expected-width="50" data-offset-x="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 auto 0 0"></div>
     120  <div data-expected-width="50" data-offset-x="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 0 0 auto"></div>
    104121  <div data-expected-width="50" data-offset-x="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 25px"></div>
    105122  <div data-expected-width="50" data-offset-x="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; width: 50px; margin: 0 20px 0 10px;"></div>

  • trunk/LayoutTests/css3/flexbox/flex-align.html

    r117385 r118279  
    3535.flexbox :nth-child(7) {
    3636    background-color: lime;
     37}
     38.flexbox :nth-child(8) {
     39    background-color: lightblue;
     40}
     41.flexbox :nth-child(9) {
     42    background-color: darkred;
     43}
     44.flexbox :nth-child(10) {
     45    background-color: gold;
     46}
     47.flexbox :nth-child(11) {
     48    background-color: salmon;
    3749}
    3850</style>
    … …  
    5264
    5365<div class="flexbox">
    54   <div data-expected-height="60"  data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div>
    55   <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div>
    56   <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
     66  <div data-expected-height="60"  data-offset-y="0" style="-webkit-flex: 1 0 0; height: 60px;"></div>
     67  <div data-expected-height="120" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
     68  <div data-expected-height="60"  data-offset-y="30" style="-webkit-flex: 1 0 0; height: 60px; margin: auto 0;"></div>
     69  <div data-expected-height="0" data-offset-y="120" style="-webkit-flex: 1 0 0; margin: auto 0 0;"></div>
     70  <div data-expected-height="0" data-offset-y="60" style="-webkit-flex: 1 0 0; margin: auto 0;"></div>
    5771  <div data-expected-height="100" data-offset-y="10" style="-webkit-flex: 1 0 0; height: 100px; margin: 10px 0;"></div>
    5872  <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>
    … …  
    97111    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0;"><div style="display:inline-block;"></div></div>
    98112    <div data-offset-y="20" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
     113    <div data-offset-y="50" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: auto 0;"></div>
     114    <div data-offset-y="30" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: 30px 0 auto;"><div style="display:inline-block;"></div></div>
     115    <div data-offset-y="80" style="-webkit-flex-item-align: baseline; -webkit-flex: 1 0 0; margin: auto 0 20px;"></div>
    99116    <div data-expected-height="100" data-offset-y="0" style="-webkit-flex-item-align: stretch; -webkit-flex: 1 0 0;"></div>
    100117</div>
    … …  
    158175
    159176<div class="flexbox">
    160   <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
     177  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
     178  <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px;"></div>
     179  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
    161180  <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px; margin: 0 0 auto"></div>
    162181  <div data-expected-height="70" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 70px;"></div>
    … …  
    167186  <div data-expected-height="0" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start;"></div>
    168187  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px;"></div>
    169   <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
    170   <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
     188  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0"></div>
     189  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: auto 0 0"></div>
     190  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 0 0 auto"></div>
    171191  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 25px 0"></div>
    172192  <div data-expected-height="50" data-offset-y="20" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: start; height: 50px; margin: 20px 0 10px;"></div>
    … …  
    177197  <div data-expected-height="0" data-offset-y="100" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end;"></div>
    178198  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
    179   <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
     199  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0"></div>
    180200  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: auto 0 0"></div>
     201  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 0 0 auto"></div>
    181202  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 25px 0"></div>
    182203  <div data-expected-height="50" data-offset-y="40" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; margin: 20px 0 10px;"></div>
    … …  
    188209  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
    189210  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0"></div>
    190   <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
     211  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: auto 0 0"></div>
     212  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 0 0 auto"></div>
     213  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 0 0 auto"></div>
    191214  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 25px 0"></div>
    192215  <div data-expected-height="50" data-offset-y="30" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; margin: 20px 0 10px;"></div>
    … …  
    198221  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
    199222  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
    200   <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
     223  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
     224  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
    201225  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div>
    202226</div>
    … …  
    206230  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: center; height: 50px;"></div>
    207231  <div data-expected-height="50" data-offset-y="50" style="-webkit-flex: 1 0 0; -webkit-flex-item-align: end; height: 50px;"></div>
    208   <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div>
     232  <div data-expected-height="50" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 50px;"></div>
     233  <div data-expected-height="50" data-offset-y="25" style="-webkit-flex: 1 0 0; height: 50px; margin: auto 0"></div>
    209234  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0;"></div>
    210235  <div data-expected-height="100" data-offset-y="0" style="-webkit-flex: 1 0 0; height: 100px;"></div>

  • trunk/LayoutTests/css3/flexbox/flex-flow-auto-margins.html

    r117897 r118279  
    138138            flexbox: physicalFlexBoxPosition,
    139139            column: [20, 20, 80, 73],
    140             row: [20, 20, 40, 73],
     140            row: [20, 20, 80, 73],
    141141            'column-reverse': [20, 20, 40, 73],
    142             'row-reverse': [20, 20, 40, 23],
    143         },
    144         ltr : {
    145             container: physicalContainerSize,
    146             flexbox: physicalFlexBoxPosition,
    147             column: [20, 20, 80, 23],
    148             row: [20, 20, 40, 23],
     142            'row-reverse': [20, 20, 80, 23],
     143        },
     144        ltr : {
     145            container: physicalContainerSize,
     146            flexbox: physicalFlexBoxPosition,
     147            column: [20, 20, 80, 23],
     148            row: [20, 20, 80, 23],
    149149            'column-reverse': [20, 20, 40, 23],
    150             'row-reverse': [20, 20, 40, 73],
     150            'row-reverse': [20, 20, 80, 73],
    151151        }
    152152    },
    … …  
    156156            flexbox: physicalFlexBoxPosition,
    157157            column: [20, 20, 80, 73],
    158             row: [20, 20, 120, 73],
     158            row: [20, 20, 80, 73],
    159159            'column-reverse': [20, 20, 48, 73],
    160             'row-reverse': [20, 20, 120, 23],
    161         },
    162         ltr : {
    163             container: physicalContainerSize,
    164             flexbox: physicalFlexBoxPosition,
    165             column: [20, 20, 80, 23],
    166             row: [20, 20, 120, 23],
     160            'row-reverse': [20, 20, 80, 23],
     161        },
     162        ltr : {
     163            container: physicalContainerSize,
     164            flexbox: physicalFlexBoxPosition,
     165            column: [20, 20, 80, 23],
     166            row: [20, 20, 80, 23],
    167167            'column-reverse': [20, 20, 48, 23],
    168             'row-reverse': [20, 20, 120, 73],
     168            'row-reverse': [20, 20, 80, 73],
    169169        }
    170170    }
    … …  
    177177            flexbox: [20, 10],
    178178            column: [20, 20, 22, 73],
    179             row: [20, 20, 22, 10],
     179            row: [20, 20, 22, 73],
    180180            'column-reverse': [20, 20, 92, 10],
    181             'row-reverse': [20, 20, 22, 10],
     181            'row-reverse': [20, 20, 22, 73],
    182182        },
    183183        ltr : {
    … …  
    185185            flexbox: [40, 10],
    186186            column: [20, 20, 118, 73],
    187             row: [20, 20, 118, 10],
     187            row: [20, 20, 118, 73],
    188188            'column-reverse': [20, 20, 48, 10],
    189             'row-reverse': [20, 20, 118, 10],
     189            'row-reverse': [20, 20, 118, 73],
    190190        }
    191191    },
    … …  
    213213            flexbox: [10, 20],
    214214            column: [20, 20, 73, 22],
    215             row: [20, 20, 10, 22],
     215            row: [20, 20, 73, 22],
    216216            'column-reverse': [20, 20, 23, 92],
    217             'row-reverse': [20, 20, 10, 22],
     217            'row-reverse': [20, 20, 73, 22],
    218218        },
    219219        ltr : {
    … …  
    221221            flexbox: [10, 40],
    222222            column: [20, 20, 73, 118],
    223             row: [20, 20, 10, 118],
     223            row: [20, 20, 73, 118],
    224224            'column-reverse': [20, 20, 23, 48],
    225             'row-reverse': [20, 20, 10, 118],
     225            'row-reverse': [20, 20, 73, 118],
    226226        }
    227227    },

  • trunk/Source/WebCore/ChangeLog

    r118275 r118279  
     12012-05-23  Tony Chang  <tony@chromium.org>
     2
     3        auto margins on flexbox should allocate space in the cross direction
     4        https://bugs.webkit.org/show_bug.cgi?id=86913
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Test: css3/flexbox/auto-margins.html
     9
     10        * rendering/RenderFlexibleBox.cpp:
     11        (WebCore::RenderFlexibleBox::hasAutoMarginsInCrossAxis):
     12        (WebCore):
     13        (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis):
     14        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): If we have flex-align: baseline and auto margins, we ignore flex-align: baseline.
     15        (WebCore::RenderFlexibleBox::alignChildren): auto margins apply before flex-align.
     16        * rendering/RenderFlexibleBox.h:
     17
    1182012-05-23  Kentaro Hara  <haraken@chromium.org>
    219

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r117897 r118279  
    689689}
    690690
     691bool RenderFlexibleBox::hasAutoMarginsInCrossAxis(RenderBox* child)
     692{
     693    if (isHorizontalFlow())
     694        return child->style()->marginTop().isAuto() || child->style()->marginBottom().isAuto();
     695    return child->style()->marginLeft().isAuto() || child->style()->marginRight().isAuto();
     696}
     697
    691698LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
    692699{
    693700    LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
    694701    return lineCrossAxisExtent - childCrossExtent;
     702}
     703
     704bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace)
     705{
     706    bool isHorizontal = isHorizontalFlow();
     707    Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft();
     708    Length end = isHorizontal ? child->style()->marginBottom() : child->style()->marginRight();
     709    if (start.isAuto() && end.isAuto()) {
     710        adjustAlignmentForChild(child, availableAlignmentSpace / 2);
     711        if (isHorizontal) {
     712            child->setMarginTop(availableAlignmentSpace / 2);
     713            child->setMarginBottom(availableAlignmentSpace / 2);
     714        } else {
     715            child->setMarginLeft(availableAlignmentSpace / 2);
     716            child->setMarginRight(availableAlignmentSpace / 2);
     717        }
     718        return true;
     719    }
     720    if (start.isAuto()) {
     721        adjustAlignmentForChild(child, availableAlignmentSpace);
     722        if (isHorizontal)
     723            child->setMarginTop(availableAlignmentSpace);
     724        else
     725            child->setMarginLeft(availableAlignmentSpace);
     726        return true;
     727    }
     728    if (end.isAuto()) {
     729        if (isHorizontal)
     730            child->setMarginBottom(availableAlignmentSpace);
     731        else
     732            child->setMarginRight(availableAlignmentSpace);
     733        return true;
     734    }
     735    return false;
    695736}
    696737
    … …  
    953994
    954995        LayoutUnit childCrossAxisMarginBoxExtent;
    955         if (flexAlignForChild(child) == AlignBaseline) {
     996        if (flexAlignForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child)) {
    956997            LayoutUnit ascent = marginBoxAscentForChild(child);
    957998            LayoutUnit descent = (crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child)) - ascent;
    … …  
    10971138        for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
    10981139            ASSERT(child);
     1140            if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child)))
     1141                continue;
     1142
    10991143            switch (flexAlignForChild(child)) {
    11001144            case AlignAuto:
    … …  
    11401184        for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
    11411185            ASSERT(child);
    1142             if (flexAlignForChild(child) == AlignBaseline && minMarginAfterBaseline)
     1186            if (flexAlignForChild(child) == AlignBaseline && !hasAutoMarginsInCrossAxis(child) && minMarginAfterBaseline)
    11431187                adjustAlignmentForChild(child, minMarginAfterBaseline);
    11441188        }

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r117897 r118279  
    104104    LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
    105105    void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
     106    bool hasAutoMarginsInCrossAxis(RenderBox* child);
     107    bool updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace);
    106108    void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
    107109
Note: See TracChangeset for help on using the changeset viewer.