Changeset 189169 in webkit


Ignore:
Timestamp:
Aug 31, 2015 9:30:03 AM (9 years ago)
Author:
jfernandez@igalia.com
Message:

[CSS Grid Layout] auto-margins alignment does not work for heights
​https://bugs.webkit.org/show_bug.cgi?id=148071

Reviewed by Sergio Villar Senin.

Source/WebCore:

We still had pending to align grid items horizontally via auto-margins
alignment. We already landed a patch in r188582 to implement the
column-axis alignment and this patch implements the expected behavior in
the row-axis.

This patch also removes the logic in RenderBox, so we reduce grid related
code dependencies in the general layout logic. We can do that because this
patch manages that in the layoutGridItems function by resetting grid item's
margin and logicalTop (if it does not need to perform a layout, which it
would do the job anyway).

No new tests, we just need to adapt some cases of the ones we already have.

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::styleDidChange): Deleted.
(WebCore::RenderBox::willBeRemovedFromTree): Deleted.
(WebCore::RenderBox::updateFromStyle): Deleted.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::layoutGridItems):
(WebCore::RenderGrid::resetAutoMarginsAndLogicalTopInColumnAxis):
(WebCore::RenderGrid::updateAutoMarginsInRowAxisIfNeeded):
(WebCore::RenderGrid::updateAutoMarginsInColumnAxisIfNeeded):
(WebCore::RenderGrid::hasAutoMarginsInRowAxis): Deleted.

  • rendering/RenderGrid.h:

LayoutTests:

Updated some test cases to adapt them to the new row-axis auto-margin alignment.

  • fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt:
  • fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt:
  • fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
  • fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt:
  • fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
  • fast/css-grid-layout/grid-item-auto-margins-alignment.html:
  • fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r189167 r189169  
     12015-08-31  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] auto-margins alignment does not work for heights
     4        https://bugs.webkit.org/show_bug.cgi?id=148071
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        Updated some test cases to adapt them to the new row-axis auto-margin alignment.
     9
     10        * fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt:
     11        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt:
     12        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html:
     13        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt:
     14        * fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html:
     15        * fast/css-grid-layout/grid-item-auto-margins-alignment.html:
     16        * fast/css-grid-layout/grid-item-auto-margins-and-stretch.html:
     17
    1182015-08-31  Enrica Casucci  <enrica@apple.com>
    219

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt

    r186682 r189169  
    11This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.
    22
    3 Direction: LTR | Self Aligmment: center | 1 auto-margin
     3Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
    44
    55PASS
    6 Direction: LTR | Self Aligmment: start | 4 auto-margin
     6Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
    77
    88PASS
    9 Direction: RTL | Self Aligmment: center | 1 auto-margin
     9Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
    1010
    1111PASS
    12 Direction: RTL | Self Aligmment: start | 4 auto-margin
     12Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
    1313
    1414PASS
     15Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
     16
     17PASS
     18Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
     19
     20PASS
     21Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
     22
     23PASS
     24Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
     25
     26PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt

    r186682 r189169  
    11This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.
    22
    3 Direction: LTR | Self Aligmment: center | 1 auto-margin
     3Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
    44
    55PASS
    6 Direction: LTR | Self Aligmment: start | 4 auto-margin
     6Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
    77
    88PASS
    9 Direction: RTL | Self Aligmment: center | 1 auto-margin
     9Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
    1010
    1111PASS
    12 Direction: RTL | Self Aligmment: start | 4 auto-margin
     12Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
    1313
    1414PASS
     15Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
     16
     17PASS
     18Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
     19
     20PASS
     21Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
     22
     23PASS
     24Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
     25
     26PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html

    r186682 r189169  
    1616}
    1717
    18 .cell {
     18.item {
    1919    width: 20px;
    2020    height: 40px;
    21 }
    22 
    23 .item {
    24     width: 8px;
    25     height: 16px;
    26     background: black;
    2721}
    2822
    … …  
    4337<p>This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.</p>
    4438
    45 <p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
     39<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    4640<div style="position: relative">
    4741    <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
    48         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
    49         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    50         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    51         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
     42        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
     43        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     44        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     45        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
    5246    </div>
    5347</div>
    5448
    55 <p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
     49<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    5650<div style="position: relative">
    5751    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
    58         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    59         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    60         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    61         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     52        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     53        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     54        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     55        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     56    </div>
     57</div>
     58
     59<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
     60<div style="position: relative">
     61    <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
     62        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     63        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     64        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     65        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     66    </div>
     67</div>
     68
     69<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
     70<div style="position: relative">
     71    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
     72        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     73        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     74        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     75        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
    6276    </div>
    6377</div>
    6478
    6579<!-- direction RTL -->
    66 <p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
     80<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    6781<div style="position: relative">
    6882    <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
    69         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    70         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    71         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    72         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
     83        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     84        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     85        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     86        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
    7387    </div>
    7488</div>
    7589
    7690
    77 <p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
     91<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    7892<div style="position: relative">
    7993    <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
    80         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    81         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    82         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    83         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     94        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     95        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     96        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     97        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     98    </div>
     99</div>
     100
     101<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
     102<div style="position: relative">
     103    <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
     104        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     105        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     106        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     107        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
    84108    </div>
    85109</div>
    86110
    87111
     112<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
     113<div style="position: relative">
     114    <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
     115        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     116        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     117        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     118        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     119    </div>
     120</div>
     121
    88122</body>
    89123</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt

    r186682 r189169  
    11This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.
    22
    3 Direction: LTR | Self Aligmment: center | 1 auto-margin
     3Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
    44
    55PASS
    6 Direction: LTR | Self Aligmment: start | 4 auto-margin
     6Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
    77
    88PASS
    9 Direction: RTL | Self Aligmment: center | 1 auto-margin
     9Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
    1010
    1111PASS
    12 Direction: RTL | Self Aligmment: start | 4 auto-margin
     12Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
    1313
    1414PASS
     15Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
     16
     17PASS
     18Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
     19
     20PASS
     21Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
     22
     23PASS
     24Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
     25
     26PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html

    r186682 r189169  
    1616}
    1717
    18 .cell {
     18.item {
    1919    width: 20px;
    2020    height: 40px;
    21 }
    22 
    23 .item {
    24     width: 8px;
    25     height: 16px;
    26     background: black;
    2721}
    2822
    … …  
    4337<p>This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.</p>
    4438
    45 <p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
     39<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    4640<div style="position: relative">
    4741    <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
    48         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
    49         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    50         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    51         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
     42        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
     43        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     44        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     45        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
    5246    </div>
    5347</div>
    5448
    55 <p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
     49<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    5650<div style="position: relative">
    5751    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
    58         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    59         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    60         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    61         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     52        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     53        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     54        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     55        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     56    </div>
     57</div>
     58
     59<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
     60<div style="position: relative">
     61    <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
     62        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     63        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     64        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     65        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     66    </div>
     67</div>
     68
     69<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
     70<div style="position: relative">
     71    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
     72        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     73        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     74        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     75        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
    6276    </div>
    6377</div>
    6478
    6579<!-- direction RTL -->
    66 <p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
     80<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    6781<div style="position: relative">
    6882    <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
    69         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    70         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    71         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    72         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
     83        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     84        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     85        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     86        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
    7387    </div>
    7488</div>
    7589
    7690
    77 <p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
     91<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    7892<div style="position: relative">
    7993    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
    80         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    81         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
    82         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
    83         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     94        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     95        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     96        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
     97        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
     98    </div>
     99</div>
     100
     101<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
     102<div style="position: relative">
     103    <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
     104        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     105        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     106        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     107        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
    84108    </div>
    85109</div>
    86110
    87111
     112<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
     113<div style="position: relative">
     114    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
     115        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     116        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     117        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     118        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     119    </div>
     120</div>
     121
    88122</body>
    89123</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html

    r186682 r189169  
    1616}
    1717
    18 .cell {
     18.item {
    1919    width: 20px;
    2020    height: 40px;
    21 }
    22 
    23 .item {
    24     width: 8px;
    25     height: 16px;
    26     background: black;
    2721}
    2822
    … …  
    4337<p>This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignment should be applied.</p>
    4438
    45 <p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
     39<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    4640<div style="position: relative">
    4741    <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
    48         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    49         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    50         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
    51         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
     42        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     43        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     44        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     45        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
    5246    </div>
    5347</div>
    5448
    55 <p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
     49<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    5650<div style="position: relative">
    5751    <div class="grid" data-expected-width="200" data-expected-height="400">
    58         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    59         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    60         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
    61         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     52        <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     53        <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     54        <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     55        <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     56    </div>
     57</div>
     58
     59<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
     60<div style="position: relative">
     61    <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
     62        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     63        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     64        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     65        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     66    </div>
     67</div>
     68
     69<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
     70<div style="position: relative">
     71    <div class="grid" data-expected-width="200" data-expected-height="400">
     72        <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     73        <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     74        <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     75        <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
    6276    </div>
    6377</div>
    6478
    6579<!-- direction RTL -->
    66 <p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
     80<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
    6781<div style="position: relative">
    6882    <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
    69         <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
    70         <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    71         <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
    72         <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
     83        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
     84        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     85        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     86        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
    7387    </div>
    7488</div>
    7589
    76 
    77 <p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
     90<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
    7891<div style="position: relative">
    7992    <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
    80         <div class="cell autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    81         <div class="cell autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
    82         <div class="cell autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
    83         <div class="cell autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     93        <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     94        <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
     95        <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     96        <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
    8497    </div>
    8598</div>
    8699
     100<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
     101<div style="position: relative">
     102    <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
     103        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     104        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     105        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     106        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     107    </div>
     108</div>
     109
     110<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
     111<div style="position: relative">
     112    <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
     113        <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     114        <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     115        <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     116        <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
     117    </div>
     118</div>
    87119
    88120</body>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html

    r188582 r189169  
    5252            <div class="widthAndHeightSet"></div>
    5353        </div>
    54         <div class="autoMargins firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40">
     54        <div class="autoMargins firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40">
    5555            <div class="widthAndHeightSet"></div>
    5656        </div>
    57         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200">
     57        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="200">
    5858            <div class="widthAndHeightSet"></div>
    5959        </div>
    … …  
    6969            <div class="widthAndHeightSet"></div>
    7070        </div>
    71         <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40">
     71        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40">
    7272            <div class="widthAndHeightSet"></div>
    7373        </div>
    … …  
    7575            <div class="widthAndHeightSet"></div>
    7676        </div>
    77         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40">
     77        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="200" data-expected-height="40">
    7878            <div class="widthAndHeightSet"></div>
    7979        </div>
    … …  
    8686            <div class="widthAndHeightSet"></div>
    8787        </div>
    88         <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40">
     88        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40">
    8989            <div class="widthAndHeightSet"></div>
    9090        </div>
    … …  
    9292            <div class="widthAndHeightSet"></div>
    9393        </div>
    94         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40">
     94        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="200" data-expected-height="40">
    9595            <div class="widthAndHeightSet"></div>
    9696        </div>
    … …  
    104104            <div class="widthAndHeightSet"></div>
    105105        </div>
    106         <div class="autoMargins firstRowSecondColumn" data-offset-x="80" data-offset-y="80" data-expected-width="20" data-expected-height="40">
     106        <div class="autoMargins firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40">
    107107            <div class="widthAndHeightSet"></div>
    108108        </div>
    109         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200">
     109        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="200">
    110110            <div class="widthAndHeightSet"></div>
    111111        </div>
    … …  
    121121            <div class="widthAndHeightSet"></div>
    122122        </div>
    123         <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40">
     123        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40">
    124124            <div class="widthAndHeightSet"></div>
    125125        </div>
    … …  
    127127            <div class="widthAndHeightSet"></div>
    128128        </div>
    129         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">
     129        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="200" data-expected-height="40">
    130130            <div class="widthAndHeightSet"></div>
    131131        </div>
    … …  
    138138            <div class="widthAndHeightSet"></div>
    139139        </div>
    140         <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40">
     140        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40">
    141141            <div class="widthAndHeightSet"></div>
    142142        </div>
    … …  
    144144            <div class="widthAndHeightSet"></div>
    145145        </div>
    146         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="60" data-expected-width="200" data-expected-height="40">
     146        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="200" data-expected-height="40">
    147147            <div class="widthAndHeightSet"></div>
    148148        </div>

  • trunk/Source/WebCore/ChangeLog

    r189168 r189169  
     12015-08-31  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] auto-margins alignment does not work for heights
     4        https://bugs.webkit.org/show_bug.cgi?id=148071
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        We still had pending to align grid items horizontally via auto-margins
     9        alignment. We already landed a patch in r188582 to implement the
     10        column-axis alignment and this patch implements the expected behavior in
     11        the row-axis.
     12
     13        This patch also removes the logic in RenderBox, so we reduce grid related
     14        code dependencies in the general layout logic. We can do that because this
     15        patch manages that in the layoutGridItems function by resetting grid item's
     16        margin and logicalTop (if it does not need to perform a layout, which it
     17        would do the job anyway).
     18
     19        No new tests, we just need to adapt some cases of the ones we already have.
     20
     21        * rendering/RenderBox.cpp:
     22        (WebCore::RenderBox::styleDidChange): Deleted.
     23        (WebCore::RenderBox::willBeRemovedFromTree): Deleted.
     24        (WebCore::RenderBox::updateFromStyle): Deleted.
     25        * rendering/RenderGrid.cpp:
     26        (WebCore::RenderGrid::layoutGridItems):
     27        (WebCore::RenderGrid::resetAutoMarginsAndLogicalTopInColumnAxis):
     28        (WebCore::RenderGrid::updateAutoMarginsInRowAxisIfNeeded):
     29        (WebCore::RenderGrid::updateAutoMarginsInColumnAxisIfNeeded):
     30        (WebCore::RenderGrid::hasAutoMarginsInRowAxis): Deleted.
     31        * rendering/RenderGrid.h:
     32
    1332015-08-31  Alexey Proskuryakov  <ap@apple.com>
    234

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

    r189144 r189169  
    434434        updateShapeOutsideInfoAfterStyleChange(style(), oldStyle);
    435435#endif
    436 
    437 #if ENABLE(CSS_GRID_LAYOUT)
    438     updateGridAlignmentAfterStyleChange(oldStyle);
    439 #endif
    440436}
    441437
    … …  
    474470    if (shapeOutside || shapeOutside != oldShapeOutside)
    475471        markShapeOutsideDependentsForLayout();
    476 }
    477 #endif
    478 
    479 #if ENABLE(CSS_GRID_LAYOUT)
    480 void RenderBox::updateGridAlignmentAfterStyleChange(const RenderStyle* oldStyle)
    481 {
    482     if (!oldStyle || !parent() || !parent()->isRenderGrid())
    483         return;
    484 
    485     // auto-margin prevents alignment properties to be applied, which affects specially
    486     // to the stretching logic. We must detect and handling style changes like this.
    487     bool isHorizontalGrid = parent()->isHorizontalWritingMode();
    488     Length topOrLeft = isHorizontalGrid ? style().marginTop() : style().marginLeft();
    489     Length bottomOrRight = isHorizontalGrid ? style().marginBottom() : style().marginRight();
    490     Length oldTopOrLeft = isHorizontalGrid ? oldStyle->marginTop() : oldStyle->marginLeft();
    491     Length oldBottomOrRight = isHorizontalGrid ? oldStyle->marginBottom() : oldStyle->marginRight();
    492     if ((!topOrLeft.isAuto() && oldTopOrLeft.isAuto()) || (!bottomOrRight.isAuto() && oldBottomOrRight.isAuto()))
    493         updateLogicalHeight();
    494472}
    495473#endif

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

    r189144 r189169  
    665665
    666666#if ENABLE(CSS_GRID_LAYOUT)
    667     void updateGridAlignmentAfterStyleChange(const RenderStyle*);
    668667    bool isGridItem() const { return parent() && parent()->isRenderGrid(); }
    669668#endif

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

    r189166 r189169  
    11671167                && child->hasRelativeLogicalHeight()))
    11681168            child->setNeedsLayout(MarkOnlyThis);
     1169        else
     1170            resetAutoMarginsAndLogicalTopInColumnAxis(*child);
    11691171
    11701172        child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
    … …  
    11811183
    11821184        // We need pending layouts to be done in order to compute auto-margins properly.
    1183         updateAutoMarginsInColumnAxisIfNeeded(*child, overrideContainingBlockContentLogicalHeight);
     1185        updateAutoMarginsInColumnAxisIfNeeded(*child);
     1186        updateAutoMarginsInRowAxisIfNeeded(*child);
    11841187
    11851188        child->setLogicalLocation(findChildLogicalPosition(*child));
    … …  
    13411344
    13421345// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
    1343 void RenderGrid::updateAutoMarginsInColumnAxisIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
     1346void RenderGrid::resetAutoMarginsAndLogicalTopInColumnAxis(RenderBox& child)
     1347{
     1348    if (hasAutoMarginsInColumnAxis(child) || child.needsLayout()) {
     1349        child.clearOverrideLogicalContentHeight();
     1350        child.updateLogicalHeight();
     1351        if (isHorizontalWritingMode()) {
     1352            if (child.style().marginTop().isAuto())
     1353                child.setMarginTop(0);
     1354            if (child.style().marginBottom().isAuto())
     1355                child.setMarginBottom(0);
     1356        } else {
     1357            if (child.style().marginLeft().isAuto())
     1358                child.setMarginLeft(0);
     1359            if (child.style().marginRight().isAuto())
     1360                child.setMarginRight(0);
     1361        }
     1362
     1363    }
     1364}
     1365
     1366// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
     1367void RenderGrid::updateAutoMarginsInRowAxisIfNeeded(RenderBox& child)
    13441368{
    13451369    ASSERT(!child.isOutOfFlowPositioned());
    1346 
    1347     LayoutUnit availableAlignmentSpace = gridAreaBreadthForChild - child.logicalHeight();
     1370    ASSERT(child.overrideContainingBlockContentLogicalWidth());
     1371
     1372    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth();
     1373    if (availableAlignmentSpace <= 0)
     1374        return;
     1375
     1376    bool isHorizontal = isHorizontalWritingMode();
     1377    Length topOrLeft = isHorizontal ? child.style().marginLeft() : child.style().marginTop();
     1378    Length bottomOrRight = isHorizontal ? child.style().marginRight() : child.style().marginBottom();
     1379    if (topOrLeft.isAuto() && bottomOrRight.isAuto()) {
     1380        if (isHorizontal) {
     1381            child.setMarginLeft(availableAlignmentSpace / 2);
     1382            child.setMarginRight(availableAlignmentSpace / 2);
     1383        } else {
     1384            child.setMarginTop(availableAlignmentSpace / 2);
     1385            child.setMarginBottom(availableAlignmentSpace / 2);
     1386        }
     1387    } else if (topOrLeft.isAuto()) {
     1388        if (isHorizontal)
     1389            child.setMarginLeft(availableAlignmentSpace);
     1390        else
     1391            child.setMarginTop(availableAlignmentSpace);
     1392    } else if (bottomOrRight.isAuto()) {
     1393        if (isHorizontal)
     1394            child.setMarginRight(availableAlignmentSpace);
     1395        else
     1396            child.setMarginBottom(availableAlignmentSpace);
     1397    }
     1398}
     1399
     1400// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
     1401void RenderGrid::updateAutoMarginsInColumnAxisIfNeeded(RenderBox& child)
     1402{
     1403    ASSERT(!child.isOutOfFlowPositioned());
     1404    ASSERT(child.overrideContainingBlockContentLogicalHeight());
     1405
     1406    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight();
    13481407    if (availableAlignmentSpace <= 0)
    13491408        return;

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

    r189166 r189169  
    137137    bool hasAutoMarginsInColumnAxis(const RenderBox&) const;
    138138    bool hasAutoMarginsInRowAxis(const RenderBox&) const;
    139     void updateAutoMarginsInColumnAxisIfNeeded(RenderBox&, LayoutUnit gridAreaBreadthForChild);
     139    void resetAutoMarginsAndLogicalTopInColumnAxis(RenderBox& child);
     140    void updateAutoMarginsInColumnAxisIfNeeded(RenderBox&);
     141    void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
    140142
    141143#ifndef NDEBUG
Note: See TracChangeset for help on using the changeset viewer.