From e826d1c33695c9901e1070d7dd7231de4e79a8d4 Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Thu, 7 Dec 2023 21:25:45 -0800
Subject: [PATCH] Fix issue where percentages were off of the border box, not
 padding box (#41686)

Summary:
X-link: https://github.com/facebook/yoga/pull/1485

Pull Request resolved: https://github.com/facebook/react-native/pull/41686

The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at  `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this.

Added a test that was failing before this change as well

Reviewed By: NickGerleman

Differential Revision: D51330526

fbshipit-source-id: adc448dfb71b54f1bbed0d9d61c5553bda4b106c
---
 .../ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp   | 9 ++++++---
 .../react-native/ReactCommon/yoga/yoga/node/Node.cpp     | 5 +++++
 packages/react-native/ReactCommon/yoga/yoga/node/Node.h  | 1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
index cbccf07b9f7246..d421db548746de 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
@@ -25,7 +25,8 @@ static void justifyAbsoluteChild(
     case Justify::SpaceBetween:
       child->setLayoutPosition(
           child->getFlexStartMargin(mainAxis, direction, containingBlockWidth) +
-              parent->getFlexStartBorder(mainAxis, direction),
+              parent->getLayout().border(flexStartEdge(mainAxis)) +
+              parent->getLayout().padding(flexStartEdge(mainAxis)),
           flexStartEdge(mainAxis));
       break;
     case Justify::FlexEnd:
@@ -458,8 +459,10 @@ void layoutAbsoluteDescendants(
           containingNode,
           currentNode,
           child,
-          containingNode->getLayout().measuredDimension(Dimension::Width),
-          containingNode->getLayout().measuredDimension(Dimension::Height),
+          containingNode->getLayout().measuredDimension(Dimension::Width) -
+              containingNode->getBorderForAxis(FlexDirection::Row),
+          containingNode->getLayout().measuredDimension(Dimension::Height) -
+              containingNode->getBorderForAxis(FlexDirection::Column),
           widthSizingMode,
           currentNodeDirection,
           layoutMarkerData,
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
index f26a588e174cc7..36eefbb52518dd 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
@@ -377,6 +377,11 @@ float Node::getFlexEndPaddingAndBorder(
       getFlexEndBorder(axis, direction);
 }
 
+float Node::getBorderForAxis(FlexDirection axis) const {
+  return getInlineStartBorder(axis, Direction::LTR) +
+      getInlineEndBorder(axis, Direction::LTR);
+}
+
 float Node::getMarginForAxis(FlexDirection axis, float widthSize) const {
   // The total margin for a given axis does not depend on the direction
   // so hardcoding LTR here to avoid piping direction to this function
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
index aa60b3d8303a70..bbde5eac362d0f 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
@@ -287,6 +287,7 @@ class YG_EXPORT Node : public ::YGNode {
       FlexDirection axis,
       Direction direction,
       float widthSize) const;
+  float getBorderForAxis(FlexDirection axis) const;
   float getMarginForAxis(FlexDirection axis, float widthSize) const;
   float getGapForAxis(FlexDirection axis) const;
   // Setters