Skip to content
Permalink
Browse files
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
  • Loading branch information
alanbujtas committed May 25, 2022
1 parent 37942e7 commit f54d6f2a7a8155383cf2e14b985677a37d399311
Showing 2 changed files with 71 additions and 25 deletions.
@@ -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);
}
@@ -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()); }

0 comments on commit f54d6f2

Please sign in to comment.