[CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 18 Nov 2015 12:53:26 +0000 (12:53 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 18 Nov 2015 12:53:26 +0000 (12:53 +0000)
https://bugs.webkit.org/show_bug.cgi?id=151323

Reviewed by Sergio Villar Senin.

Source/WebCore:

There are some situations where we avoid to compute the inline-axis
margins when computing the logical width of a box. One of those situations
is when we have set an override width; this only affects for now to flex
and grid items. We also follow this approach when setting the logical
width based on the restrictions of 'auto' value in the 'min-width'
property.

This behavior is not correct, since there is no reason to avoid
computing this margins, in the general case. I think this logic was
designed as an optimization for flexbox, which was already computing
the margins by its own, but it's not applicable in the general case, so
grid needs these margins to be computed properly.

For the shrink-to-fit behavior we can add some grid related logic to the
already defined RenderBox function "sizesLogicalWidthToFitContent",
so we avoid the override width.

Tests: fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
       fast/css-grid-layout/min-width-height-auto-and-margins.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeLogicalWidthInRegion):
(WebCore::RenderBox::sizesLogicalWidthToFitContent):
* rendering/RenderGrid.cpp:
(WebCore::defaultAlignmentChangedFromStretchInRowAxis):
(WebCore::selfAlignmentChangedFromStretchInRowAxis):
(WebCore::RenderGrid::styleDidChange):
(WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
(WebCore::selfAlignmentChangedFromStretchInColumnAxis): Deleted.
(WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
(WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.

LayoutTests:

Tests to verify that margins are computed properly on grid items
using an alignment value different than stretch or when min-width
is auto.

* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt: Added.
* fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html: Added.
* fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt: Added.
* fast/css-grid-layout/min-width-height-auto-and-margins.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/resources/grid-alignment.css
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderGrid.cpp

index c35e3e7..2653170 100644 (file)
@@ -1,3 +1,19 @@
+2015-11-18  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
+        https://bugs.webkit.org/show_bug.cgi?id=151323
+
+        Reviewed by Sergio Villar Senin.
+
+        Tests to verify that margins are computed properly on grid items
+        using an alignment value different than stretch or when min-width
+        is auto.
+
+        * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html: Added.
+        * fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt: Added.
+        * fast/css-grid-layout/min-width-height-auto-and-margins.html: Added.
+
 2015-11-18  Adam Bergkvist  <adam.bergkvist@ericsson.com>
 
         WebRTC: [GTK] Skip failing MediaStream tests
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding-expected.txt
new file mode 100644 (file)
index 0000000..cd3e44f
--- /dev/null
@@ -0,0 +1,74 @@
+This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.
+
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'auto' | justify-items: 'auto'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'center' | justify-items: 'center'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'end' | justify-items: 'end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'left' | justify-items: 'left'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL | align-items: 'right' | justify-items: 'right'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'
+
+PASS
+border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px
+direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'
+
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html b/LayoutTests/fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
new file mode 100644 (file)
index 0000000..ab48dd4
--- /dev/null
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<script src="../../resources/check-layout.js"></script>
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    -webkit-grid-template-columns: 100px 200px;
+    -webkit-grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    width: -webkit-fit-content;
+    position: relative;
+}
+
+.content {
+    width: 20px;
+    height: 40px;
+}
+
+.cell {
+    margin: 4px 8px 12px 16px;
+}
+</style>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid itemsStart" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid itemsEnd" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid itemsLeft" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'right' | justify-items: 'right'</p>
+    <div class="grid itemsRight" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid directionRTL itemsStart" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid directionRTL itemsLeft"      data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+    <div class="grid directionRTL itemsRight"     data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+        <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"><div class="content"></div></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"><div class="content"></div></div>
+    </div>
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt b/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins-expected.txt
new file mode 100644 (file)
index 0000000..c67be15
--- /dev/null
@@ -0,0 +1,82 @@
+This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.
+
+Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box
+
+XXXX
+PASS
+Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box
+
+XXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html b/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html
new file mode 100644 (file)
index 0000000..06423b7
--- /dev/null
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.columnsSmallerThanContentBox { -webkit-grid-template-columns: 80px; }
+.columnsSameAsContentBox { -webkit-grid-template-columns: 100px; }
+.columnsBiggerThanContentBox { -webkit-grid-template-columns: 120px; }
+.columnsSameAsMarginBox { -webkit-grid-template-columns: 140px; }
+.columnsBiggerThanMarginBox { -webkit-grid-template-columns: 150px; }
+
+.rowsSmallerThanContentBox { -webkit-grid-template-rows: 20px; }
+.rowsEqualAsContentBox { -webkit-grid-template-rows: 25px; }
+.rowsBiggerThanContentBox { -webkit-grid-template-rows: 50px; }
+.rowsSameAsMarginBox { -webkit-grid-template-rows: 65px; }
+.rowsBiggerThanMarginBox { -webkit-grid-template-rows: 100px; }
+
+.container {
+    position: relative;
+    width: 200px;
+    height: 100px;
+    border: 1px solid black;
+}
+
+.item {
+    font: 25px/1 Ahem;
+    margin: 20px;
+    background-color: blue;
+}
+
+.fitContentHeight { align-items: start; }
+.fitContentWidth { justify-items: start; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks min-width|height auto does not interfere in margins computation, properly placing items inside their grid area.</p>
+
+<!-- Checking min-width: auto logic -->
+<p>Stretching allowed in both axis | column smaller than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid columnsSmallerThanContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | column of same size than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid columnsSameAsContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="60" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid columnsBiggerThanContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="80" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | column of same size as margin-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid columnsSameAsMarginBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<!-- Checking shrink-to-fit in row-axis -->
+<p>Stretching allowed in column axis, fitContent in row-axis | column smaller than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentWidth columnsSmallerThanContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column of same size than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentWidth columnsSameAsContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentWidth columnsBiggerThanContentBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column of same size as margin-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentWidth columnsSameAsMarginBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | column bigger than content-box, row bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentWidth columnsBiggerThanMarginBox rowsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<!-- Checking stretch in column-axis -->
+<p>Stretching allowed in both axis | row smaller than content-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid rowsSmallerThanContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | row of same size than content-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid rowsSameAsContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | row bigger than content-box, column bigger column margin-box</p>
+<div class="container">
+    <div class="grid rowsBiggerThanContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | row of same size as margin-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid rowsSameAsMarginBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in both axis | row bigger than margin-box, column bigger column margin-box</p>
+<div class="container">
+    <div class="grid rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="60">XXXX</div>
+    </div>
+</div>
+
+<!-- Checking min-height: auto logic -->
+<p>Stretching allowed in row axis, fitContent in column-axis | row smaller than content-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentHeight rowsSmallerThanContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in row axis, fitContent in column-axis | row of same size than content-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentHeight rowsSameAsContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than content-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentHeight rowsBiggerThanContentBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in row axis, fitContent in column-axis | row of same size as margin-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentHeight rowsSameAsMarginBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
+
+<p>Stretching allowed in column axis, fitContent in row-axis | row bigger than margin-box, column bigger than margin-box</p>
+<div class="container">
+    <div class="grid fitContentHeight rowsBiggerThanMarginBox columnsBiggerThanMarginBox">
+        <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="25">XXXX</div>
+    </div>
+</div>
index 468b17a..7b634b2 100644 (file)
 .justifyContentStretch { justify-content: stretch; }
 
 /* Both align-items and justify-items */
+.itemsStart {
+    align-items: start;
+    justify-items: start;
+}
 .itemsCenter {
     align-items: center;
     justify-items: center;
@@ -72,3 +76,8 @@
     align-items: self-end;
     justify-items: self-end;
 }
+
+.stretch {
+    align-self: stretch;
+    justify-self: stretch;
+}
index d8c4f83..ed37147 100644 (file)
@@ -1,3 +1,42 @@
+2015-11-18  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] inline margins not honored when not using stretch in row-axis alignment
+        https://bugs.webkit.org/show_bug.cgi?id=151323
+
+        Reviewed by Sergio Villar Senin.
+
+        There are some situations where we avoid to compute the inline-axis
+        margins when computing the logical width of a box. One of those situations
+        is when we have set an override width; this only affects for now to flex
+        and grid items. We also follow this approach when setting the logical
+        width based on the restrictions of 'auto' value in the 'min-width'
+        property.
+
+        This behavior is not correct, since there is no reason to avoid
+        computing this margins, in the general case. I think this logic was
+        designed as an optimization for flexbox, which was already computing
+        the margins by its own, but it's not applicable in the general case, so
+        grid needs these margins to be computed properly.
+
+        For the shrink-to-fit behavior we can add some grid related logic to the
+        already defined RenderBox function "sizesLogicalWidthToFitContent",
+        so we avoid the override width.
+
+        Tests: fast/css-grid-layout/grid-item-auto-sized-align-justify-margin-border-padding.html
+               fast/css-grid-layout/min-width-height-auto-and-margins.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computeLogicalWidthInRegion):
+        (WebCore::RenderBox::sizesLogicalWidthToFitContent):
+        * rendering/RenderGrid.cpp:
+        (WebCore::defaultAlignmentChangedFromStretchInRowAxis):
+        (WebCore::selfAlignmentChangedFromStretchInRowAxis):
+        (WebCore::RenderGrid::styleDidChange):
+        (WebCore::RenderGrid::applyStretchAlignmentToChildIfNeeded):
+        (WebCore::selfAlignmentChangedFromStretchInColumnAxis): Deleted.
+        (WebCore::RenderGrid::computeMarginLogicalHeightForChild): Deleted.
+        (WebCore::RenderGrid::availableAlignmentSpaceForChildBeforeStretching): Deleted.
+
 2015-11-18  Aaron Chu  <arona.chu@gmail.com>
 
         AX: Shadow DOM video player controls menus need aria-owns on the trigger buttons
index ec8469b..afb47b6 100644 (file)
@@ -2359,11 +2359,7 @@ void RenderBox::computeLogicalWidthInRegion(LogicalExtentComputedValues& compute
     // width.  Use the width from the style context.
     // FIXME: Account for block-flow in flexible boxes.
     // https://bugs.webkit.org/show_bug.cgi?id=46418
-    if (hasOverrideLogicalContentWidth() && (isRubyRun() || style().borderFit() == BorderFitLines || (parent()->isFlexibleBoxIncludingDeprecated()
-#if ENABLE(CSS_GRID_LAYOUT)
-        || parent()->isRenderGrid()
-#endif
-    ))) {
+    if (hasOverrideLogicalContentWidth() && (isRubyRun() || style().borderFit() == BorderFitLines || (parent()->isFlexibleBoxIncludingDeprecated()))) {
         computedValues.m_extent = overrideLogicalContentWidth() + borderAndPaddingLogicalWidth();
         return;
     }
@@ -2381,16 +2377,6 @@ void RenderBox::computeLogicalWidthInRegion(LogicalExtentComputedValues& compute
     LayoutUnit containerLogicalWidth = std::max<LayoutUnit>(0, containingBlockLogicalWidthForContentInRegion(region));
     bool hasPerpendicularContainingBlock = cb->isHorizontalWritingMode() != isHorizontalWritingMode();
 
-#if ENABLE(CSS_GRID_LAYOUT)
-    if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE) {
-        LayoutUnit minLogicalWidth = minPreferredLogicalWidth();
-        if (containerLogicalWidth < minLogicalWidth) {
-            computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minLogicalWidth, containerLogicalWidth, cb);
-            return;
-        }
-    }
-#endif
-
     if (isInline() && !isInlineBlockOrInlineTable()) {
         // just calculate margins
         computedValues.m_margins.m_start = minimumValueForLength(styleToUse.marginStart(), containerLogicalWidth);
@@ -2401,9 +2387,15 @@ void RenderBox::computeLogicalWidthInRegion(LogicalExtentComputedValues& compute
     }
 
     // Width calculations
-    if (treatAsReplaced)
+    if (treatAsReplaced) {
         computedValues.m_extent = logicalWidthLength.value() + borderAndPaddingLogicalWidth();
-    else {
+#if ENABLE(CSS_GRID_LAYOUT)
+    } else if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE && containerLogicalWidth < minPreferredLogicalWidth()) {
+        // TODO (lajava) Move this logic to the LayoutGrid class.
+        // Implied minimum size of Grid items.
+        computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minPreferredLogicalWidth(), containerLogicalWidth, cb);
+#endif
+    } else {
         LayoutUnit containerWidthInInlineDirection = containerLogicalWidth;
         if (hasPerpendicularContainingBlock)
             containerWidthInInlineDirection = perpendicularContainingBlockLogicalHeight();
@@ -2535,6 +2527,13 @@ bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
     if (isFloating() || (isInlineBlockOrInlineTable() && !isHTMLMarquee()))
         return true;
 
+#if ENABLE(CSS_GRID_LAYOUT)
+    if (parent()->isRenderGrid()) {
+        bool allowedToStretchChildAlongRowAxis = style().logicalWidth().isAuto() && !style().marginStartUsing(&parent()->style()).isAuto() && !style().marginEndUsing(&parent()->style()).isAuto();
+        return !allowedToStretchChildAlongRowAxis || RenderStyle::resolveJustification(parent()->style(), style(), ItemPositionStretch) != ItemPositionStretch;
+    }
+#endif
+
     // This code may look a bit strange.  Basically width:intrinsic should clamp the size when testing both
     // min-width and width.  max-width is only clamped if it is also intrinsic.
     Length logicalWidth = (widthType == MaxSize) ? style().logicalMaxWidth() : style().logicalWidth();
index 681e406..da1e9f0 100644 (file)
@@ -263,6 +263,11 @@ static inline bool defaultAlignmentChangedToStretchInRowAxis(const RenderStyle&
     return !defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
 }
 
+static inline bool defaultAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
+{
+    return defaultAlignmentIsStretch(oldStyle.justifyItemsPosition()) && !defaultAlignmentIsStretch(newStyle.justifyItemsPosition());
+}
+
 static inline bool defaultAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle)
 {
     return defaultAlignmentIsStretch(oldStyle.alignItemsPosition()) && !defaultAlignmentIsStretch(newStyle.alignItemsPosition());
@@ -274,6 +279,12 @@ static inline bool selfAlignmentChangedToStretchInRowAxis(const RenderStyle& old
         && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) == ItemPositionStretch;
 }
 
+static inline bool selfAlignmentChangedFromStretchInRowAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
+{
+    return RenderStyle::resolveJustification(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
+        && RenderStyle::resolveJustification(newStyle, childStyle, ItemPositionStretch) != ItemPositionStretch;
+}
+
 static inline bool selfAlignmentChangedFromStretchInColumnAxis(const RenderStyle& oldStyle, const RenderStyle& newStyle, const RenderStyle& childStyle)
 {
     return RenderStyle::resolveAlignment(oldStyle, childStyle, ItemPositionStretch) == ItemPositionStretch
@@ -287,15 +298,18 @@ void RenderGrid::styleDidChange(StyleDifference diff, const RenderStyle* oldStyl
         return;
 
     const RenderStyle& newStyle = style();
-    if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
+    if (defaultAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle) || defaultAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle)
+        || defaultAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle)) {
         // Grid items that were not previously stretched in row-axis need to be relayed out so we can compute new available space.
         // Grid items that were previously stretching in column-axis need to be relayed out so we can compute new available space.
         // This is only necessary for stretching since other alignment values don't change the size of the box.
         for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
             if (child->isOutOfFlowPositioned())
                 continue;
-            if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style()))
+            if (selfAlignmentChangedToStretchInRowAxis(*oldStyle, newStyle, child->style()) || selfAlignmentChangedFromStretchInRowAxis(*oldStyle, newStyle, child->style())
+                || selfAlignmentChangedFromStretchInColumnAxis(*oldStyle, newStyle, child->style())) {
                 child->setChildNeedsLayout(MarkOnlyThis);
+            }
         }
     }
 }
@@ -1627,32 +1641,15 @@ LayoutUnit RenderGrid::availableAlignmentSpaceForChildBeforeStretching(LayoutUni
 // FIXME: This logic is shared by RenderFlexibleBox, so it should be moved to RenderBox.
 void RenderGrid::applyStretchAlignmentToChildIfNeeded(RenderBox& child)
 {
-    ASSERT(child.overrideContainingBlockContentLogicalWidth() && child.overrideContainingBlockContentLogicalHeight());
+    ASSERT(child.overrideContainingBlockContentLogicalHeight());
 
-    // We clear both width and height override values because we will decide now whether they
-    // are allowed or not, evaluating the conditions which might have changed since the old
-    // values were set.
-    child.clearOverrideSize();
+    // We clear height override values because we will decide now whether it's allowed or
+    // not, evaluating the conditions which might have changed since the old values were set.
+    child.clearOverrideLogicalContentHeight();
 
     auto& gridStyle = style();
     auto& childStyle = child.style();
     bool isHorizontalMode = isHorizontalWritingMode();
-    bool hasAutoSizeInRowAxis = isHorizontalMode ? childStyle.width().isAuto() : childStyle.height().isAuto();
-    bool allowedToStretchChildAlongRowAxis = hasAutoSizeInRowAxis && !childStyle.marginStartUsing(&gridStyle).isAuto() && !childStyle.marginEndUsing(&gridStyle).isAuto();
-    if (!allowedToStretchChildAlongRowAxis || RenderStyle::resolveJustification(gridStyle, childStyle, ItemPositionStretch) != ItemPositionStretch) {
-        bool hasAutoMinSizeInRowAxis = isHorizontalMode ? childStyle.minWidth().isAuto() : childStyle.minHeight().isAuto();
-        bool canShrinkToFitInRowAxisForChild = !hasAutoMinSizeInRowAxis || child.minPreferredLogicalWidth() <= child.overrideContainingBlockContentLogicalWidth().value();
-        // TODO(lajava): how to handle orthogonality in this case ?.
-        // TODO(lajava): grid track sizing and positioning do not support orthogonal modes yet.
-        if (hasAutoSizeInRowAxis && canShrinkToFitInRowAxisForChild) {
-            LayoutUnit childWidthToFitContent = std::max(std::min(child.maxPreferredLogicalWidth(), child.overrideContainingBlockContentLogicalWidth().value() - child.marginLogicalWidth()), child.minPreferredLogicalWidth());
-            LayoutUnit desiredLogicalWidth = child.constrainLogicalHeightByMinMax(childWidthToFitContent, Nullopt);
-            child.setOverrideLogicalContentWidth(desiredLogicalWidth - child.borderAndPaddingLogicalWidth());
-            if (desiredLogicalWidth != child.logicalWidth())
-                child.setNeedsLayout();
-        }
-    }
-
     bool hasAutoSizeInColumnAxis = isHorizontalMode ? childStyle.height().isAuto() : childStyle.width().isAuto();
     bool allowedToStretchChildAlongColumnAxis = hasAutoSizeInColumnAxis && !childStyle.marginBeforeUsing(&gridStyle).isAuto() && !childStyle.marginAfterUsing(&gridStyle).isAuto();
     if (allowedToStretchChildAlongColumnAxis && RenderStyle::resolveAlignment(gridStyle, childStyle, ItemPositionStretch) == ItemPositionStretch) {