[css-grid] Stretch should grow and shrink items to fit its grid area
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Mar 2017 15:30:34 +0000 (15:30 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Mar 2017 15:30:34 +0000 (15:30 +0000)
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: 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):

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:

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html
LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html
LayoutTests/fast/css-grid-layout/min-width-height-auto.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp

index 7a81bf3..636d09c 100644 (file)
@@ -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-06  Antti Koivisto  <antti@apple.com>
 
         Allow render tree building before loading stylesheet elements
index e3dcfa4..eb54c6f 100644 (file)
 <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>
index 81ab82c..3316e32 100644 (file)
@@ -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>
 
 <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>
 
 <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>
 
index 7f9d32f..5034013 100644 (file)
@@ -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>
 
 
 <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>
 
index fee51f4..d2a7d96 100644 (file)
@@ -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
index dda2ec1..6a9975e 100644 (file)
@@ -2427,10 +2427,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);
@@ -2853,13 +2849,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 {