- Revision
- 131481
- Author
- [email protected]
- Date
- 2012-10-16 11:44:37 -0700 (Tue, 16 Oct 2012)
Log Message
in a column flexbox, input overflows the box when stretched
https://bugs.webkit.org/show_bug.cgi?id=99273
Reviewed by Ojan Vafai.
Source/WebCore:
Fix a bug where we didn't properly subtract padding and border when overriding the child size.
We didn't see this because of a performance optimization in RenderBox where we stretch children.
Also apply this performance optimization in new flexbox for form controls.
Test: css3/flexbox/stretch-input-in-column.html
* rendering/RenderBox.cpp:
(WebCore::flexboxChildHasStretchAlignment):
(WebCore::isStretchingVerticalFlexboxChild):
(WebCore::RenderBox::sizesLogicalWidthToFitContent): Apply performance optimization to form controls in new flexbox.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Properly subtract border and padding.
LayoutTests:
Add a ref test since we're testing form rendering. Make sure that we get the
right behavior without the performance optimization (e.g., in multiline flexbox).
* css3/flexbox/stretch-input-in-column-expected.html: Added.
* css3/flexbox/stretch-input-in-column.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (131480 => 131481)
--- trunk/LayoutTests/ChangeLog 2012-10-16 18:38:11 UTC (rev 131480)
+++ trunk/LayoutTests/ChangeLog 2012-10-16 18:44:37 UTC (rev 131481)
@@ -1,3 +1,16 @@
+2012-10-16 Tony Chang <[email protected]>
+
+ in a column flexbox, input overflows the box when stretched
+ https://bugs.webkit.org/show_bug.cgi?id=99273
+
+ Reviewed by Ojan Vafai.
+
+ Add a ref test since we're testing form rendering. Make sure that we get the
+ right behavior without the performance optimization (e.g., in multiline flexbox).
+
+ * css3/flexbox/stretch-input-in-column-expected.html: Added.
+ * css3/flexbox/stretch-input-in-column.html: Added.
+
2012-10-16 Csaba Osztrogonác <[email protected]>
[Qt] Unreviewed gardening, unskip a now passing test.
Added: trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html (0 => 131481)
--- trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/stretch-input-in-column-expected.html 2012-10-16 18:44:37 UTC (rev 131481)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href=""
+<style>
+.flexbox {
+ background-color: grey;
+}
+.flexbox > * {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+}
+</style>
+<body>
+<p>Form controls that are stretched in a column flexbox should not overflow the flexbox.</p>
+<div class="flexbox">
+ <input>
+</div>
+<div class="flexbox">
+ <textarea></textarea>
+</div>
+<div class="flexbox">
+ <input type="button">
+</div>
+<div class="flexbox">
+ <select></select>
+</div>
+<div class="flexbox">
+ <legend style="border: 2px solid black">legend</legend>
+</div>
+<div class="flexbox">
+ <div type="border: 4px solid black; padding: 10px;">
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/css3/flexbox/stretch-input-in-column.html (0 => 131481)
--- trunk/LayoutTests/css3/flexbox/stretch-input-in-column.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/stretch-input-in-column.html 2012-10-16 18:44:37 UTC (rev 131481)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href=""
+<style>
+.flexbox {
+ background-color: grey;
+}
+</style>
+<body>
+<p>Form controls that are stretched in a column flexbox should not overflow the flexbox.</p>
+<div class="flexbox column">
+ <input>
+</div>
+<div class="flexbox column align-content-flex-start">
+ <textarea class="align-self-stretch"></textarea>
+</div>
+<div class="flexbox column wrap">
+ <input type="button">
+</div>
+<div class="flexbox column">
+ <select></select>
+</div>
+<div class="flexbox column">
+ <legend style="border: 2px solid black">legend</legend>
+</div>
+<div class="flexbox column wrap">
+ <div type="border: 4px solid black; padding: 10px;">
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (131480 => 131481)
--- trunk/Source/WebCore/ChangeLog 2012-10-16 18:38:11 UTC (rev 131480)
+++ trunk/Source/WebCore/ChangeLog 2012-10-16 18:44:37 UTC (rev 131481)
@@ -1,3 +1,23 @@
+2012-10-16 Tony Chang <[email protected]>
+
+ in a column flexbox, input overflows the box when stretched
+ https://bugs.webkit.org/show_bug.cgi?id=99273
+
+ Reviewed by Ojan Vafai.
+
+ Fix a bug where we didn't properly subtract padding and border when overriding the child size.
+ We didn't see this because of a performance optimization in RenderBox where we stretch children.
+ Also apply this performance optimization in new flexbox for form controls.
+
+ Test: css3/flexbox/stretch-input-in-column.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::flexboxChildHasStretchAlignment):
+ (WebCore::isStretchingVerticalFlexboxChild):
+ (WebCore::RenderBox::sizesLogicalWidthToFitContent): Apply performance optimization to form controls in new flexbox.
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Properly subtract border and padding.
+
2012-10-16 Simon Fraser <[email protected]>
REGRESSION (r128787): Fixed position div causes other elements to not update correctly
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (131480 => 131481)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2012-10-16 18:38:11 UTC (rev 131480)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2012-10-16 18:44:37 UTC (rev 131481)
@@ -1772,6 +1772,24 @@
return logicalWidthResult;
}
+static bool flexItemHasStretchAlignment(const RenderObject* flexitem)
+{
+ RenderObject* parent = flexitem->parent();
+ return flexitem->style()->alignSelf() == AlignStretch || (flexitem->style()->alignSelf() == AlignAuto && parent->style()->alignItems() == AlignStretch);
+}
+
+static bool isStretchingColumnFlexItem(const RenderObject* flexitem)
+{
+ RenderObject* parent = flexitem->parent();
+ if (parent->isDeprecatedFlexibleBox() && parent->style()->boxOrient() == VERTICAL && parent->style()->boxAlign() == BSTRETCH)
+ return true;
+
+ // We don't stretch multiline flexboxes because they need to apply line spacing (align-content) first.
+ if (parent->isFlexibleBox() && parent->style()->flexWrap() == FlexWrapNone && parent->style()->isColumnFlexDirection() && flexItemHasStretchAlignment(flexitem))
+ return true;
+ return false;
+}
+
bool RenderBox::sizesLogicalWidthToFitContent(SizeType widthType) const
{
// Marquees in WinIE are like a mixture of blocks and inline-blocks. They size as though they're blocks,
@@ -1800,11 +1818,10 @@
// In the case of columns that have a stretch alignment, we go ahead and layout at the
// stretched size to avoid an extra layout when applying alignment.
if (parent()->isFlexibleBox()) {
- // For multiline columns, we need to apply the flex-line-pack first, so we can't stretch now.
+ // For multiline columns, we need to apply align-content first, so we can't stretch now.
if (!parent()->style()->isColumnFlexDirection() || parent()->style()->flexWrap() != FlexWrapNone)
return true;
- EAlignItems itemAlign = style()->alignSelf();
- if (itemAlign != AlignStretch && (itemAlign != AlignAuto || parent()->style()->alignItems() != AlignStretch))
+ if (!flexItemHasStretchAlignment(this))
return true;
}
@@ -1812,16 +1829,14 @@
// that don't stretch their kids lay out their children at their intrinsic widths.
// FIXME: Think about block-flow here.
// https://bugs.webkit.org/show_bug.cgi?id=46473
- if (parent()->isDeprecatedFlexibleBox()
- && (parent()->style()->boxOrient() == HORIZONTAL || parent()->style()->boxAlign() != BSTRETCH))
+ if (parent()->isDeprecatedFlexibleBox() && (parent()->style()->boxOrient() == HORIZONTAL || parent()->style()->boxAlign() != BSTRETCH))
return true;
- // Button, input, select, textarea, and legend treat
- // width value of 'auto' as 'intrinsic' unless it's in a
- // stretching vertical flexbox.
+ // Button, input, select, textarea, and legend treat width value of 'auto' as 'intrinsic' unless it's in a
+ // stretching column flexbox.
// FIXME: Think about block-flow here.
// https://bugs.webkit.org/show_bug.cgi?id=46473
- if (logicalWidth.type() == Auto && !(parent()->isDeprecatedFlexibleBox() && parent()->style()->boxOrient() == VERTICAL && parent()->style()->boxAlign() == BSTRETCH) && node() && (node()->hasTagName(inputTag) || node()->hasTagName(selectTag) || node()->hasTagName(buttonTag) || node()->hasTagName(textareaTag) || node()->hasTagName(legendTag)))
+ if (logicalWidth.type() == Auto && !isStretchingColumnFlexItem(this) && node() && (node()->hasTagName(inputTag) || node()->hasTagName(selectTag) || node()->hasTagName(buttonTag) || node()->hasTagName(textareaTag) || node()->hasTagName(legendTag)))
return true;
if (isHorizontalWritingMode() != containingBlock()->isHorizontalWritingMode())
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (131480 => 131481)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-10-16 18:38:11 UTC (rev 131480)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2012-10-16 18:44:37 UTC (rev 131481)
@@ -1303,7 +1303,7 @@
childWidth = child->constrainLogicalWidthInRegionByMinMax(childWidth, childWidth, this);
if (childWidth != child->logicalWidth()) {
- child->setOverrideLogicalContentWidth(childWidth);
+ child->setOverrideLogicalContentWidth(childWidth - child->borderAndPaddingLogicalWidth());
child->setChildNeedsLayout(true, MarkOnlyThis);
child->layoutIfNeeded();
}
