Fix issue where percentages were off of the border box, not padding b…

…ox (#41686)

Summary:
X-link: facebook/yoga#1485

Pull Request resolved: #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

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,

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

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