Fix handling 'auto' checks in absolute layout (#1689)

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

Regarding [issue](https://github.com/facebook/react-native/issues/45817) with incorrect layout when `left` is set to `auto`. This PR introduces handling `auto` whenever inline or flex position is checked to be defined and it fixes above issue.

Changelog:
[General][Fixed] - Fix handling 'auto' checks in absolute layout

## Tests:
 I have run the provided unit tests and everything passes.

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

Reviewed By: cipolleschi

Differential Revision: D61737876

Pulled By: NickGerleman

fbshipit-source-id: 531199a91c5e122b930b49725ea567cbb1d592ce

javascript/src/Node.cpp

@@ -87,6 +87,10 @@ void Node::setPositionPercent(int edge, double position) {
   YGNodeStyleSetPositionPercent(m_node, static_cast<YGEdge>(edge), position);
 }
 
+void Node::setPositionAuto(int edge) {
+  YGNodeStyleSetPositionAuto(m_node, static_cast<YGEdge>(edge));
+}
+
 void Node::setAlignContent(int alignContent) {
   YGNodeStyleSetAlignContent(m_node, static_cast<YGAlign>(alignContent));
 }

javascript/src/Node.h

@@ -76,6 +76,7 @@ class Node {
   void setPositionType(int positionType);
   void setPosition(int edge, double position);
   void setPositionPercent(int edge, double position);
+  void setPositionAuto(int edge);
 
   void setAlignContent(int alignContent);
   void setAlignItems(int alignItems);

javascript/src/embind.cpp

@@ -70,6 +70,7 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("setPositionType", &Node::setPositionType)
       .function("setPosition", &Node::setPosition)
       .function("setPositionPercent", &Node::setPositionPercent)
+      .function("setPositionAuto", &Node::setPositionAuto)
 
       .function("setAlignContent", &Node::setAlignContent)
       .function("setAlignItems", &Node::setAlignItems)

javascript/src/wrapAssembly.ts

@@ -168,6 +168,7 @@ export type Node = {
   setPosition(edge: Edge, position: number | `${number}%` | undefined): void;
   setPositionPercent(edge: Edge, position: number | undefined): void;
   setPositionType(positionType: PositionType): void;
+  setPositionAuto(edge: Edge): void;
   setWidth(width: number | 'auto' | `${number}%` | undefined): void;
   setWidthAuto(): void;
   setWidthPercent(width: number | undefined): void;

javascript/tests/generated/YGAbsolutePositionTest.test.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<133e2d77cd6267d4bfb0fe992d437fd1>>
+ * @generated SignedSource<<3ac965030750351f007587f3ae1dec10>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGAbsolutePositionTest.html
  */
 
@@ -75,6 +75,150 @@ test('absolute_layout_width_height_start_top', () => {
     config.free();
   }
 });
+test('absolute_layout_width_height_left_auto_right', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  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.setPositionType(PositionType.Absolute);
+    root_child0.setPositionAuto(Edge.Left);
+    root_child0.setPosition(Edge.Right, 10);
+    root_child0.setWidth(10);
+    root_child0.setHeight(10);
+    root.insertChild(root_child0, 0);
+    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(80);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+
+    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(80);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('absolute_layout_width_height_left_right_auto', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  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.setPositionType(PositionType.Absolute);
+    root_child0.setPosition(Edge.Left, 10);
+    root_child0.setPositionAuto(Edge.Right);
+    root_child0.setWidth(10);
+    root_child0.setHeight(10);
+    root.insertChild(root_child0, 0);
+    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(10);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+
+    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(10);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('absolute_layout_width_height_left_auto_right_auto', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  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.setPositionType(PositionType.Absolute);
+    root_child0.setPositionAuto(Edge.Left);
+    root_child0.setPositionAuto(Edge.Right);
+    root_child0.setWidth(10);
+    root_child0.setHeight(10);
+    root.insertChild(root_child0, 0);
+    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(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+
+    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(90);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(10);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
 test('absolute_layout_width_height_end_bottom', () => {
   const config = Yoga.Config.create();
   let root;