Expand flex-grow support

https://bugs.webkit.org/show_bug.cgi?id=240898

Reviewed by Antti Koivisto.

This patch add support for flex-grow. This property defines how flex items take over the available space.

* Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp:
(WebCore::Layout::FlexFormattingContext::computeLogicalWidthForFlexItems):
(WebCore::Layout::FlexFormattingContext::layoutInFlowContentForIntegration):
* Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.h:

Canonical link: https://commits.webkit.org/250960@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294804 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.cpp

@@ -204,44 +204,89 @@ void FlexFormattingContext::setFlexItemsGeometry(const LogicalFlexItems& logical
     }
 }
 
-void FlexFormattingContext::layoutInFlowContentForIntegration(const ConstraintsForInFlowContent& constraints)
+void FlexFormattingContext::computeLogicalWidthForFlexItems(LogicalFlexItems& logicalFlexItemList, const ConstraintsForFlexContent& flexConstraints)
 {
     auto& formattingState = this->formattingState();
-    auto logicalFlexItemList = convertFlexItemsToLogicalSpace();
+
+    auto flexDirection = root().style().flexDirection();
+    auto flexDirectionIsInlineAxis = flexDirection == FlexDirection::Row || flexDirection == FlexDirection::RowReverse;
+    auto availableSpace = std::optional<LayoutUnit> { flexDirectionIsInlineAxis ? std::make_optional(flexConstraints.horizontal().logicalWidth) : flexConstraints.availableVerticalSpace() };
 
     auto totalGrowth = 0.f;
-    auto totalFixedSpace = LayoutUnit { };
+    auto totalFlexibleSpace = *availableSpace;
+    auto flexGrowBase = 0.f;
+    Vector<size_t> flexingItems;
+
+    auto computeTotalGrowthAndFlexibleSpace = [&] {
+        // Collect flex items with non-zero flex-grow value. flex-grow: 0 (initial) flex items
+        // don't participate in available space distribution.
+        for (size_t index = 0; index < logicalFlexItemList.size(); ++index) {
+            auto& logicalFlexItem = logicalFlexItemList[index];
+            if (auto flexGrow = logicalFlexItem.layoutBox->style().flexGrow()) {
+                flexingItems.append(index);
+                totalGrowth += flexGrow;
+            } else
+                totalFlexibleSpace -= logicalFlexItem.rect.width();
+        }
+        if (totalGrowth)
+            flexGrowBase = totalFlexibleSpace / totalGrowth;
+    };
+    computeTotalGrowthAndFlexibleSpace();
+
+    auto totalLogicalWidth = [&] {
+        // This is where we compute how much space the flexing boxes take up if we just
+        // let them flex by their flex-grow value. Note that we can't size them below their minimum content width.
+        // Such flex items are removed from the final overflow distribution.
+        auto accumulatedWidth = LayoutUnit { };
+        for (auto flexItemIndex : flexingItems) {
+            auto& flexItem = logicalFlexItemList[flexItemIndex];
+
+            auto flexGrow = flexItem.layoutBox->style().flexGrow();
+            auto flexedSize = flexGrow * flexGrowBase;
+            auto minimumSize = formattingState.intrinsicWidthConstraintsForBox(*flexItem.layoutBox)->minimum;
+            if (minimumSize >= flexedSize) {
+                accumulatedWidth += minimumSize;
+                totalGrowth -= flexGrow;
+            } else
+                accumulatedWidth += flexedSize;
+        }
+        return accumulatedWidth;
+    }();
+    auto overflowWidth = totalLogicalWidth - totalFlexibleSpace;
+    ASSERT(overflowWidth >= 0);
+
+    auto computeLogicalWidth = [&] {
+        // Adjust the total grow width by the overflow value (shrink) except when min content with disagrees.
+        for (auto flexItemIndex : flexingItems) {
+            auto& flexItem = logicalFlexItemList[flexItemIndex];
+
+            auto flexGrow = flexItem.layoutBox->style().flexGrow();
+            auto flexedSize = flexGrow * flexGrowBase;
+            auto minimumSize = formattingState.intrinsicWidthConstraintsForBox(*flexItem.layoutBox)->minimum;
+            if (minimumSize >= flexedSize)
+                flexItem.rect.setWidth(minimumSize);
+            else {
+                auto distributedOverflow = overflowWidth / totalGrowth * flexGrow;
+                flexItem.rect.setWidth(std::max(minimumSize, LayoutUnit { flexedSize - distributedOverflow }));
+            }
+        }
+    };
+    computeLogicalWidth();
+}
 
-    for (auto& logicalFlexItem : logicalFlexItemList) {
-        totalGrowth += logicalFlexItem.layoutBox->style().flexGrow();
-        totalFixedSpace += formattingState.intrinsicWidthConstraintsForBox(*logicalFlexItem.layoutBox)->minimum;
-    }
+void FlexFormattingContext::layoutInFlowContentForIntegration(const ConstraintsForInFlowContent& constraints)
+{
+    auto logicalFlexItemList = convertFlexItemsToLogicalSpace();
 
     auto flexConstraints = downcast<ConstraintsForFlexContent>(constraints);
     auto logicalLeft = LayoutUnit { };
     auto logicalTop = LayoutUnit { };
-    auto flexDirection = root().style().flexDirection();
-    auto flexDirectionIsInlineAxis = flexDirection == FlexDirection::Row || flexDirection == FlexDirection::RowReverse;
-    auto availableSpace = std::optional<LayoutUnit> { flexDirectionIsInlineAxis ? std::make_optional(flexConstraints.horizontal().logicalWidth) : flexConstraints.availableVerticalSpace() };
-    auto flexibleSpace = availableSpace.value_or(0_lu) - totalFixedSpace;
+
+    computeLogicalWidthForFlexItems(logicalFlexItemList, flexConstraints);
 
     for (auto& logicalFlexItem : logicalFlexItemList) {
         logicalFlexItem.rect.setTopLeft({ logicalLeft, logicalTop });
         logicalLeft = logicalFlexItem.rect.right();
-        auto growFlexItemIfApplicable = [&] {
-            if (flexibleSpace <= 0)
-                return;
-            auto grow = logicalFlexItem.layoutBox->style().flexGrow();
-            if (!grow)
-                return;
-            // This value specifies the flex grow factor, which determines how much the flex item will grow relative to the
-            // rest of the flex items in the flex container when positive free space is distributed.
-            ASSERT(availableSpace.has_value());
-            // FIXME: This is still slighly incorrect.
-            logicalFlexItem.rect.setWidth(LayoutUnit { formattingState.intrinsicWidthConstraintsForBox(*logicalFlexItem.layoutBox)->minimum + (flexibleSpace * grow / totalGrowth) });
-            // FIXME: constrain logical width on min width.
-        };
-        growFlexItemIfApplicable();
     }
     setFlexItemsGeometry(logicalFlexItemList, flexConstraints);
 }

Source/WebCore/layout/formattingContexts/flex/FlexFormattingContext.h

@@ -65,6 +65,7 @@ class FlexFormattingContext final : public FormattingContext {
     using LogicalFlexItems = Vector<LogicalFlexItem>;
     LogicalFlexItems convertFlexItemsToLogicalSpace();
     void setFlexItemsGeometry(const LogicalFlexItems&, const ConstraintsForFlexContent&);
+    void computeLogicalWidthForFlexItems(LogicalFlexItems&, const ConstraintsForFlexContent&);
 
     const FlexFormattingState& formattingState() const { return downcast<FlexFormattingState>(FormattingContext::formattingState()); }
     FlexFormattingState& formattingState() { return downcast<FlexFormattingState>(FormattingContext::formattingState()); }