From c1ccf42c79d4f580857cd7c8f3ed5b8ed4217b53 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Wed, 15 Nov 2023 10:44:53 -0800 Subject: [PATCH] Let containing blocks layout their absolute descendants, not parents (#41488) Summary: X-link: https://github.com/facebook/yoga/pull/1470 The way we plan on implementing `position: static` is by changing how we lay out absolutely positioned nodes. Instead of letting their direct parent lay them out we are going to let their containing block handle it. This is useful because by the time the containing block gets to this step it will already know its size, which is needed to ensure that absolute nodes can get the right value with percentage units. Additionally, it means that we can "translate" the position of the absolute nodes to be relative to their parent fairly easily, instead of some second pass that would not be possible with a different design. This change just gets the core pieces of this process going. It makes it so that containing blocks will layout out absolute descendants that they contain. We also pass in the containing block size to the owner size args for `layoutAbsoluteChild`. This new path will only happen if we have the errata turned off. If there is no positioned ancestor for a given node we just assume the root is. This is not exactly how it works on the web - there is a notion of an initial containing block - but we are not implementing that as of right now. Reviewed By: NickGerleman Differential Revision: D51182593 --- .../yoga/yoga/algorithm/CalculateLayout.cpp | 98 +++++++++++++++---- 1 file changed, 77 insertions(+), 21 deletions(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp index c1026c9adcf823..3961de11366d80 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp @@ -530,6 +530,45 @@ static void layoutAbsoluteChild( } } +static void layoutAbsoluteDescendants( + yoga::Node* const currentNode, + const MeasureMode widthMeasureMode, + const Direction currentNodeDirection, + LayoutData& layoutMarkerData, + const uint32_t currentDepth, + const uint32_t generationCount, + const float containingBlockWidth, + const float containingBlockHeight) { + for (auto child : currentNode->getChildren()) { + if (child->getStyle().display() == Display::None) { + continue; + } else if (child->getStyle().positionType() == PositionType::Absolute) { + layoutAbsoluteChild( + currentNode, + child, + containingBlockWidth, + widthMeasureMode, + containingBlockHeight, + currentNodeDirection, + layoutMarkerData, + currentDepth, + generationCount); + } else if (child->getStyle().positionType() == PositionType::Static) { + const Direction childDirection = + child->resolveDirection(currentNodeDirection); + layoutAbsoluteDescendants( + child, + widthMeasureMode, + childDirection, + layoutMarkerData, + currentDepth + 1, + generationCount, + containingBlockWidth, + containingBlockHeight); + } + } +} + static void measureNodeWithMeasureFunc( yoga::Node* const node, float availableWidth, @@ -2310,29 +2349,46 @@ static void calculateLayoutImpl( if (performLayout) { // STEP 10: SIZING AND POSITIONING ABSOLUTE CHILDREN - for (auto child : node->getChildren()) { - if (child->getStyle().display() == Display::None || - child->getStyle().positionType() != PositionType::Absolute) { - continue; + if (!node->hasErrata(Errata::PositionStaticBehavesLikeRelative)) { + // Let the containing block layout its absolute descendants. By definition + // the containing block will not be static unless we are at the root. + if (node->getStyle().positionType() != PositionType::Static || + depth == 1) { + layoutAbsoluteDescendants( + node, + isMainAxisRow ? measureModeMainDim : measureModeCrossDim, + direction, + layoutMarkerData, + depth, + generationCount, + node->getLayout().measuredDimension(Dimension::Width), + node->getLayout().measuredDimension(Dimension::Height)); } - const bool absolutePercentageAgainstPaddingEdge = - node->getConfig()->isExperimentalFeatureEnabled( - ExperimentalFeature::AbsolutePercentageAgainstPaddingEdge); + } else { + for (auto child : node->getChildren()) { + if (child->getStyle().display() == Display::None || + child->getStyle().positionType() != PositionType::Absolute) { + continue; + } + const bool absolutePercentageAgainstPaddingEdge = + node->getConfig()->isExperimentalFeatureEnabled( + ExperimentalFeature::AbsolutePercentageAgainstPaddingEdge); - layoutAbsoluteChild( - node, - child, - absolutePercentageAgainstPaddingEdge - ? node->getLayout().measuredDimension(Dimension::Width) - : availableInnerWidth, - isMainAxisRow ? measureModeMainDim : measureModeCrossDim, - absolutePercentageAgainstPaddingEdge - ? node->getLayout().measuredDimension(Dimension::Height) - : availableInnerHeight, - direction, - layoutMarkerData, - depth, - generationCount); + layoutAbsoluteChild( + node, + child, + absolutePercentageAgainstPaddingEdge + ? node->getLayout().measuredDimension(Dimension::Width) + : availableInnerWidth, + isMainAxisRow ? measureModeMainDim : measureModeCrossDim, + absolutePercentageAgainstPaddingEdge + ? node->getLayout().measuredDimension(Dimension::Height) + : availableInnerHeight, + direction, + layoutMarkerData, + depth, + generationCount); + } } // STEP 11: SETTING TRAILING POSITIONS FOR CHILDREN