Changeset 209068 in webkit

Timestamp:

Nov 29, 2016 8:04:41 AM (7 years ago)

Author:

Alan Bujtas

Message:

Safari (WebKit) doesn't wrap element within flex when width comes below min-width
​https://bugs.webkit.org/show_bug.cgi?id=136041
<rdar://problem/25569370>

Reviewed by Darin Adler.

Source/WebCore:

While figuring out whether a particular flex item fits the current line, we need to take
the min-width into account too. This matches both FF and Chrome behaviour.

Tests: fast/flexbox/flex-wrap-when-min-widht-is-set-1.html

fast/flexbox/flex-wrap-when-min-widht-is-set-2.html

• rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computeNextFlexLine):

LayoutTests:

• fast/flexbox/flex-wrap-when-min-widht-is-set-1-expected.html: Added.
• fast/flexbox/flex-wrap-when-min-widht-is-set-1.html: Added.
• fast/flexbox/flex-wrap-when-min-widht-is-set-2-expected.html: Added.
• fast/flexbox/flex-wrap-when-min-widht-is-set-2.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/flexbox/flex-wrap-when-min-widht-is-set-1-expected.html (added)
• LayoutTests/fast/flexbox/flex-wrap-when-min-widht-is-set-1.html (added)
• LayoutTests/fast/flexbox/flex-wrap-when-min-widht-is-set-2-expected.html (added)
• LayoutTests/fast/flexbox/flex-wrap-when-min-widht-is-set-2.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderFlexibleBox.cpp (modified) (2 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2016-11-29  Zalan Bujtas  <zalan@apple.com>
+
+        Safari (WebKit) doesn't wrap element within flex when width comes below min-width
+        https://bugs.webkit.org/show_bug.cgi?id=136041
+        <rdar://problem/25569370>
+
+        Reviewed by Darin Adler.
+
+        * fast/flexbox/flex-wrap-when-min-widht-is-set-1-expected.html: Added.
+        * fast/flexbox/flex-wrap-when-min-widht-is-set-1.html: Added.
+        * fast/flexbox/flex-wrap-when-min-widht-is-set-2-expected.html: Added.
+        * fast/flexbox/flex-wrap-when-min-widht-is-set-2.html: Added.
+
 2016-11-28  Antti Koivisto  <antti@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2016-11-29  Zalan Bujtas  <zalan@apple.com>
+
+        Safari (WebKit) doesn't wrap element within flex when width comes below min-width
+        https://bugs.webkit.org/show_bug.cgi?id=136041
+        <rdar://problem/25569370>
+
+        Reviewed by Darin Adler.
+
+        While figuring out whether a particular flex item fits the current line, we need to take
+        the min-width into account too. This matches both FF and Chrome behaviour.
+
+        Tests: fast/flexbox/flex-wrap-when-min-widht-is-set-1.html
+               fast/flexbox/flex-wrap-when-min-widht-is-set-2.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::computeNextFlexLine):
+
 2016-11-29  Antti Koivisto  <antti@apple.com>
 

trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

@@ -984 +984 @@
     bool lineHasInFlowItem = false;
 
+    LayoutUnit preferredMainAxisExtentWithMinWidthConstraint;
     for (RenderBox* child = m_orderIterator.currentChild(); child; child = m_orderIterator.next()) {
         if (child->isOutOfFlowPositioned()) {
@@ -991 +992 @@
 
         LayoutUnit childMainAxisExtent = preferredMainAxisContentExtentForChild(*child, hasInfiniteLineLength);
-        LayoutUnit childMainAxisMarginBoxExtent = mainAxisBorderAndPaddingExtentForChild(*child) + childMainAxisExtent;
-        childMainAxisMarginBoxExtent += isHorizontalFlow() ? child->horizontalMarginExtent() : child->verticalMarginExtent();
-
-        if (isMultiline() && preferredMainAxisExtent + childMainAxisMarginBoxExtent > lineBreakLength && lineHasInFlowItem)
+        LayoutUnit borderMarginAndPaddingSpace = mainAxisBorderAndPaddingExtentForChild(*child) + (isHorizontalFlow() ? child->horizontalMarginExtent() : child->verticalMarginExtent());
+
+        LayoutUnit childMainAxisExtentWithMinWidthConstraint = childMainAxisExtent;
+        if (child->style().logicalMinWidth().isSpecifiedOrIntrinsic()) {
+            if (auto minWidthForChild = computeMainAxisExtentForChild(*child, MinSize, child->style().logicalMinWidth()))
+                childMainAxisExtentWithMinWidthConstraint = std::max(childMainAxisExtent, minWidthForChild.value());
+        }
+        preferredMainAxisExtentWithMinWidthConstraint += childMainAxisExtentWithMinWidthConstraint + borderMarginAndPaddingSpace;
+
+        if (isMultiline() && preferredMainAxisExtentWithMinWidthConstraint > lineBreakLength && lineHasInFlowItem)
             break;
         orderedChildren.append(child);
         lineHasInFlowItem  = true;
-        preferredMainAxisExtent += childMainAxisMarginBoxExtent;
+
+        preferredMainAxisExtent += childMainAxisExtent + borderMarginAndPaddingSpace;
         totalFlexGrow += child->style().flexGrow();
         totalWeightedFlexShrink += child->style().flexShrink() * childMainAxisExtent;
 
         LayoutUnit childMinMaxAppliedMainAxisExtent = adjustChildSizeForMinAndMax(*child, childMainAxisExtent);
-        minMaxAppliedMainAxisExtent += childMinMaxAppliedMainAxisExtent - childMainAxisExtent + childMainAxisMarginBoxExtent;
+        minMaxAppliedMainAxisExtent += childMinMaxAppliedMainAxisExtent + borderMarginAndPaddingSpace;
     }
     return true;