Let flex basis support content box (#46740)

Summary:
Pull Request resolved: #46740

X-link: facebook/yoga#1713

The flex basis length applies to the value of `box-sizing` per the spec: https://drafts.csswg.org/css-flexbox-1/#flex-basis-property

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63424590

fbshipit-source-id: f73bffd30cc7b673453a55089ecc880819d3d788

packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp

@@ -88,7 +88,7 @@ static void computeFlexBasisForChild(
   SizingMode childHeightSizingMode;
 
   const FloatOptional resolvedFlexBasis =
-      child->resolveFlexBasisPtr().resolve(mainAxisownerSize);
+      child->resolveFlexBasis(direction, mainAxis, mainAxisownerSize);
   const bool isRowStyleDimDefined =
       child->hasDefiniteLength(Dimension::Width, ownerWidth);
   const bool isColumnStyleDimDefined =

packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp

@@ -9,6 +9,7 @@
 #include <cstddef>
 #include <iostream>
 
+#include <yoga/algorithm/FlexDirection.h>
 #include <yoga/debug/AssertFatal.h>
 #include <yoga/debug/Log.h>
 #include <yoga/node/Node.h>
@@ -281,7 +282,7 @@ void Node::setPosition(
       crossAxisTrailingEdge);
 }
 
-Style::Length Node::resolveFlexBasisPtr() const {
+Style::Length Node::processFlexBasis() const {
   Style::Length flexBasis = style_.flexBasis();
   if (flexBasis.unit() != Unit::Auto && flexBasis.unit() != Unit::Undefined) {
     return flexBasis;
@@ -292,6 +293,25 @@ Style::Length Node::resolveFlexBasisPtr() const {
   return value::ofAuto();
 }
 
+FloatOptional Node::resolveFlexBasis(
+    Direction direction,
+    FlexDirection flexDirection,
+    float referenceLength) const {
+  FloatOptional value = processFlexBasis().resolve(referenceLength);
+  if (style_.boxSizing() == BoxSizing::BorderBox) {
+    return value;
+  }
+
+  Dimension dim = dimension(flexDirection);
+  FloatOptional dimensionPaddingAndBorder =
+      FloatOptional{style_.computePaddingAndBorderForDimension(
+          direction, dim, referenceLength)};
+
+  return value +
+      (dimensionPaddingAndBorder.isDefined() ? dimensionPaddingAndBorder
+                                             : FloatOptional{0.0});
+}
+
 void Node::processDimensions() {
   for (auto dim : {Dimension::Width, Dimension::Height}) {
     if (style_.maxDimension(dim).isDefined() &&

packages/react-native/ReactCommon/yoga/yoga/node/Node.h

@@ -247,7 +247,11 @@ class YG_EXPORT Node : public ::YGNode {
   void setPosition(Direction direction, float ownerWidth, float ownerHeight);
 
   // Other methods
-  Style::Length resolveFlexBasisPtr() const;
+  Style::Length processFlexBasis() const;
+  FloatOptional resolveFlexBasis(
+      Direction direction,
+      FlexDirection flexDirection,
+      float referenceLength) const;
   void processDimensions();
   Direction resolveDirection(Direction ownerDirection);
   void clearChildren();