Fix bug where absolute nodes were not insetted correctly in certain cases (#1593)

Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1593 X-link: https://github.com/facebook/react-native/pull/43417 There was a bug where we did not position absolute nodes correctly if the static node had a different main/cross axis from the containing node. This fixes that. The change is somewhat complicated unfortunately but I tried to add sufficient comments to explain what is happening Reviewed By: NickGerleman Differential Revision: D54703955 fbshipit-source-id: 096c643f61d4f9bb3ee6278d675ebd69b57350d7
2024-03-12 11:08:43 -07:00
parent d591885e29
commit 543f36d5b4
6 changed files with 1499 additions and 64 deletions
--- a/javascript/tests/generated/YGStaticPositionTest.test.ts
+++ b/javascript/tests/generated/YGStaticPositionTest.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<<6040773dbe8767011fe186f20ead2b56>>
+ * @generated SignedSource<<2f8b96b22567d9b50c880b375cf7de15>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGStaticPositionTest.html
 */

@@ -196,6 +196,477 @@ test('static_position_absolute_child_insets_relative_to_positioned_ancestor', ()
    config.free();
  }
 });
+test('static_position_absolute_child_insets_relative_to_positioned_ancestor_row_reverse', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.RowReverse);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Left, 50);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(50);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_row_reverse', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.RowReverse);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setFlexDirection(FlexDirection.ColumnReverse);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Left, 50);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(50);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('static_position_absolute_child_insets_relative_to_positioned_ancestor_row', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.Row);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setPosition(Edge.Right, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_row', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.Row);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setFlexDirection(FlexDirection.ColumnReverse);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setPosition(Edge.Right, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(0);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('static_position_absolute_child_insets_relative_to_positioned_ancestor_column_reverse', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.ColumnReverse);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setPosition(Edge.Right, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(100);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(100);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('column_reverse_static_position_absolute_child_insets_relative_to_positioned_ancestor_column_reverse', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setPositionType(PositionType.Absolute);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexDirection(FlexDirection.ColumnReverse);
+    root_child0.setWidth(200);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0.setFlexDirection(FlexDirection.ColumnReverse);
+    root_child0_child0.setPositionType(PositionType.Static);
+    root_child0_child0.setWidth(100);
+    root_child0_child0.setHeight(100);
+    root_child0.insertChild(root_child0_child0, 0);
+
+    const root_child0_child0_child0 = Yoga.Node.create(config);
+    root_child0_child0_child0.setPositionType(PositionType.Absolute);
+    root_child0_child0_child0.setPosition(Edge.Top, 50);
+    root_child0_child0_child0.setPosition(Edge.Right, 50);
+    root_child0_child0_child0.setWidth(50);
+    root_child0_child0_child0.setHeight(50);
+    root_child0_child0.insertChild(root_child0_child0_child0, 0);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0.getComputedTop()).toBe(100);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(200);
+    expect(root.getComputedHeight()).toBe(200);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(200);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child0_child0.getComputedLeft()).toBe(100);
+    expect(root_child0_child0.getComputedTop()).toBe(100);
+    expect(root_child0_child0.getComputedWidth()).toBe(100);
+    expect(root_child0_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child0_child0_child0.getComputedLeft()).toBe(0);
+    expect(root_child0_child0_child0.getComputedTop()).toBe(-50);
+    expect(root_child0_child0_child0.getComputedWidth()).toBe(50);
+    expect(root_child0_child0_child0.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
 test('static_position_absolute_child_insets_relative_to_positioned_ancestor_deep', () => {
  const config = Yoga.Config.create();
  let root;