Merge r213449 - [css-grid] Stretch should grow and shrink items to fi…

…t its grid area https://bugs.webkit.org/show_bug.cgi?id=163200 Reviewed by Darin Adler. Source/WebCore: After some discussions the CSS WG agreed that stretch should not only grow items, but also shrink them to fit its grid area. That way the "min-width|height: auto" is somehow ignored for grid items. More info at: w3c/csswg-drafts#283 The good part is that this allows us to remove some ugly code we've in RenderBox that was only used by Grid Layout. For images, we'll be stretching on both axis right now, so the aspect ratio won't be preserved. The default behavior might change in those cases, but that should be implemented in a different patch. * rendering/RenderBox.cpp: (WebCore::RenderBox::computeLogicalWidthInRegion): (WebCore::RenderBox::computeLogicalHeight): LayoutTests: The tests have been updated according to the new expected behavior. * fast/css-grid-layout/grid-container-percentage-columns.html: * fast/css-grid-layout/min-width-height-auto-and-margins.html: * fast/css-grid-layout/min-width-height-auto.html:
WebKit · Mar 13, 2017 · f466900 · f466900
1 parent 1ffcf3b
commit f466900
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,16 @@
+2017-03-06  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Stretch should grow and shrink items to fit its grid area
+        https://bugs.webkit.org/show_bug.cgi?id=163200
+
+        Reviewed by Darin Adler.
+
+        The tests have been updated according to the new expected behavior.
+
+        * fast/css-grid-layout/grid-container-percentage-columns.html:
+        * fast/css-grid-layout/min-width-height-auto-and-margins.html:
+        * fast/css-grid-layout/min-width-height-auto.html:
+
 2017-03-05  Simon Fraser  <simon.fraser@apple.com>
 
         Avoid backing store for layers with empty text nodes in a few more cases

diff --git a/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html b/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html
@@ -125,7 +125,7 @@
 <div class="wrapper">
     <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
         <div class="firstRowFirstColumn"
-            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
             XX X
         </div>
     </div>

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
@@ -40,7 +40,7 @@
 <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 class="item" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="60">XXXX</div>
     </div>
 </div>
 
@@ -112,7 +112,7 @@
 <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 class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="0">XXXX</div>
     </div>
 </div>
 
@@ -126,7 +126,7 @@
 <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 class="item" data-offset-x="20" data-offset-y="20" data-expected-width="110" data-expected-height="10">XXXX</div>
     </div>
 </div>
 

diff --git a/LayoutTests/fast/css-grid-layout/min-width-height-auto.html b/LayoutTests/fast/css-grid-layout/min-width-height-auto.html
@@ -46,7 +46,7 @@
 
 <div class="container">
     <div class="grid">
-        <div class="ahem" data-expected-width="100" data-expected-height="25">XXXX</div>
+        <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
     </div>
 </div>
 
@@ -64,32 +64,32 @@
 
 <div class="container">
     <div class="grid">
-        <div class="ahem maxSmaller" data-expected-width="10" data-expected-height="10">XXXX</div>
+        <div class="ahem maxSmaller" data-expected-width="5" data-expected-height="5">XXXX</div>
     </div>
 </div>
 
 <div class="container">
     <div class="grid">
-        <div class="ahem maxBigger" data-expected-width="100" data-expected-height="25">XXXX</div>
+        <div class="ahem maxBigger" data-expected-width="5" data-expected-height="5">XXXX</div>
     </div>
 </div>
 
 <!-- Check that min-width min-height behavior is preserved when using vertical writing modes -->
 <div class="container">
     <div class="grid verticalLR">
-        <div class="ahem" data-expected-width="25" data-expected-height="100">XXXX</div>
+        <div class="ahem" data-expected-width="5" data-expected-height="5">XXXX</div>
     </div>
 </div>
 
 <div class="container">
     <div class="grid verticalLR">
-        <div class="ahem minHeightSmaller" data-expected-width="25" data-expected-height="12">XXXX</div>
+        <div class="ahem minHeightSmaller" data-expected-width="5" data-expected-height="12">XXXX</div>
     </div>
 </div>
 
 <div class="container">
     <div class="grid verticalLR">
-        <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="100">XXXX</div>
+        <div class="ahem minWidthSmaller" data-expected-width="12" data-expected-height="5">XXXX</div>
     </div>
 </div>
 

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,26 @@
+2017-03-06  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-grid] Stretch should grow and shrink items to fit its grid area
+        https://bugs.webkit.org/show_bug.cgi?id=163200
+
+        Reviewed by Darin Adler.
+
+        After some discussions the CSS WG agreed that stretch should not only
+        grow items, but also shrink them to fit its grid area.
+        That way the "min-width|height: auto" is somehow ignored for grid items.
+        More info at: https://github.com/w3c/csswg-drafts/issues/283
+
+        The good part is that this allows us to remove some ugly code we've
+        in RenderBox that was only used by Grid Layout.
+
+        For images, we'll be stretching on both axis right now, so the aspect
+        ratio won't be preserved. The default behavior might change in those
+        cases, but that should be implemented in a different patch.
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computeLogicalWidthInRegion):
+        (WebCore::RenderBox::computeLogicalHeight):
+
 2017-03-06  Miguel Gomez  <magomez@igalia.com>
 
         [GTK] WebProcess from WebKitGtk+ 2.15.x SIGSEVs in GIFLZWContext::doLZW(unsigned char const*, unsigned long) at Source/WebCore/platform/image-decoders/gif/GIFImageReader.cpp:303

diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
@@ -2426,10 +2426,6 @@ void RenderBox::computeLogicalWidthInRegion(LogicalExtentComputedValues& compute
     // Width calculations
     if (treatAsReplaced) {
         computedValues.m_extent = logicalWidthLength.value() + borderAndPaddingLogicalWidth();
-    } else if (parent()->isRenderGrid() && style().logicalWidth().isAuto() && style().logicalMinWidth().isAuto() && style().overflowX() == OVISIBLE && containerWidthInInlineDirection < minPreferredLogicalWidth()) {
-        // TODO (lajava) Move this logic to the LayoutGrid class.
-        // Implied minimum size of Grid items.
-        computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(minPreferredLogicalWidth(), containerWidthInInlineDirection, cb);
     } else {
         LayoutUnit preferredWidth = computeLogicalWidthInRegionUsing(MainOrPreferredSize, styleToUse.logicalWidth(), containerWidthInInlineDirection, cb, region);
         computedValues.m_extent = constrainLogicalWidthInRegionByMinMax(preferredWidth, containerWidthInInlineDirection, cb, region);
@@ -2829,13 +2825,7 @@ RenderBox::LogicalExtentComputedValues RenderBox::computeLogicalHeight(LayoutUni
         // FIXME: Account for block-flow in flexible boxes.
         // https://bugs.webkit.org/show_bug.cgi?id=46418
         if (hasOverrideLogicalContentHeight() && (parent()->isFlexibleBoxIncludingDeprecated() || parent()->isRenderGrid())) {
-            LayoutUnit contentHeight = overrideLogicalContentHeight();
-            if (parent()->isRenderGrid() && style().logicalHeight().isAuto() && style().logicalMinHeight().isAuto() && style().overflowX() == OVISIBLE) {
-                LayoutUnit intrinsicContentHeight = computedValues.m_extent - borderAndPaddingLogicalHeight();
-                if (auto minContentHeight = computeContentLogicalHeight(MinSize, Length(MinContent), intrinsicContentHeight))
-                    contentHeight = std::max(contentHeight, constrainContentBoxLogicalHeightByMinMax(minContentHeight.value(), intrinsicContentHeight));
-            }
-            h = Length(contentHeight, Fixed);
+            h = Length(overrideLogicalContentHeight(), Fixed);
         } else if (treatAsReplaced)
             h = Length(computeReplacedLogicalHeight(), Fixed);
         else {