Diff
Modified: trunk/LayoutTests/ChangeLog (125054 => 125055)
--- trunk/LayoutTests/ChangeLog 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/LayoutTests/ChangeLog 2012-08-08 18:29:02 UTC (rev 125055)
@@ -1,3 +1,17 @@
+2012-08-07 Ojan Vafai <[email protected]>
+
+ percentage height/width values in quirks mode are incorrectly resolved in flexbox children
+ https://bugs.webkit.org/show_bug.cgi?id=81809
+
+ Reviewed by Tony Chang.
+
+ * css3/flexbox/box-sizing-min-max-sizes-expected.txt: Added.
+ * css3/flexbox/box-sizing-min-max-sizes.html: Added.
+ * css3/flexbox/percentage-sizes-expected.txt: Added.
+ * css3/flexbox/percentage-sizes-quirks-expected.txt: Added.
+ * css3/flexbox/percentage-sizes-quirks.html: Added.
+ * css3/flexbox/percentage-sizes.html: Added.
+
2012-08-08 Andrew Scherkus <[email protected]>
Fire suspend event whenever network state is set to NETWORK_IDLE.
Added: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,2 @@
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<style>
+.flexbox {
+ display: -webkit-flex;
+ background-color: teal;
+}
+.flexbox > div {
+ box-sizing: border-box;
+}
+.column {
+ -webkit-flex-flow: column;
+}
+</style>
+<script>
+if (window.testRunner)
+ testRunner.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkLayout('.flexbox')">
+
+<div class="flexbox">
+ <div style="border: 5px solid orange; padding: 5px; max-width: 30px; width: 40px;" data-expected-width=30></div>
+ <div style="border: 5px solid orange; padding: 5px; min-width: 30px; width: 10px;" data-expected-width=30></div>
+</div>
+
+<div class="flexbox column">
+ <div style="border: 5px solid orange; padding: 5px; max-height: 30px; height: 40px;" data-expected-height=30></div>
+ <div style="border: 5px solid orange; padding: 5px; min-height: 30px; height: 10px;" data-expected-height=30></div>
+</div>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/flexbox/box-sizing-min-max-sizes.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,8 @@
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/percentage-sizes-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,5 @@
+CompatMode: BackCompat
+PASS
+PASS
+PASS
+PASS
Property changes on: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks-expected.txt
___________________________________________________________________
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,73 @@
+<style>
+.flexbox {
+ display: -webkit-flex;
+}
+.column {
+ height: 50px;
+}
+.row {
+ width: 50px;
+}
+.container > div {
+ outline: 2px solid blue;
+}
+.row > div > div {
+ height: 20px;
+ -webkit-flex: 0 0 auto;
+}
+.column > .flexbox {
+ -webkit-flex-direction: column;
+}
+.container > div > :nth-child(1) {
+ background-color: orange;
+}
+.container > div > :nth-child(2) {
+ background-color: yellow;
+}
+.container > div > :nth-child(3) {
+ background-color: salmon;
+}
+.container > div > :nth-child(4) {
+ background-color: purple;
+}
+</style>
+<script>
+if (window.testRunner)
+ testRunner.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkLayout('.flexbox')">
+
+<div>CompatMode: <script>document.write(document.compatMode)</script></div>
+
+<div class="container row">
+ <div class="flexbox">
+ <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+ <div style='width: 50%;' data-expected-width=25></div>
+ <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+ <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container column" style='margin-bottom: 50px'>
+ <div class="flexbox">
+ <div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
+ <div style='height: 50%;' data-expected-height=25></div>
+ <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+ <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
+ </div>
+</div>
+
+<div class="container row">
+ <div class="flexbox">
+ <div style="-webkit-flex: 0 0 50%" data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container column">
+ <div class="flexbox">
+ <div style="-webkit-flex: 0 0 50%" data-expected-height=25></div>
+ </div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/css3/flexbox/percentage-sizes-quirks.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/percentage-sizes.html (0 => 125055)
--- trunk/LayoutTests/css3/flexbox/percentage-sizes.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/percentage-sizes.html 2012-08-08 18:29:02 UTC (rev 125055)
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+ display: -webkit-flex;
+}
+.column, .column .fixed {
+ height: 50px;
+}
+.row, .row .fixed {
+ width: 50px;
+}
+.container > div {
+ outline: 2px solid blue;
+}
+.row > div > div {
+ height: 20px;
+}
+.flexbox > div {
+ -webkit-flex: 0 0 auto;
+}
+.column > .flexbox {
+ -webkit-flex-direction: column;
+}
+.container > div > :nth-child(1) {
+ background-color: orange;
+}
+.container > div > :nth-child(2) {
+ background-color: yellow;
+}
+.container > div > :nth-child(3) {
+ background-color: salmon;
+}
+.container > div > :nth-child(4) {
+ background-color: purple;
+}
+</style>
+<script>
+if (window.testRunner)
+ testRunner.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkLayout('.flexbox')">
+
+<div class="container row">
+ <div class="flexbox">
+ <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+ <div style='width: 50%;' data-expected-width=25></div>
+ <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+ <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container row" style='width: 100px'>
+ <div class="flexbox fixed">
+ <div style='width: 10px; min-width: 50%;' data-expected-width=25></div>
+ <div style='width: 50%;' data-expected-width=25></div>
+ <div style='width: 10px; max-width: 50%;' data-expected-width=10></div>
+ <div style='min-width: 10px; width: 100px; max-width: 50%;' data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container column" style='margin-bottom: 100px'>
+ <div class="flexbox" style="height: auto">
+ <div style='height: 10px; min-height: 50%;' data-expected-height=10></div>
+ <div style='height: 50%;' data-expected-height=0></div>
+ <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+ <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=100></div>
+ </div>
+</div>
+
+<div class="container column">
+ <div class="flexbox fixed">
+ <div style='height: 10px; min-height: 50%;' data-expected-height=25></div>
+ <div style='height: 50%;' data-expected-height=25></div>
+ <div style='height: 10px; max-height: 50%;' data-expected-height=10></div>
+ <div style='min-height: 10px; height: 100px; max-height: 50%;' data-expected-height=25></div>
+ </div>
+</div>
+
+<div class="container row">
+ <div class="flexbox">
+ <div style="-webkit-flex: 0 0 50%" data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container column">
+ <div class="flexbox">
+ <div style="-webkit-flex: 0 0 50%" data-expected-height=0></div>
+ </div>
+</div>
+
+<div class="container row">
+ <div class="flexbox fixed">
+ <div style="-webkit-flex: 0 0 50%" data-expected-width=25></div>
+ </div>
+</div>
+
+<div class="container column">
+ <div class="flexbox fixed">
+ <div style="-webkit-flex: 0 0 50%" data-expected-height=25></div>
+ </div>
+</div>
+
+</body>
Property changes on: trunk/LayoutTests/css3/flexbox/percentage-sizes.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (125054 => 125055)
--- trunk/Source/WebCore/ChangeLog 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/Source/WebCore/ChangeLog 2012-08-08 18:29:02 UTC (rev 125055)
@@ -1,3 +1,33 @@
+2012-08-07 Ojan Vafai <[email protected]>
+
+ percentage height/width values in quirks mode are incorrectly resolved in flexbox children
+ https://bugs.webkit.org/show_bug.cgi?id=81809
+
+ Reviewed by Tony Chang.
+
+ When computing percentage logical heights we need to use the RenderBox helper methods
+ to make sure we handle all the edge cases correctly (e.g. walk up the containing block
+ ancestor chain in quirks mode until we find a definite size).
+
+ For widths, the containing block always has a definite size, so all we need to do
+ is call computeContentBoxLogicalWidth(valueForLength(...)), although I'm not sure
+ this does the right thing for the intrinsic sizing keywords.
+
+ Tests: css3/flexbox/box-sizing-min-max-sizes.html
+ css3/flexbox/percentage-sizes-quirks.html
+ css3/flexbox/percentage-sizes.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeLogicalClientHeight):
+ (WebCore):
+ * rendering/RenderBox.h:
+ (RenderBox):
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::computeMainAxisSizeForChild):
+ (WebCore::RenderFlexibleBox::preferredMainAxisContentExtentForChild):
+ (WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):
+ * rendering/RenderFlexibleBox.h:
+
2012-08-08 Andrew Scherkus <[email protected]>
Fire suspend event whenever network state is set to NETWORK_IDLE.
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (125054 => 125055)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2012-08-08 18:29:02 UTC (rev 125055)
@@ -2061,6 +2061,14 @@
return logicalHeight;
}
+LayoutUnit RenderBox::computeLogicalClientHeight(SizeType heightType, const Length& height)
+{
+ LayoutUnit heightIncludingScrollbar = computeContentLogicalHeightUsing(heightType, height);
+ if (heightIncludingScrollbar == -1)
+ return -1;
+ return std::max(LayoutUnit(0), computeContentBoxLogicalHeight(heightIncludingScrollbar) - scrollbarLogicalHeight());
+}
+
LayoutUnit RenderBox::computeContentLogicalHeightUsing(SizeType heightType, const Length& height)
{
if (height.isAuto())
Modified: trunk/Source/WebCore/rendering/RenderBox.h (125054 => 125055)
--- trunk/Source/WebCore/rendering/RenderBox.h 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2012-08-08 18:29:02 UTC (rev 125055)
@@ -342,6 +342,7 @@
LayoutUnit computeLogicalWidthInRegionUsing(SizeType, LayoutUnit availableLogicalWidth, const RenderBlock* containingBlock, RenderRegion*, LayoutUnit offsetFromLogicalTopOfFirstPage);
LayoutUnit computeLogicalHeightUsing(SizeType, const Length& height);
+ LayoutUnit computeLogicalClientHeight(SizeType, const Length& height);
LayoutUnit computeContentLogicalHeightUsing(SizeType, const Length& height);
LayoutUnit computeReplacedLogicalWidthUsing(SizeType, Length width) const;
LayoutUnit computeReplacedLogicalWidthRespectingMinMaxWidth(LayoutUnit logicalWidth, bool includeMaxWidth = true) const;
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (125054 => 125055)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-08-08 18:29:02 UTC (rev 125055)
@@ -400,12 +400,13 @@
return contentLogicalWidth();
}
-LayoutUnit RenderFlexibleBox::computeLogicalClientHeight(SizeType heightType, const Length& height)
+LayoutUnit RenderFlexibleBox::computeMainAxisExtentForChild(RenderBox* child, SizeType sizeType, const Length& size, LayoutUnit maximumValue)
{
- LayoutUnit heightIncludingScrollbar = computeContentLogicalHeightUsing(heightType, height);
- if (heightIncludingScrollbar == -1)
- return -1;
- return std::max(LayoutUnit(0), computeContentBoxLogicalHeight(heightIncludingScrollbar) - scrollbarLogicalHeight());
+ // FIXME: This is wrong for orthogonal flows. It should use the flexbox's writing-mode, not the child's in order
+ // to figure out the logical height/width.
+ if (isColumnFlow())
+ return child->computeLogicalClientHeight(sizeType, size);
+ return child->computeContentBoxLogicalWidth(valueForLength(size, maximumValue, view()));
}
WritingMode RenderFlexibleBox::transformedWritingMode() const
@@ -604,9 +605,7 @@
LayoutUnit mainAxisExtent = hasOrthogonalFlow(child) ? child->logicalHeight() : child->maxPreferredLogicalWidth();
return mainAxisExtent - mainAxisBorderAndPaddingExtentForChild(child);
}
- LayoutUnit extent = minimumValueForLength(flexBasis, mainAxisContentExtent(), view());
- extent = isColumnFlow() ? child->computeContentBoxLogicalHeight(extent) : child->computeContentBoxLogicalWidth(extent);
- return std::max(LayoutUnit(0), extent);
+ return std::max(LayoutUnit(0), computeMainAxisExtentForChild(child, MainOrPreferredSize, flexBasis, mainAxisContentExtent()));
}
LayoutUnit RenderFlexibleBox::computeAvailableFreeSpace(LayoutUnit preferredMainAxisExtent)
@@ -813,25 +812,23 @@
LayoutUnit RenderFlexibleBox::adjustChildSizeForMinAndMax(RenderBox* child, LayoutUnit childSize, LayoutUnit flexboxAvailableContentExtent)
{
+ // FIXME: Support intrinsic min/max lengths.
Length max = isHorizontalFlow() ? child->style()->maxWidth() : child->style()->maxHeight();
- Length min = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
- RenderView* renderView = view();
- // FIXME: valueForLength isn't quite right in quirks mode: percentage heights should check parents until a value is found.
- // https://bugs.webkit.org/show_bug.cgi?id=81809
- if (max.isSpecified() && childSize > valueForLength(max, flexboxAvailableContentExtent, renderView))
- childSize = valueForLength(max, flexboxAvailableContentExtent, renderView);
-
- if (min.isSpecified() && childSize < valueForLength(min, flexboxAvailableContentExtent, renderView))
- return valueForLength(min, flexboxAvailableContentExtent, renderView);
-
- // FIXME: Support min/max sizes of fit-content, max-content and fill-available.
- if (min.isAuto()) {
- LayoutUnit minContent = hasOrthogonalFlow(child) ? child->logicalHeight() : child->minPreferredLogicalWidth();
- minContent -= mainAxisBorderAndPaddingExtentForChild(child);
- return std::max(childSize, minContent);
+ if (max.isSpecified()) {
+ LayoutUnit maxExtent = computeMainAxisExtentForChild(child, MaxSize, max, flexboxAvailableContentExtent);
+ if (maxExtent != -1 && childSize > maxExtent)
+ childSize = maxExtent;
}
- return childSize;
+ Length min = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
+ LayoutUnit minExtent = 0;
+ if (min.isSpecified())
+ minExtent = computeMainAxisExtentForChild(child, MinSize, min, flexboxAvailableContentExtent);
+ else if (min.isAuto()) {
+ minExtent = hasOrthogonalFlow(child) ? child->logicalHeight() : child->minPreferredLogicalWidth();
+ minExtent -= mainAxisBorderAndPaddingExtentForChild(child);
+ }
+ return std::max(childSize, minExtent);
}
bool RenderFlexibleBox::computeNextFlexLine(OrderIterator& iterator, OrderedFlexItemList& orderedChildren, LayoutUnit& preferredMainAxisExtent, float& totalFlexGrow, float& totalWeightedFlexShrink, LayoutUnit& minMaxAppliedMainAxisExtent)
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (125054 => 125055)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-08-08 18:18:09 UTC (rev 125054)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2012-08-08 18:29:02 UTC (rev 125055)
@@ -85,7 +85,7 @@
LayoutUnit mainAxisExtent() const;
LayoutUnit crossAxisContentExtent() const;
LayoutUnit mainAxisContentExtent();
- LayoutUnit computeLogicalClientHeight(SizeType, const Length& height);
+ LayoutUnit computeMainAxisExtentForChild(RenderBox* child, SizeType, const Length& size, LayoutUnit maximumValue);
WritingMode transformedWritingMode() const;
LayoutUnit flowAwareBorderStart() const;
LayoutUnit flowAwareBorderEnd() const;
