Fix issue where absolute children of row-reverse containers would inset on the wrong side (#1446)

Summary:
X-link: https://github.com/facebook/react-native/pull/41293

Pull Request resolved: https://github.com/facebook/yoga/pull/1446

NickGerleman pointed out that my recent changes to fix the slew of row-reverse problems in Yoga actually ended up regressing some parts. Specifically, absolute children of row-reverse containers would have their insets set to the wrong side. So if you set left: 10 it would apply it to the right.

Turns out, in `layoutAbsoluteChild` there were cases where we were applying inlineStart/End values to the flexStart/End edge, which can never be right. So I changed the values to also be flexStart/End as the fix here.

Reviewed By: NickGerleman

Differential Revision: D50945475

fbshipit-source-id: 290de06dcc04e8e644a3a32c127af12fdabb2f75

gentest/fixtures/YGFlexDirectionTest.html

@@ -208,3 +208,195 @@
     <div style="width: 10px;"></div>
   </div>
 </div>
+
+<div id="flex_direction_row_reverse_inner_pos_left" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; left: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_pos_right" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; right: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_pos_top" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; top: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_pos_bottom" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; bottom: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_pos_start" data-disabled="true" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; start: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_pos_end" data-disabled="true" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; end: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_margin_left" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-left: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_margin_right" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-right: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_margin_top" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-top: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_margin_bottom" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-bottom: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_marign_start" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-start: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_margin_end" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; margin-end: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_border_left" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-left: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_border_right" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-right: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_border_top" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-top: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_border_bottom" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-bottom: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-start: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; border-end: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_padding_left" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-left: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_padding_right" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-right: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_padding_top" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-top: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_col_reverse_inner_padding_bottom" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: column-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-bottom: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_padding_start" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-start: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>
+
+<div id="flex_direction_row_reverse_inner_padding_end" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
+    <div style="width: 10px; height: 10px; position: absolute; padding-end: 10px"></div>
+    <div style="width: 10px;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>