[CSS Grid Layout] auto-margins alignment does not work for heights
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 31 Aug 2015 16:30:03 +0000 (16:30 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 31 Aug 2015 16:30:03 +0000 (16:30 +0000)
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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@189169 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html
LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderBox.h
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index a2a56a2..02dae87 100644 (file)
@@ -1,3 +1,20 @@
+2015-08-31  Javier Fernandez  <jfernandez@igalia.com>
+
+        [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.
+
+        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:
+
 2015-08-31  Enrica Casucci  <enrica@apple.com>
 
         Incorrect cursor movement for U+26F9, U+1F3CB with variations.
index 4c0dd69..11f5eaa 100644 (file)
@@ -1,14 +1,26 @@
 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.
 
-Direction: LTR | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
 
 PASS
-Direction: LTR | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
 
 PASS
index 4c0dd69..11f5eaa 100644 (file)
@@ -1,14 +1,26 @@
 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.
 
-Direction: LTR | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
 
 PASS
-Direction: LTR | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
 
 PASS
index a6a36b7..b089fbb 100644 (file)
@@ -15,17 +15,11 @@ body {
     margin-bottom: 20px;
 }
 
-.cell {
+.item {
     width: 20px;
     height: 40px;
 }
 
-.item {
-    width: 8px;
-    height: 16px;
-    background: black;
-}
-
 .autoMarginTop { margin-top: auto; }
 .autoMarginRight { margin-right: auto; }
 .autoMarginBottom { margin-bottom: auto; }
@@ -42,48 +36,88 @@ body {
 
 <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>
 
-<p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
-<p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
 <!-- direction RTL -->
-<p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
 
-<p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
 
+<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalLR directionRTL" data-expected-width="400" data-expected-height="200">
+        <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>
+        <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>
+        <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>
+        <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>
+    </div>
+</div>
+
 </body>
 </html>
index 4c0dd69..11f5eaa 100644 (file)
@@ -1,14 +1,26 @@
 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.
 
-Direction: LTR | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin
 
 PASS
-Direction: LTR | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: center | 1 auto-margin
+Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin
 
 PASS
-Direction: RTL | Self Aligmment: start | 4 auto-margin
+Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin
+
+PASS
+Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin
 
 PASS
index cd03ac5..315ac6d 100644 (file)
@@ -15,17 +15,11 @@ body {
     margin-bottom: 20px;
 }
 
-.cell {
+.item {
     width: 20px;
     height: 40px;
 }
 
-.item {
-    width: 8px;
-    height: 16px;
-    background: black;
-}
-
 .autoMarginTop { margin-top: auto; }
 .autoMarginRight { margin-right: auto; }
 .autoMarginBottom { margin-bottom: auto; }
@@ -42,48 +36,88 @@ body {
 
 <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>
 
-<p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalRL itemsCenter" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
-<p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
 <!-- direction RTL -->
-<p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
 
-<p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL itemsCenter directionRTL" data-expected-width="400" data-expected-height="200">
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
 
+<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <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>
+        <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>
+        <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>
+        <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>
+    </div>
+</div>
+
 </body>
 </html>
index 1c386d9..6898510 100644 (file)
@@ -15,17 +15,11 @@ body {
     margin-bottom: 20px;
 }
 
-.cell {
+.item {
     width: 20px;
     height: 40px;
 }
 
-.item {
-    width: 8px;
-    height: 16px;
-    background: black;
-}
-
 .autoMarginTop { margin-top: auto; }
 .autoMarginRight { margin-right: auto; }
 .autoMarginBottom { margin-bottom: auto; }
@@ -42,48 +36,86 @@ body {
 
 <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>
 
-<p>Direction: LTR | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid" data-expected-width="200" data-expected-height="400">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid itemsCenter" data-expected-width="200" data-expected-height="400">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
-<p>Direction: LTR | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid" data-expected-width="200" data-expected-height="400">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
 <!-- direction RTL -->
-<p>Direction: RTL | Self Aligmment: center | 1 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
-        <div class="cell autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
     </div>
 </div>
 
-
-<p>Direction: RTL | Self Aligmment: start | 4 auto-margin</p>
+<p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p>
 <div style="position: relative">
     <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
-        <div class="cell autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
-        <div class="cell autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid itemsCenter directionRTL" data-expected-width="200" data-expected-height="400">
+        <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>
+        <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>
+        <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>
+        <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>
     </div>
 </div>
 
+<p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
+        <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>
+        <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>
+        <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>
+        <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>
+    </div>
+</div>
 
 </body>
 </html>
index 1cd3a7b..a5a3bbe 100644 (file)
@@ -51,10 +51,10 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200">
+        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="40">
@@ -68,13 +68,13 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40">
+        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="200" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
     </div>
@@ -85,13 +85,13 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40">
+        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="200" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
     </div>
@@ -103,10 +103,10 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="80" data-offset-y="80" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200">
+        <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="200">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="40">
@@ -120,13 +120,13 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">
+        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="200" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
     </div>
@@ -137,13 +137,13 @@ body {
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40">
+        <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="100">
             <div class="widthAndHeightSet"></div>
         </div>
-        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="60" data-expected-width="200" data-expected-height="40">
+        <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="200" data-expected-height="40">
             <div class="widthAndHeightSet"></div>
         </div>
     </div>
index f27e357..c248126 100644 (file)
@@ -1,3 +1,35 @@
+2015-08-31  Javier Fernandez  <jfernandez@igalia.com>
+
+        [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.
+
+        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:
+
 2015-08-31  Alexey Proskuryakov  <ap@apple.com>
 
         Build fix.
index ff191ea..8bc0f08 100644 (file)
@@ -433,10 +433,6 @@ void RenderBox::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle
     if ((oldStyle && oldStyle->shapeOutside()) || style().shapeOutside())
         updateShapeOutsideInfoAfterStyleChange(style(), oldStyle);
 #endif
-
-#if ENABLE(CSS_GRID_LAYOUT)
-    updateGridAlignmentAfterStyleChange(oldStyle);
-#endif
 }
 
 void RenderBox::willBeRemovedFromTree()
@@ -476,24 +472,6 @@ void RenderBox::updateShapeOutsideInfoAfterStyleChange(const RenderStyle& style,
 }
 #endif
 
-#if ENABLE(CSS_GRID_LAYOUT)
-void RenderBox::updateGridAlignmentAfterStyleChange(const RenderStyle* oldStyle)
-{
-    if (!oldStyle || !parent() || !parent()->isRenderGrid())
-        return;
-
-    // auto-margin prevents alignment properties to be applied, which affects specially
-    // to the stretching logic. We must detect and handling style changes like this.
-    bool isHorizontalGrid = parent()->isHorizontalWritingMode();
-    Length topOrLeft = isHorizontalGrid ? style().marginTop() : style().marginLeft();
-    Length bottomOrRight = isHorizontalGrid ? style().marginBottom() : style().marginRight();
-    Length oldTopOrLeft = isHorizontalGrid ? oldStyle->marginTop() : oldStyle->marginLeft();
-    Length oldBottomOrRight = isHorizontalGrid ? oldStyle->marginBottom() : oldStyle->marginRight();
-    if ((!topOrLeft.isAuto() && oldTopOrLeft.isAuto()) || (!bottomOrRight.isAuto() && oldBottomOrRight.isAuto()))
-        updateLogicalHeight();
-}
-#endif
-
 void RenderBox::updateFromStyle()
 {
     RenderBoxModelObject::updateFromStyle();
index 16d51d9..15518a0 100644 (file)
@@ -664,7 +664,6 @@ private:
 #endif
 
 #if ENABLE(CSS_GRID_LAYOUT)
-    void updateGridAlignmentAfterStyleChange(const RenderStyle*);
     bool isGridItem() const { return parent() && parent()->isRenderGrid(); }
 #endif
 
index 36049d4..4216d29 100644 (file)
@@ -1166,6 +1166,8 @@ void RenderGrid::layoutGridItems()
             || ((!oldOverrideContainingBlockContentLogicalHeight || oldOverrideContainingBlockContentLogicalHeight.value() != overrideContainingBlockContentLogicalHeight)
                 && child->hasRelativeLogicalHeight()))
             child->setNeedsLayout(MarkOnlyThis);
+        else
+            resetAutoMarginsAndLogicalTopInColumnAxis(*child);
 
         child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
         child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
@@ -1180,7 +1182,8 @@ void RenderGrid::layoutGridItems()
         child->layoutIfNeeded();
 
         // We need pending layouts to be done in order to compute auto-margins properly.
-        updateAutoMarginsInColumnAxisIfNeeded(*child, overrideContainingBlockContentLogicalHeight);
+        updateAutoMarginsInColumnAxisIfNeeded(*child);
+        updateAutoMarginsInRowAxisIfNeeded(*child);
 
         child->setLogicalLocation(findChildLogicalPosition(*child));
 
@@ -1340,11 +1343,67 @@ bool RenderGrid::hasAutoMarginsInRowAxis(const RenderBox& child) const
 }
 
 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
-void RenderGrid::updateAutoMarginsInColumnAxisIfNeeded(RenderBox& child, LayoutUnit gridAreaBreadthForChild)
+void RenderGrid::resetAutoMarginsAndLogicalTopInColumnAxis(RenderBox& child)
+{
+    if (hasAutoMarginsInColumnAxis(child) || child.needsLayout()) {
+        child.clearOverrideLogicalContentHeight();
+        child.updateLogicalHeight();
+        if (isHorizontalWritingMode()) {
+            if (child.style().marginTop().isAuto())
+                child.setMarginTop(0);
+            if (child.style().marginBottom().isAuto())
+                child.setMarginBottom(0);
+        } else {
+            if (child.style().marginLeft().isAuto())
+                child.setMarginLeft(0);
+            if (child.style().marginRight().isAuto())
+                child.setMarginRight(0);
+        }
+
+    }
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
+void RenderGrid::updateAutoMarginsInRowAxisIfNeeded(RenderBox& child)
+{
+    ASSERT(!child.isOutOfFlowPositioned());
+    ASSERT(child.overrideContainingBlockContentLogicalWidth());
+
+    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalWidth().value() - child.logicalWidth();
+    if (availableAlignmentSpace <= 0)
+        return;
+
+    bool isHorizontal = isHorizontalWritingMode();
+    Length topOrLeft = isHorizontal ? child.style().marginLeft() : child.style().marginTop();
+    Length bottomOrRight = isHorizontal ? child.style().marginRight() : child.style().marginBottom();
+    if (topOrLeft.isAuto() && bottomOrRight.isAuto()) {
+        if (isHorizontal) {
+            child.setMarginLeft(availableAlignmentSpace / 2);
+            child.setMarginRight(availableAlignmentSpace / 2);
+        } else {
+            child.setMarginTop(availableAlignmentSpace / 2);
+            child.setMarginBottom(availableAlignmentSpace / 2);
+        }
+    } else if (topOrLeft.isAuto()) {
+        if (isHorizontal)
+            child.setMarginLeft(availableAlignmentSpace);
+        else
+            child.setMarginTop(availableAlignmentSpace);
+    } else if (bottomOrRight.isAuto()) {
+        if (isHorizontal)
+            child.setMarginRight(availableAlignmentSpace);
+        else
+            child.setMarginBottom(availableAlignmentSpace);
+    }
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
+void RenderGrid::updateAutoMarginsInColumnAxisIfNeeded(RenderBox& child)
 {
     ASSERT(!child.isOutOfFlowPositioned());
+    ASSERT(child.overrideContainingBlockContentLogicalHeight());
 
-    LayoutUnit availableAlignmentSpace = gridAreaBreadthForChild - child.logicalHeight();
+    LayoutUnit availableAlignmentSpace = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight();
     if (availableAlignmentSpace <= 0)
         return;
 
index 6060284..34ad26a 100644 (file)
@@ -136,7 +136,9 @@ private:
     void applyStretchAlignmentToChildIfNeeded(RenderBox&);
     bool hasAutoMarginsInColumnAxis(const RenderBox&) const;
     bool hasAutoMarginsInRowAxis(const RenderBox&) const;
-    void updateAutoMarginsInColumnAxisIfNeeded(RenderBox&, LayoutUnit gridAreaBreadthForChild);
+    void resetAutoMarginsAndLogicalTopInColumnAxis(RenderBox& child);
+    void updateAutoMarginsInColumnAxisIfNeeded(RenderBox&);
+    void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
 
 #ifndef NDEBUG
     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, const Vector<GridTrack>&);