Fix issue where paddingStart and paddingEnd were swapped with row rev…

…erse (#41023)

Summary:
Pull Request resolved: facebook/react-native#41023

X-link: facebook/yoga#1426

Just like D50140503 where marginStart and marginEnd were not working with row reverse, paddingStart and paddingEnd are not working either with row reverse either. The solution is similar - we were checking the flex item layout starting/ending edges and not the general layout starting/ending edges. This change makes it so that we look at the proper edge according to what direction is set.

One caveat is that in the case of padding (and also border) there is a callsite that actually wants to get the flex item layout's leading/trailing padding and not the one dictated by direction. So, I made a new function to accommodate this and just swapped that callsite out.

Reviewed By: NickGerleman

Differential Revision: D50348995

fbshipit-source-id: 85717df23de7cf5f66b38d3ff28435b053a4e68e

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

@@ -1535,13 +1535,17 @@ static void calculateLayoutImpl(
       node->getInlineEndBorder(flexColumnDirection, direction), YGEdgeBottom);
 
   node->setLayoutPadding(
-      node->getFlexStartPadding(flexRowDirection, ownerWidth), startEdge);
+      node->getInlineStartPadding(flexRowDirection, direction, ownerWidth),
+      startEdge);
   node->setLayoutPadding(
-      node->getFlexEndPadding(flexRowDirection, ownerWidth), endEdge);
+      node->getInlineEndPadding(flexRowDirection, direction, ownerWidth),
+      endEdge);
   node->setLayoutPadding(
-      node->getFlexStartPadding(flexColumnDirection, ownerWidth), YGEdgeTop);
+      node->getInlineStartPadding(flexColumnDirection, direction, ownerWidth),
+      YGEdgeTop);
   node->setLayoutPadding(
-      node->getFlexEndPadding(flexColumnDirection, ownerWidth), YGEdgeBottom);
+      node->getInlineEndPadding(flexColumnDirection, direction, ownerWidth),
+      YGEdgeBottom);
 
   if (node->hasMeasureFunc()) {
     measureNodeWithMeasureFunc(

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

@@ -197,18 +197,52 @@ float Node::getFlexEndBorder(FlexDirection axis, Direction direction) const {
   return maxOrDefined(trailingBorder.value, 0.0f);
 }
 
-float Node::getFlexStartPadding(FlexDirection axis, float widthSize) const {
+float Node::getInlineStartPadding(
+    FlexDirection axis,
+    Direction direction,
+    float widthSize) const {
+  const YGEdge startEdge = getInlineStartEdgeUsingErrata(axis, direction);
+  auto leadingPadding = isRow(axis)
+      ? computeEdgeValueForRow(style_.padding(), YGEdgeStart, startEdge)
+      : computeEdgeValueForColumn(style_.padding(), startEdge);
+
+  return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f);
+}
+
+float Node::getFlexStartPadding(
+    FlexDirection axis,
+    Direction direction,
+    float widthSize) const {
+  const YGEdge leadRelativeFlexItemEdge =
+      flexStartRelativeEdge(axis, direction);
   auto leadingPadding = isRow(axis)
       ? computeEdgeValueForRow(
-            style_.padding(), YGEdgeStart, flexStartEdge(axis))
+            style_.padding(), leadRelativeFlexItemEdge, flexStartEdge(axis))
       : computeEdgeValueForColumn(style_.padding(), flexStartEdge(axis));
 
   return maxOrDefined(resolveValue(leadingPadding, widthSize).unwrap(), 0.0f);
 }
 
-float Node::getFlexEndPadding(FlexDirection axis, float widthSize) const {
+float Node::getInlineEndPadding(
+    FlexDirection axis,
+    Direction direction,
+    float widthSize) const {
+  const YGEdge endEdge = getInlineEndEdgeUsingErrata(axis, direction);
+  auto trailingPadding = isRow(axis)
+      ? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, endEdge)
+      : computeEdgeValueForColumn(style_.padding(), endEdge);
+
+  return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f);
+}
+
+float Node::getFlexEndPadding(
+    FlexDirection axis,
+    Direction direction,
+    float widthSize) const {
+  const YGEdge trailRelativeFlexItemEdge = flexEndRelativeEdge(axis, direction);
   auto trailingPadding = isRow(axis)
-      ? computeEdgeValueForRow(style_.padding(), YGEdgeEnd, flexEndEdge(axis))
+      ? computeEdgeValueForRow(
+            style_.padding(), trailRelativeFlexItemEdge, flexEndEdge(axis))
       : computeEdgeValueForColumn(style_.padding(), flexEndEdge(axis));
 
   return maxOrDefined(resolveValue(trailingPadding, widthSize).unwrap(), 0.0f);
@@ -218,31 +252,32 @@ float Node::getInlineStartPaddingAndBorder(
     FlexDirection axis,
     Direction direction,
     float widthSize) const {
-  return getFlexStartPadding(axis, widthSize) +
+  return getInlineStartPadding(axis, direction, widthSize) +
       getInlineStartBorder(axis, direction);
 }
 
 float Node::getFlexStartPaddingAndBorder(
     FlexDirection axis,
     Direction direction,
     float widthSize) const {
-  return getFlexStartPadding(axis, widthSize) +
+  return getFlexStartPadding(axis, direction, widthSize) +
       getFlexStartBorder(axis, direction);
 }
 
 float Node::getInlineEndPaddingAndBorder(
     FlexDirection axis,
     Direction direction,
     float widthSize) const {
-  return getFlexEndPadding(axis, widthSize) +
+  return getInlineEndPadding(axis, direction, widthSize) +
       getInlineEndBorder(axis, direction);
 }
 
 float Node::getFlexEndPaddingAndBorder(
     FlexDirection axis,
     Direction direction,
     float widthSize) const {
-  return getFlexEndPadding(axis, widthSize) + getFlexEndBorder(axis, direction);
+  return getFlexEndPadding(axis, direction, widthSize) +
+      getFlexEndBorder(axis, direction);
 }
 
 float Node::getMarginForAxis(FlexDirection axis, float widthSize) const {

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

@@ -216,8 +216,22 @@ class YG_EXPORT Node : public ::YGNode {
       const;
   float getInlineEndBorder(FlexDirection flexDirection, Direction direction)
       const;
-  float getFlexStartPadding(FlexDirection axis, float widthSize) const;
-  float getFlexEndPadding(FlexDirection axis, float widthSize) const;
+  float getFlexStartPadding(
+      FlexDirection axis,
+      Direction direction,
+      float widthSize) const;
+  float getInlineStartPadding(
+      FlexDirection axis,
+      Direction direction,
+      float widthSize) const;
+  float getFlexEndPadding(
+      FlexDirection axis,
+      Direction direction,
+      float widthSize) const;
+  float getInlineEndPadding(
+      FlexDirection axis,
+      Direction direction,
+      float widthSize) const;
   float getFlexStartPaddingAndBorder(
       FlexDirection axis,
       Direction direction,