Changeset 131481 in webkit

Timestamp:

Oct 16, 2012 11:44:37 AM (12 years ago)

Author:

tony@chromium.org

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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/css3/flexbox/stretch-input-in-column-expected.html (added)
• LayoutTests/css3/flexbox/stretch-input-in-column.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderBox.cpp (modified) (3 diffs)
• Source/WebCore/rendering/RenderFlexibleBox.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2012-10-16  Tony Chang  <tony@chromium.org>
+
+        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  <ossy@webkit.org>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-10-16  Tony Chang  <tony@chromium.org>
+
+        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  <simon.fraser@apple.com>
 

trunk/Source/WebCore/rendering/RenderBox.cpp

@@ -1773 +1773 @@
 }
 
+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
 {
@@ -1801 +1819 @@
     // 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;
     }
@@ -1813 +1830 @@
     // 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;
 

trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

@@ -1304 +1304 @@
 
             if (childWidth != child->logicalWidth()) {
-                child->setOverrideLogicalContentWidth(childWidth);
+                child->setOverrideLogicalContentWidth(childWidth - child->borderAndPaddingLogicalWidth());
                 child->setChildNeedsLayout(true, MarkOnlyThis);
                 child->layoutIfNeeded();