Fixup margin: auto and justification behavior for overflowed containers (#1646)

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

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

Fixes https://github.com/facebook/yoga/issues/978

1. Don't allow auto margin spaces to become a negative length
2. Replicate fallback alignment behavior specified by box-alignment spec that we are using for align-content.

Reviewed By: joevilches

Differential Revision: D56091577

fbshipit-source-id: 3c02f81f969bb947cdc5c80b15faaa0b0d39c0c2

javascript/tests/generated/YGJustifyContentTest.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<<1027a837f1935ffdea54dc3c7676c35c>>
+ * @generated SignedSource<<acccc0a7a2ba5a312dae041805512503>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGJustifyContentTest.html
  */
 
@@ -1480,3 +1480,669 @@ test('justify_content_flex_end_row_reverse', () => {
     config.free();
   }
 });
+test('justify_content_overflow_row_flex_start', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_flex_end', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.FlexEnd);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(-18);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(62);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(80);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_center', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.Center);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(-9);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(31);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(71);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(71);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(31);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-9);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_space_between', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.SpaceBetween);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_space_around', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.SpaceAround);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_space_evenly', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_reverse_space_around', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setJustifyContent(Justify.SpaceAround);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_reverse_space_evenly', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.RowReverse);
+    root.setJustifyContent(Justify.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('justify_content_overflow_row_space_evenly_auto_margin', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setJustifyContent(Justify.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(102);
+    root.setHeight(102);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setMargin(Edge.Right, 'auto');
+    root_child0.setWidth(40);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(40);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(40);
+    root.insertChild(root_child2, 2);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(80);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(102);
+    expect(root.getComputedHeight()).toBe(102);
+
+    expect(root_child0.getComputedLeft()).toBe(62);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(40);
+    expect(root_child0.getComputedHeight()).toBe(102);
+
+    expect(root_child1.getComputedLeft()).toBe(22);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(40);
+    expect(root_child1.getComputedHeight()).toBe(102);
+
+    expect(root_child2.getComputedLeft()).toBe(-18);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(40);
+    expect(root_child2.getComputedHeight()).toBe(102);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});

javascript/tests/generated/YGMarginTest.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<<9da31d1df716c208b1ca30837c23f803>>
+ * @generated SignedSource<<71cadc40efa1ab29b1f7613c79c27d9e>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGMarginTest.html
  */
 
@@ -1897,3 +1897,65 @@ test('margin_auto_left_stretching_child', () => {
     config.free();
   }
 });
+test('margin_auto_overflowing_container', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setAlignItems(Align.Center);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(200);
+    root.setHeight(200);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setMargin(Edge.Bottom, 'auto');
+    root_child0.setWidth(50);
+    root_child0.setHeight(150);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(50);
+    root_child1.setHeight(150);
+    root.insertChild(root_child1, 1);
+    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(75);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(50);
+    expect(root_child0.getComputedHeight()).toBe(150);
+
+    expect(root_child1.getComputedLeft()).toBe(75);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(50);
+    expect(root_child1.getComputedHeight()).toBe(150);
+
+    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(75);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(50);
+    expect(root_child0.getComputedHeight()).toBe(150);
+
+    expect(root_child1.getComputedLeft()).toBe(75);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(50);
+    expect(root_child1.getComputedHeight()).toBe(150);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});