Use flexStart functions instead of inlineStart ones in cases where se…

…tting position (#1464)

Summary:

X-link: facebook/react-native#41413

In all cases where we had to set a position we define what edge to set it on. All calls here set the flex edge, not the inline one. That makes sense because the flex start edge is most important when applying some of the key parts of the flexbox algorithm, which is in charge of deciding the position for the most part (we resolve flex direction to RowReverse/Row when in RTL). While all the inline stuff is mainly used to set the sides for specific layout values like margin, border, and padding.

I also added a test case here for 2 of the callsites changed, but the rest either fail for different reasons or get overriden due to the remaining logic. Still I think we should be consistent.

Reviewed By: NickGerleman

Differential Revision: D51187444

gentest/fixtures/YGFlexDirectionTest.html

@@ -400,3 +400,11 @@
     <div style="width: 10px;"></div>
   </div>
 </div>
+
+<div id="flex_direction_row_reverse_absolute_with_margin" style="height: 100px; width: 100px;">
+  <div style="height: 100px; width: 100px; border-width: 4px 6px 8px 10px; flex-direction: row-reverse;">
+    <div style="width: 10px;"></div>
+    <div style="width: 10px; margin: 5px 7px 9px 11px; position: absolute;"></div>
+    <div style="width: 10px;"></div>
+  </div>
+</div>

java/tests/com/facebook/yoga/YGFlexDirectionTest.java

@@ -4463,6 +4463,102 @@ public void test_flex_direction_row_reverse_inner_padding_end() {
     assertEquals(100f, root_child0_child2.getLayoutHeight(), 0.0f);
   }
 
+  @Test
+  public void test_flex_direction_row_reverse_absolute_with_margin() {
+    YogaConfig config = YogaConfigFactory.create();
+    config.setExperimentalFeatureEnabled(YogaExperimentalFeature.ABSOLUTE_PERCENTAGE_AGAINST_PADDING_EDGE, true);
+
+    final YogaNode root = createNode(config);
+    root.setPositionType(YogaPositionType.ABSOLUTE);
+    root.setWidth(100f);
+    root.setHeight(100f);
+
+    final YogaNode root_child0 = createNode(config);
+    root_child0.setFlexDirection(YogaFlexDirection.ROW_REVERSE);
+    root_child0.setPositionType(YogaPositionType.RELATIVE);
+    root_child0.setBorder(YogaEdge.LEFT, 10f);
+    root_child0.setBorder(YogaEdge.TOP, 4f);
+    root_child0.setBorder(YogaEdge.RIGHT, 6f);
+    root_child0.setBorder(YogaEdge.BOTTOM, 8f);
+    root_child0.setWidth(100f);
+    root_child0.setHeight(100f);
+    root.addChildAt(root_child0, 0);
+
+    final YogaNode root_child0_child0 = createNode(config);
+    root_child0_child0.setPositionType(YogaPositionType.RELATIVE);
+    root_child0_child0.setWidth(10f);
+    root_child0.addChildAt(root_child0_child0, 0);
+
+    final YogaNode root_child0_child1 = createNode(config);
+    root_child0_child1.setPositionType(YogaPositionType.ABSOLUTE);
+    root_child0_child1.setMargin(YogaEdge.LEFT, 11f);
+    root_child0_child1.setMargin(YogaEdge.TOP, 5f);
+    root_child0_child1.setMargin(YogaEdge.RIGHT, 7f);
+    root_child0_child1.setMargin(YogaEdge.BOTTOM, 9f);
+    root_child0_child1.setWidth(10f);
+    root_child0.addChildAt(root_child0_child1, 1);
+
+    final YogaNode root_child0_child2 = createNode(config);
+    root_child0_child2.setPositionType(YogaPositionType.RELATIVE);
+    root_child0_child2.setWidth(10f);
+    root_child0.addChildAt(root_child0_child2, 2);
+    root.setDirection(YogaDirection.LTR);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(100f, root.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(84f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(4f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(88f, root_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(77f, root_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(9f, root_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(0f, root_child0_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(74f, root_child0_child2.getLayoutX(), 0.0f);
+    assertEquals(4f, root_child0_child2.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child2.getLayoutWidth(), 0.0f);
+    assertEquals(88f, root_child0_child2.getLayoutHeight(), 0.0f);
+
+    root.setDirection(YogaDirection.RTL);
+    root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
+
+    assertEquals(0f, root.getLayoutX(), 0.0f);
+    assertEquals(0f, root.getLayoutY(), 0.0f);
+    assertEquals(100f, root.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root.getLayoutHeight(), 0.0f);
+
+    assertEquals(0f, root_child0.getLayoutX(), 0.0f);
+    assertEquals(0f, root_child0.getLayoutY(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
+    assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(10f, root_child0_child0.getLayoutX(), 0.0f);
+    assertEquals(4f, root_child0_child0.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child0.getLayoutWidth(), 0.0f);
+    assertEquals(88f, root_child0_child0.getLayoutHeight(), 0.0f);
+
+    assertEquals(21f, root_child0_child1.getLayoutX(), 0.0f);
+    assertEquals(9f, root_child0_child1.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child1.getLayoutWidth(), 0.0f);
+    assertEquals(0f, root_child0_child1.getLayoutHeight(), 0.0f);
+
+    assertEquals(20f, root_child0_child2.getLayoutX(), 0.0f);
+    assertEquals(4f, root_child0_child2.getLayoutY(), 0.0f);
+    assertEquals(10f, root_child0_child2.getLayoutWidth(), 0.0f);
+    assertEquals(88f, root_child0_child2.getLayoutHeight(), 0.0f);
+  }
+
   private YogaNode createNode(YogaConfig config) {
     return mNodeFactory.create(config);
   }

javascript/tests/generated/YGFlexDirectionTest.test.ts

@@ -4785,3 +4785,105 @@ test('flex_direction_row_reverse_inner_padding_end', () => {
     config.free();
   }
 });
+test('flex_direction_row_reverse_absolute_with_margin', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(100);
+    root.setHeight(100);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.RowReverse);
+    root_child0.setPositionType(PositionType.Relative);
+    root_child0.setBorder(Edge.Left, 10);
+    root_child0.setBorder(Edge.Top, 4);
+    root_child0.setBorder(Edge.Right, 6);
+    root_child0.setBorder(Edge.Bottom, 8);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setPositionType(PositionType.Relative);
+    root_child0_child0.setWidth(10);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child1 = Yoga.Node.create(config);
+    root_child0_child1.setPositionType(PositionType.Absolute);
+    root_child0_child1.setMargin(Edge.Left, 11);
+    root_child0_child1.setMargin(Edge.Top, 5);
+    root_child0_child1.setMargin(Edge.Right, 7);
+    root_child0_child1.setMargin(Edge.Bottom, 9);
+    root_child0_child1.setWidth(10);
+    root_child0.insertChild(root_child0_child1, 1);
+
+    const root_child0_child2 = Yoga.Node.create(config);
+    root_child0_child2.setPositionType(PositionType.Relative);
+    root_child0_child2.setWidth(10);
+    root_child0.insertChild(root_child0_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(84);
+    expect(root_child0_child0.getComputedTop()).toBe(4);
+    expect(root_child0_child0.getComputedWidth()).toBe(10);
+    expect(root_child0_child0.getComputedHeight()).toBe(88);
+
+    expect(root_child0_child1.getComputedLeft()).toBe(77);
+    expect(root_child0_child1.getComputedTop()).toBe(9);
+    expect(root_child0_child1.getComputedWidth()).toBe(10);
+    expect(root_child0_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child0_child2.getComputedLeft()).toBe(74);
+    expect(root_child0_child2.getComputedTop()).toBe(4);
+    expect(root_child0_child2.getComputedWidth()).toBe(10);
+    expect(root_child0_child2.getComputedHeight()).toBe(88);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(100);
+    expect(root.getComputedHeight()).toBe(100);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(10);
+    expect(root_child0_child0.getComputedTop()).toBe(4);
+    expect(root_child0_child0.getComputedWidth()).toBe(10);
+    expect(root_child0_child0.getComputedHeight()).toBe(88);
+
+    expect(root_child0_child1.getComputedLeft()).toBe(21);
+    expect(root_child0_child1.getComputedTop()).toBe(9);
+    expect(root_child0_child1.getComputedWidth()).toBe(10);
+    expect(root_child0_child1.getComputedHeight()).toBe(0);
+
+    expect(root_child0_child2.getComputedLeft()).toBe(20);
+    expect(root_child0_child2.getComputedTop()).toBe(4);
+    expect(root_child0_child2.getComputedWidth()).toBe(10);
+    expect(root_child0_child2.getComputedHeight()).toBe(88);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});

tests/generated/YGFlexDirectionTest.cpp

@@ -4504,3 +4504,100 @@ TEST(YogaTest, flex_direction_row_reverse_inner_padding_end) {
 
   YGConfigFree(config);
 }
+
+TEST(YogaTest, flex_direction_row_reverse_absolute_with_margin) {
+  const YGConfigRef config = YGConfigNew();
+  YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeatureAbsolutePercentageAgainstPaddingEdge, true);
+
+  const YGNodeRef root = YGNodeNewWithConfig(config);
+  YGNodeStyleSetPositionType(root, YGPositionTypeAbsolute);
+  YGNodeStyleSetWidth(root, 100);
+  YGNodeStyleSetHeight(root, 100);
+
+  const YGNodeRef root_child0 = YGNodeNewWithConfig(config);
+  YGNodeStyleSetFlexDirection(root_child0, YGFlexDirectionRowReverse);
+  YGNodeStyleSetPositionType(root_child0, YGPositionTypeRelative);
+  YGNodeStyleSetBorder(root_child0, YGEdgeLeft, 10);
+  YGNodeStyleSetBorder(root_child0, YGEdgeTop, 4);
+  YGNodeStyleSetBorder(root_child0, YGEdgeRight, 6);
+  YGNodeStyleSetBorder(root_child0, YGEdgeBottom, 8);
+  YGNodeStyleSetWidth(root_child0, 100);
+  YGNodeStyleSetHeight(root_child0, 100);
+  YGNodeInsertChild(root, root_child0, 0);
+
+  const YGNodeRef root_child0_child0 = YGNodeNewWithConfig(config);
+  YGNodeStyleSetPositionType(root_child0_child0, YGPositionTypeRelative);
+  YGNodeStyleSetWidth(root_child0_child0, 10);
+  YGNodeInsertChild(root_child0, root_child0_child0, 0);
+
+  const YGNodeRef root_child0_child1 = YGNodeNewWithConfig(config);
+  YGNodeStyleSetPositionType(root_child0_child1, YGPositionTypeAbsolute);
+  YGNodeStyleSetMargin(root_child0_child1, YGEdgeLeft, 11);
+  YGNodeStyleSetMargin(root_child0_child1, YGEdgeTop, 5);
+  YGNodeStyleSetMargin(root_child0_child1, YGEdgeRight, 7);
+  YGNodeStyleSetMargin(root_child0_child1, YGEdgeBottom, 9);
+  YGNodeStyleSetWidth(root_child0_child1, 10);
+  YGNodeInsertChild(root_child0, root_child0_child1, 1);
+
+  const YGNodeRef root_child0_child2 = YGNodeNewWithConfig(config);
+  YGNodeStyleSetPositionType(root_child0_child2, YGPositionTypeRelative);
+  YGNodeStyleSetWidth(root_child0_child2, 10);
+  YGNodeInsertChild(root_child0, root_child0_child2, 2);
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0));
+
+  ASSERT_FLOAT_EQ(84, YGNodeLayoutGetLeft(root_child0_child0));
+  ASSERT_FLOAT_EQ(4, YGNodeLayoutGetTop(root_child0_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child0));
+  ASSERT_FLOAT_EQ(88, YGNodeLayoutGetHeight(root_child0_child0));
+
+  ASSERT_FLOAT_EQ(77, YGNodeLayoutGetLeft(root_child0_child1));
+  ASSERT_FLOAT_EQ(9, YGNodeLayoutGetTop(root_child0_child1));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child1));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetHeight(root_child0_child1));
+
+  ASSERT_FLOAT_EQ(74, YGNodeLayoutGetLeft(root_child0_child2));
+  ASSERT_FLOAT_EQ(4, YGNodeLayoutGetTop(root_child0_child2));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child2));
+  ASSERT_FLOAT_EQ(88, YGNodeLayoutGetHeight(root_child0_child2));
+
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionRTL);
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root));
+
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root_child0));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root_child0));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetWidth(root_child0));
+  ASSERT_FLOAT_EQ(100, YGNodeLayoutGetHeight(root_child0));
+
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetLeft(root_child0_child0));
+  ASSERT_FLOAT_EQ(4, YGNodeLayoutGetTop(root_child0_child0));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child0));
+  ASSERT_FLOAT_EQ(88, YGNodeLayoutGetHeight(root_child0_child0));
+
+  ASSERT_FLOAT_EQ(21, YGNodeLayoutGetLeft(root_child0_child1));
+  ASSERT_FLOAT_EQ(9, YGNodeLayoutGetTop(root_child0_child1));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child1));
+  ASSERT_FLOAT_EQ(0, YGNodeLayoutGetHeight(root_child0_child1));
+
+  ASSERT_FLOAT_EQ(20, YGNodeLayoutGetLeft(root_child0_child2));
+  ASSERT_FLOAT_EQ(4, YGNodeLayoutGetTop(root_child0_child2));
+  ASSERT_FLOAT_EQ(10, YGNodeLayoutGetWidth(root_child0_child2));
+  ASSERT_FLOAT_EQ(88, YGNodeLayoutGetHeight(root_child0_child2));
+
+  YGNodeFreeRecursive(root);
+
+  YGConfigFree(config);
+}