min-width/height should default to auto for flexbox items

https://bugs.webkit.org/show_bug.cgi?id=146020

Reviewed by David Hyatt.

Based on Blink's r193665, r194062, r194887 and r195930 by <cbiesinger@chromium.org>.

Source/WebCore:

As specified here
http://dev.w3.org/csswg/css-flexbox/#min-size-auto the default
value of min-{width|height} is auto for flex items.

In case this patch breaks any website (as it's changing the
default value of those properties) the fix is likely to add:

min-width: 0;
min-height: 0;

to any relevant flexitems.

Test: css3/flexbox/min-size-auto.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::isFlexOrGrid): New helper method to identify grids and flexs.
(WebCore::ComputedStyleExtractor::propertyValue): Return auto
for flex items if min-width/height is auto.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
* html/shadow/SliderThumbElement.cpp:
* rendering/RenderBox.cpp:
(WebCore::RenderBox::constrainLogicalHeightByMinMax):
(WebCore::RenderBox::constrainContentBoxLogicalHeightByMinMax):
(WebCore::RenderBox::computeLogicalWidthInRegionUsing):
(WebCore::RenderBox::computeLogicalHeight):
(WebCore::RenderBox::computeLogicalHeightUsing):
(WebCore::RenderBox::computeContentLogicalHeight):
(WebCore::RenderBox::computeContentAndScrollbarLogicalHeightUsing):
(WebCore::RenderBox::computeReplacedLogicalWidth):
(WebCore::RenderBox::computeReplacedLogicalWidthRespectingMinMaxWidth):
(WebCore::RenderBox::computeReplacedLogicalWidthUsing):
(WebCore::RenderBox::computeReplacedLogicalHeight):
(WebCore::RenderBox::computeReplacedLogicalHeightRespectingMinMaxHeight):
(WebCore::RenderBox::computeReplacedLogicalHeightUsing):
(WebCore::RenderBox::availableLogicalHeightUsing):
(WebCore::RenderBox::computePositionedLogicalWidth):
(WebCore::RenderBox::computePositionedLogicalWidthUsing):
(WebCore::RenderBox::computePositionedLogicalHeight):
(WebCore::RenderBox::computePositionedLogicalHeightUsing):
* rendering/RenderBox.h:
* rendering/RenderButton.h:
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):
(WebCore::RenderFlexibleBox::mainAxisExtentIsDefinite):
(WebCore::RenderFlexibleBox::mainAxisLengthIsIndefinite):
(WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):
(WebCore::RenderFlexibleBox::mainAxisOverflowForChild):
* rendering/RenderFlexibleBox.h:
(WebCore::RenderFlexibleBox::isFlexibleBoxImpl):
* rendering/RenderFullScreen.h:
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
* rendering/RenderMediaControlElements.h:
* rendering/RenderMenuList.cpp:
(WebCore::RenderMenuList::adjustInnerStyle): Do not longer set
the min-width explicitly.
* rendering/RenderMenuList.h:
* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::calculateMaxColumnHeight):
* rendering/RenderNamedFlowFragment.cpp:
(WebCore::RenderNamedFlowFragment::maxPageLogicalHeight):
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::computeReplacedLogicalWidth):
(WebCore::RenderReplaced::computeReplacedLogicalHeight):
* rendering/RenderSlider.h:
* rendering/RenderTextControl.h:
* rendering/RenderTextControlSingleLine.cpp:
(WebCore::RenderTextControlSingleLine::createInnerBlockStyle): Do not longer set
the min-width explicitly.
* rendering/mathml/RenderMathMLBlock.h:
* rendering/style/RenderStyle.h:

LayoutTests:

* TestExpectations: Removed passing flexbox tests.
* css3/flexbox/csswg/flex-flow-007.html: Added min-height: 0px.
* css3/flexbox/flexbox-baseline.html: Ditto.
* css3/flexbox/min-size-auto-expected.txt: Added.
* css3/flexbox/min-size-auto.html: Added.
* css3/flexbox/preferred-widths-orthogonal.html: Added min-height: 0px.
* fast/css/auto-min-size-expected.txt: Check default computed
styles for min-width/height for flex items.
* fast/css/auto-min-size.html: Ditto.

Canonical link: https://commits.webkit.org/167120@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@189567 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,22 @@
+2015-09-10  Sergio Villar Senin  <svillar@igalia.com>
+
+        min-width/height should default to auto for flexbox items
+        https://bugs.webkit.org/show_bug.cgi?id=146020
+
+        Reviewed by David Hyatt.
+
+        Based on Blink's r193665, r194062, r194887 and r195930 by <cbiesinger@chromium.org>.
+
+        * TestExpectations: Removed passing flexbox tests.
+        * css3/flexbox/csswg/flex-flow-007.html: Added min-height: 0px.
+        * css3/flexbox/flexbox-baseline.html: Ditto.
+        * css3/flexbox/min-size-auto-expected.txt: Added.
+        * css3/flexbox/min-size-auto.html: Added.
+        * css3/flexbox/preferred-widths-orthogonal.html: Added min-height: 0px.
+        * fast/css/auto-min-size-expected.txt: Check default computed
+        styles for min-width/height for flex items.
+        * fast/css/auto-min-size.html: Ditto.
+
 2015-09-10  ChangSeok Oh  <changseok.oh@collabora.com>
 
         [GTK] Volume bar is broken

LayoutTests/TestExpectations

@@ -203,11 +203,7 @@ webkit.org/b/136754 css3/flexbox/csswg/flex-flexitem-percentage-prescation.html
 webkit.org/b/136754 css3/flexbox/csswg/flex-items-flexibility.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flex-lines/multi-line-wrap-reverse-column-reverse.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flex-lines/multi-line-wrap-with-column-reverse.html [ ImageOnlyFailure ]
-webkit.org/b/136754 css3/flexbox/csswg/flex-margin-no-collapse.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flexbox-flex-wrap-flexing.html [ ImageOnlyFailure ]
-webkit.org/b/136754 css3/flexbox/csswg/flexbox_flex-0-0-0.html [ ImageOnlyFailure ]
-webkit.org/b/136754 css3/flexbox/csswg/flexbox_flex-0-1-0.html [ ImageOnlyFailure ]
-webkit.org/b/136754 css3/flexbox/csswg/flexbox_flex-0-N-0.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flexbox_flex-natural-mixed-basis-auto.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flexbox_generated-container.html [ ImageOnlyFailure ]
 webkit.org/b/136754 css3/flexbox/csswg/flexbox_justifycontent-center-overflow.html [ ImageOnlyFailure ]

LayoutTests/css3/flexbox/csswg/flex-flow-007.html

@@ -22,6 +22,9 @@
     background-color: green;
     height: 50px;
   }
+  :not(#test) div {
+    min-height: 0px;
+  }
 </style>
 <body>
   <p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p>

LayoutTests/css3/flexbox/flexbox-baseline.html

@@ -73,7 +73,7 @@ <h2>h2 below</h2>
 <div>
 should align with the middle
 <div class="inline-flexbox" style="width: 40px; height: 40px">
-    <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+    <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black; min-height: 0px;"></div>
 </div>
 of the grey flexbox
 </div>
@@ -111,8 +111,8 @@ <h2>h2 below</h2>
 <div>
 should align with the middle
 <div class="inline-flexbox column" style="width: 40px; height: 40px;">
-    <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
-    <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px"></div>
+    <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black; min-height: 0px;"></div>
+    <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; min-height: 0px;"></div>
 </div>
 of the grey flexbox
 </div>

LayoutTests/css3/flexbox/min-size-auto-expected.txt

@@ -0,0 +1,7 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS
+PASS
+PASS
+PASS

LayoutTests/css3/flexbox/min-size-auto.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link href="resources/flexbox.css" rel="stylesheet">
+
+<script src="../../resources/js-test.js"></script>
+<script src="../../resources/check-layout.js"></script>
+
+<style>
+.flexbox {
+    width: 10px;
+    height: 10px;
+    background-color: grey;
+}
+
+.item {
+    background-color: red;
+    margin: 5px;
+}
+
+.child {
+    height: 100px;
+    width: 100px;
+    background-color: green;
+}
+
+.width-20 {
+    width: 20px;
+}
+
+.flex-basis-20 {
+    flex-basis: 20px;
+}
+
+</style>
+
+<body onload="checkLayout('.flexbox')">
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item" data-expected-width="100">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+<div class="flexbox column" data-expected-height="10">
+    <div class="item" data-expected-height="100">
+        <div class="child" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item width-20" data-expected-width="20">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+<div class="flexbox" data-expected-width="10">
+    <div class="item flex-basis-20" data-expected-width="100">
+        <div class="child" data-expected-width="100"></div>
+    </div>
+</div>
+
+</body>

LayoutTests/css3/flexbox/preferred-widths-orthogonal.html

@@ -72,7 +72,7 @@
 <br class=clear>
 
 <div class="flexbox vertical-lr" data-expected-height=115  data-expect-width=80>
-    <div class="horizontal-tb nested" data-expected-height=80  data-expect-width=50>
+    <div class="horizontal-tb nested" data-expected-height=80  data-expect-width=50 style="min-height: 0px;">
         <div class="vertical-lr nested" data-expected-height=80  data-expect-width=30>
             <div></div>
             <div></div>
@@ -93,7 +93,7 @@
 <br class=clear>
 
 <div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
-    <div class="nested horizontal-tb" data-expected-height=30  data-expect-width=40>
+    <div class="nested horizontal-tb" data-expected-height=30  data-expect-width=40 style="min-height: 0px;">
         <div></div>
         <div></div>
     </div>

LayoutTests/fast/css/auto-min-size-expected.txt

@@ -1,17 +1,31 @@
 PASS div.style.minWidth is ""
 PASS getComputedStyle(div)["min-width"] is "0px"
-PASS div.style.minWidth is ""
+PASS div.style.minWidth is "auto"
 PASS div.style.maxWidth is ""
 PASS getComputedStyle(div).minWidth is "0px"
 PASS div.style.minWidth is "0px"
 PASS getComputedStyle(div)["min-width"] is "0px"
 PASS div.style.minHeight is ""
 PASS getComputedStyle(div)["min-height"] is "0px"
-PASS div.style.minHeight is ""
+PASS div.style.minHeight is "auto"
 PASS div.style.maxHeight is ""
 PASS getComputedStyle(div).minHeight is "0px"
 PASS div.style.minHeight is "0px"
 PASS getComputedStyle(div)["min-height"] is "0px"
+PASS flexitem.style.minWidth is ""
+PASS getComputedStyle(flexitem)["min-width"] is "auto"
+PASS flexitem.style.minWidth is "auto"
+PASS flexitem.style.maxWidth is ""
+PASS getComputedStyle(flexitem).minWidth is "auto"
+PASS flexitem.style.minWidth is "0px"
+PASS getComputedStyle(flexitem)["min-width"] is "0px"
+PASS flexitem.style.minHeight is ""
+PASS getComputedStyle(flexitem)["min-height"] is "auto"
+PASS flexitem.style.minHeight is "auto"
+PASS flexitem.style.maxHeight is ""
+PASS getComputedStyle(flexitem).minHeight is "auto"
+PASS flexitem.style.minHeight is "0px"
+PASS getComputedStyle(flexitem)["min-height"] is "0px"
 PASS successfullyParsed is true
 
 TEST COMPLETE

LayoutTests/fast/css/auto-min-size.html

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <script src='../../resources/js-test-pre.js'></script>
 <div id=foo></div>
+<div id="flexbox" style="display: flex;"><div id="flexitem"></div></div>
 <script>
 div = document.getElementById('foo');
 shouldBe('div.style.minWidth', '""');
 shouldBe('getComputedStyle(div)["min-width"]', '"0px"');
 
 div.style.minWidth = 'auto';
 div.style.maxWidth = 'auto';
-shouldBe('div.style.minWidth', '""');
+shouldBe('div.style.minWidth', '"auto"');
 shouldBe('div.style.maxWidth', '""');
 shouldBe('getComputedStyle(div).minWidth', '"0px"');
 
@@ -21,13 +22,39 @@
 
 div.style.minHeight = 'auto';
 div.style.maxHeight = 'auto';
-shouldBe('div.style.minHeight', '""');
+shouldBe('div.style.minHeight', '"auto"');
 shouldBe('div.style.maxHeight', '""');
 shouldBe('getComputedStyle(div).minHeight', '"0px"');
 
 div.style.minHeight = 0;
 shouldBe('div.style.minHeight', '"0px"');
 shouldBe('getComputedStyle(div)["min-height"]', '"0px"');
 
+var flexitem = document.getElementById("flexitem");
+shouldBe('flexitem.style.minWidth', '""');
+shouldBe('getComputedStyle(flexitem)["min-width"]', '"auto"');
+
+flexitem.style.minWidth = 'auto';
+flexitem.style.maxWidth = 'auto';
+shouldBe('flexitem.style.minWidth', '"auto"');
+shouldBe('flexitem.style.maxWidth', '""');
+shouldBe('getComputedStyle(flexitem).minWidth', '"auto"');
+
+flexitem.style.minWidth = 0;
+shouldBe('flexitem.style.minWidth', '"0px"');
+shouldBe('getComputedStyle(flexitem)["min-width"]', '"0px"');
+
+shouldBe('flexitem.style.minHeight', '""');
+shouldBe('getComputedStyle(flexitem)["min-height"]', '"auto"');
+
+flexitem.style.minHeight = 'auto';
+flexitem.style.maxHeight = 'auto';
+shouldBe('flexitem.style.minHeight', '"auto"');
+shouldBe('flexitem.style.maxHeight', '""');
+shouldBe('getComputedStyle(flexitem).minHeight', '"auto"');
+
+flexitem.style.minHeight = 0;
+shouldBe('flexitem.style.minHeight', '"0px"');
+shouldBe('getComputedStyle(flexitem)["min-height"]', '"0px"');
 </script>
 <script src='../../resources/js-test-post.js'></script>

Source/WebCore/ChangeLog

@@ -1,3 +1,85 @@
+2015-09-10  Sergio Villar Senin  <svillar@igalia.com>
+
+        min-width/height should default to auto for flexbox items
+        https://bugs.webkit.org/show_bug.cgi?id=146020
+
+        Reviewed by David Hyatt.
+
+        Based on Blink's r193665, r194062, r194887 and r195930 by <cbiesinger@chromium.org>.
+
+        As specified here
+        http://dev.w3.org/csswg/css-flexbox/#min-size-auto the default
+        value of min-{width|height} is auto for flex items.
+
+        In case this patch breaks any website (as it's changing the
+        default value of those properties) the fix is likely to add:
+
+        min-width: 0;
+        min-height: 0;
+
+        to any relevant flexitems.
+
+        Test: css3/flexbox/min-size-auto.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::isFlexOrGrid): New helper method to identify grids and flexs.
+        (WebCore::ComputedStyleExtractor::propertyValue): Return auto
+        for flex items if min-width/height is auto.
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue):
+        * html/shadow/SliderThumbElement.cpp:
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::constrainLogicalHeightByMinMax):
+        (WebCore::RenderBox::constrainContentBoxLogicalHeightByMinMax):
+        (WebCore::RenderBox::computeLogicalWidthInRegionUsing):
+        (WebCore::RenderBox::computeLogicalHeight):
+        (WebCore::RenderBox::computeLogicalHeightUsing):
+        (WebCore::RenderBox::computeContentLogicalHeight):
+        (WebCore::RenderBox::computeContentAndScrollbarLogicalHeightUsing):
+        (WebCore::RenderBox::computeReplacedLogicalWidth):
+        (WebCore::RenderBox::computeReplacedLogicalWidthRespectingMinMaxWidth):
+        (WebCore::RenderBox::computeReplacedLogicalWidthUsing):
+        (WebCore::RenderBox::computeReplacedLogicalHeight):
+        (WebCore::RenderBox::computeReplacedLogicalHeightRespectingMinMaxHeight):
+        (WebCore::RenderBox::computeReplacedLogicalHeightUsing):
+        (WebCore::RenderBox::availableLogicalHeightUsing):
+        (WebCore::RenderBox::computePositionedLogicalWidth):
+        (WebCore::RenderBox::computePositionedLogicalWidthUsing):
+        (WebCore::RenderBox::computePositionedLogicalHeight):
+        (WebCore::RenderBox::computePositionedLogicalHeightUsing):
+        * rendering/RenderBox.h:
+        * rendering/RenderButton.h:
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::computeMainAxisExtentForChild):
+        (WebCore::RenderFlexibleBox::mainAxisExtentIsDefinite):
+        (WebCore::RenderFlexibleBox::mainAxisLengthIsIndefinite):
+        (WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):
+        (WebCore::RenderFlexibleBox::mainAxisOverflowForChild):
+        * rendering/RenderFlexibleBox.h:
+        (WebCore::RenderFlexibleBox::isFlexibleBoxImpl):
+        * rendering/RenderFullScreen.h:
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeUsedBreadthOfSpecifiedLength):
+        * rendering/RenderMediaControlElements.h:
+        * rendering/RenderMenuList.cpp:
+        (WebCore::RenderMenuList::adjustInnerStyle): Do not longer set
+        the min-width explicitly.
+        * rendering/RenderMenuList.h:
+        * rendering/RenderMultiColumnSet.cpp:
+        (WebCore::RenderMultiColumnSet::calculateMaxColumnHeight):
+        * rendering/RenderNamedFlowFragment.cpp:
+        (WebCore::RenderNamedFlowFragment::maxPageLogicalHeight):
+        * rendering/RenderReplaced.cpp:
+        (WebCore::RenderReplaced::computeReplacedLogicalWidth):
+        (WebCore::RenderReplaced::computeReplacedLogicalHeight):
+        * rendering/RenderSlider.h:
+        * rendering/RenderTextControl.h:
+        * rendering/RenderTextControlSingleLine.cpp:
+        (WebCore::RenderTextControlSingleLine::createInnerBlockStyle): Do not longer set
+        the min-width explicitly.
+        * rendering/mathml/RenderMathMLBlock.h:
+        * rendering/style/RenderStyle.h:
+
 2015-09-10  ChangSeok Oh  <changseok.oh@collabora.com>
 
         [GTK] Volume bar is broken

Source/WebCore/css/CSSComputedStyleDeclaration.cpp

@@ -1899,6 +1899,11 @@ static RefPtr<CSSValueList> valueForContentPositionAndDistributionWithOverflowAl
     return result;
 }
 
+inline static bool isFlexOrGrid(ContainerNode* element)
+{
+    return element && element->computedStyle() && element->computedStyle()->isDisplayFlexibleOrGridBox();
+}
+
 RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
 {
     Node* styledNode = this->styledNode();
@@ -2492,14 +2497,18 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return zoomAdjustedPixelValueForLength(maxWidth, *style);
         }
         case CSSPropertyMinHeight:
-            // FIXME: For flex-items, min-height:auto should compute to min-content.
-            if (style->minHeight().isAuto())
+            if (style->minHeight().isAuto()) {
+                if (isFlexOrGrid(styledNode->parentNode()))
+                    return cssValuePool.createIdentifierValue(CSSValueAuto);
                 return zoomAdjustedPixelValue(0, *style);
+            }
             return zoomAdjustedPixelValueForLength(style->minHeight(), *style);
         case CSSPropertyMinWidth:
-            // FIXME: For flex-items, min-width:auto should compute to min-content.
-            if (style->minWidth().isAuto())
+            if (style->minWidth().isAuto()) {
+                if (isFlexOrGrid(styledNode->parentNode()))
+                    return cssValuePool.createIdentifierValue(CSSValueAuto);
                 return zoomAdjustedPixelValue(0, *style);
+            }
             return zoomAdjustedPixelValueForLength(style->minWidth(), *style);
         case CSSPropertyObjectFit:
             return cssValuePool.createValue(style->objectFit());

Source/WebCore/css/CSSParser.cpp

@@ -2254,7 +2254,7 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyWebkitMinLogicalWidth:
     case CSSPropertyMinHeight:
     case CSSPropertyWebkitMinLogicalHeight:
-        validPrimitive = isValidSize(valueWithCalculation);
+        validPrimitive = id == CSSValueAuto || isValidSize(valueWithCalculation);
         break;
 
     case CSSPropertyWidth:

Source/WebCore/html/shadow/SliderThumbElement.cpp

@@ -121,6 +121,7 @@ class RenderSliderContainer final : public RenderFlexibleBox {
 
 private:
     virtual void layout() override;
+    bool isFlexibleBoxImpl() const override { return true; }
 };
 
 void RenderSliderContainer::computeLogicalHeight(LayoutUnit logicalHeight, LayoutUnit logicalTop, LogicalExtentComputedValues& computedValues) const