From b7eb0c85a20ff01ae400df786fa238f362854cb6 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Sun, 17 Dec 2023 01:13:36 -0800 Subject: [PATCH] Fix align-content of cross-stretched container (#41964) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/41964 X-link: https://github.com/facebook/yoga/pull/1524 D52087013 (#1513) fixed some issues, including where measuring under max-content or fit-content, align-content stretch would consume the entire available cross-dimensions, instead of only sizing to definite dimension, like the spec dicates. I missed a case, where flexbox considers a container as having a definite cross-size if it is being stretched, even if it doesn't have a definite length. https://www.w3.org/TR/css-flexbox-1/#definite-sizes > 3. Once the cross size of a flex line has been determined, items in auto-sized flex containers are also considered definite for the purpose of layout; > 1. If a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite. We handle `align-items: stretch` of a flex container after cross-size determination by laying out the child under stretch-fit (previously YGMeasureModeExactly) constraint. This checks that case, and sizing the line container to specified cross-dim if we are told to stretch to it. We could probably afford to merge this a bit with later with what is currently step 9, where we end up redoing some of this same math. Reviewed By: yungsters Differential Revision: D52234980 fbshipit-source-id: 475773a352fd01f63a4b21e93a55519726dc0da7 --- .../ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp index 8b645b99710cb4..ea7a090317bf12 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp @@ -1743,8 +1743,9 @@ static void calculateLayoutImpl( float leadPerLine = 0; float currentLead = leadingPaddingAndBorderCross; - const float unclampedCrossDim = - node->styleDefinesDimension(crossAxis, crossAxisownerSize) + const float unclampedCrossDim = sizingModeCrossDim == SizingMode::StretchFit + ? availableInnerCrossDim + paddingAndBorderAxisCross + : node->styleDefinesDimension(crossAxis, crossAxisownerSize) ? yoga::resolveValue( node->getResolvedDimension(dimension(crossAxis)), crossAxisownerSize)