Skip to content
Permalink
Browse files
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
  • Loading branch information
svillar committed Sep 10, 2015
1 parent 12f25d1 commit 411a9954b47e1c45baf8427228131cfa3b89fce9
Showing 31 changed files with 359 additions and 65 deletions.
@@ -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
@@ -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 ]
@@ -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>
@@ -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>
@@ -0,0 +1,7 @@
PASS successfullyParsed is true

TEST COMPLETE
PASS
PASS
PASS
PASS
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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
@@ -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());
@@ -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:
@@ -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

0 comments on commit 411a995

Please sign in to comment.