Diff
Modified: trunk/LayoutTests/ChangeLog (189168 => 189169)
--- trunk/LayoutTests/ChangeLog 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/ChangeLog 2015-08-31 16:30:03 UTC (rev 189169)
@@ -1,3 +1,20 @@
+2015-08-31 Javier Fernandez <[email protected]>
+
+ [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 <[email protected]>
Incorrect cursor movement for U+26F9, U+1F3CB with variations.
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-expected.txt 2015-08-31 16:30:03 UTC (rev 189169)
@@ -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
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr-expected.txt 2015-08-31 16:30:03 UTC (rev 189169)
@@ -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
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-lr.html 2015-08-31 16:30:03 UTC (rev 189169)
@@ -15,17 +15,11 @@
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 @@
<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="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="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 | 4 auto-margin</p>
+<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="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="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="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 | 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="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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl-expected.txt 2015-08-31 16:30:03 UTC (rev 189169)
@@ -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
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment-vertical-rl.html 2015-08-31 16:30:03 UTC (rev 189169)
@@ -15,17 +15,11 @@
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 @@
<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="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>
+ <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 | 4 auto-margin</p>
+<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="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>
+ <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="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 | 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="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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html 2015-08-31 16:30:03 UTC (rev 189169)
@@ -15,17 +15,11 @@
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 @@
<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="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="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 | 4 auto-margin</p>
+<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="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="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="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 | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+ <div class="grid" data-expected-width="200" data-expected-height="400">
+ <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 | 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="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: start | 4 auto-margin</p>
+<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="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="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>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html (189168 => 189169)
--- trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-and-stretch.html 2015-08-31 16:30:03 UTC (rev 189169)
@@ -51,10 +51,10 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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>
Modified: trunk/Source/WebCore/ChangeLog (189168 => 189169)
--- trunk/Source/WebCore/ChangeLog 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/Source/WebCore/ChangeLog 2015-08-31 16:30:03 UTC (rev 189169)
@@ -1,3 +1,35 @@
+2015-08-31 Javier Fernandez <[email protected]>
+
+ [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 <[email protected]>
Build fix.
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (189168 => 189169)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2015-08-31 16:30:03 UTC (rev 189169)
@@ -433,10 +433,6 @@
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 @@
}
#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();
Modified: trunk/Source/WebCore/rendering/RenderBox.h (189168 => 189169)
--- trunk/Source/WebCore/rendering/RenderBox.h 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2015-08-31 16:30:03 UTC (rev 189169)
@@ -664,7 +664,6 @@
#endif
#if ENABLE(CSS_GRID_LAYOUT)
- void updateGridAlignmentAfterStyleChange(const RenderStyle*);
bool isGridItem() const { return parent() && parent()->isRenderGrid(); }
#endif
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (189168 => 189169)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2015-08-31 16:30:03 UTC (rev 189169)
@@ -1166,6 +1166,8 @@
|| ((!oldOverrideContainingBlockContentLogicalHeight || oldOverrideContainingBlockContentLogicalHeight.value() != overrideContainingBlockContentLogicalHeight)
&& child->hasRelativeLogicalHeight()))
child->setNeedsLayout(MarkOnlyThis);
+ else
+ resetAutoMarginsAndLogicalTopInColumnAxis(*child);
child->setOverrideContainingBlockContentLogicalWidth(overrideContainingBlockContentLogicalWidth);
child->setOverrideContainingBlockContentLogicalHeight(overrideContainingBlockContentLogicalHeight);
@@ -1180,7 +1182,8 @@
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,15 +1343,71 @@
}
// 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 = gridAreaBreadthForChild - child.logicalHeight();
+ 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 = child.overrideContainingBlockContentLogicalHeight().value() - child.logicalHeight();
+ if (availableAlignmentSpace <= 0)
+ return;
+
+ bool isHorizontal = isHorizontalWritingMode();
Length topOrLeft = isHorizontal ? child.style().marginTop() : child.style().marginLeft();
Length bottomOrRight = isHorizontal ? child.style().marginBottom() : child.style().marginRight();
if (topOrLeft.isAuto() && bottomOrRight.isAuto()) {
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (189168 => 189169)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2015-08-31 16:15:38 UTC (rev 189168)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2015-08-31 16:30:03 UTC (rev 189169)
@@ -136,7 +136,9 @@
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>&);
