Fix sizing and alignment issues with multi-line containers (#1513)

Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1513 X-link: https://github.com/facebook/react-native/pull/41916 Fixes https://github.com/facebook/yoga/issues/1300 Fixes https://github.com/facebook/yoga/issues/1008 This fixes a smattering of issues related to both sizing and aligment of multi-line-containers: 1. We were previously incorrectly bounding the size of each flex line to the min/max of the entire container. 2. Per-line leads were sometimes incorrectly contributing to alignment within the line 3. The cross dim size used for multi-line alignment is not correct, or correctly clamped. If the available size comes from a max constraint, that was incorrectly used instead of a definite size, or size of content. Leads were entirely skipped for min constraint. Need to test how breaking this is, to see if it might need to go behind an errata. See related PRs: 1. https://github.com/facebook/yoga/pull/1491 2. https://github.com/facebook/yoga/pull/1493 3. https://github.com/facebook/yoga/pull/1013 Changelog: [General][Fixed] - Fix Yoga sizing and alignment issues with multi-line containers Reviewed By: joevilches Differential Revision: D52087013 fbshipit-source-id: 8d95ad17e58c1fec1cceab9756413d0b3bd4cd8f
2023-12-16 01:12:30 -08:00
parent baf95897cb
commit 464d1668ba
9 changed files with 2815 additions and 71 deletions
--- a/javascript/tests/generated/YGAlignContentTest.test.ts
+++ b/javascript/tests/generated/YGAlignContentTest.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<<7f941503c4fed45ffd7c07f713d691bb>>
+ * @generated SignedSource<<90f151e3c55d956805a9f44153f87ad0>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGAlignContentTest.html
 */

@@ -4217,3 +4217,717 @@ test('align_content_stretch_is_not_overriding_align_items', () => {
    config.free();
  }
 });
+test('align_content_stretch_with_min_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMinHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(250);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(250);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_with_max_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMaxHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_stretch_with_max_cross_axis_and_border_padding', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.Stretch);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setPadding(Edge.Left, 2);
+    root.setPadding(Edge.Top, 2);
+    root.setPadding(Edge.Right, 2);
+    root.setPadding(Edge.Bottom, 2);
+    root.setBorder(Edge.Left, 5);
+    root.setBorder(Edge.Top, 5);
+    root.setBorder(Edge.Right, 5);
+    root.setBorder(Edge.Bottom, 5);
+    root.setWidth(500);
+    root.setMaxHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(414);
+
+    expect(root_child0.getComputedLeft()).toBe(7);
+    expect(root_child0.getComputedTop()).toBe(7);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(7);
+    expect(root_child1.getComputedTop()).toBe(207);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(414);
+
+    expect(root_child0.getComputedLeft()).toBe(93);
+    expect(root_child0.getComputedTop()).toBe(7);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(93);
+    expect(root_child1.getComputedTop()).toBe(207);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_evenly_with_min_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMinHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(33);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(267);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(33);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(267);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_evenly_with_max_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMaxHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_evenly_with_max_cross_axis_violated', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMaxHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(-50);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(-50);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_evenly_with_max_cross_axis_violated_padding_and_border', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceEvenly);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setPadding(Edge.Left, 2);
+    root.setPadding(Edge.Top, 2);
+    root.setPadding(Edge.Right, 2);
+    root.setPadding(Edge.Bottom, 2);
+    root.setBorder(Edge.Left, 5);
+    root.setBorder(Edge.Top, 5);
+    root.setBorder(Edge.Right, 5);
+    root.setBorder(Edge.Bottom, 5);
+    root.setWidth(500);
+    root.setMaxHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(7);
+    expect(root_child0.getComputedTop()).toBe(-50);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(7);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(93);
+    expect(root_child0.getComputedTop()).toBe(-50);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(93);
+    expect(root_child1.getComputedTop()).toBe(150);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_around_and_align_items_flex_end_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceAround);
+    root.setAlignItems(Align.FlexEnd);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    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(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(88);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(88);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_around_and_align_items_center_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceAround);
+    root.setAlignItems(Align.Center);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    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(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(63);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(63);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('align_content_space_around_and_align_items_flex_start_with_flex_wrap', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setAlignContent(Align.SpaceAround);
+    root.setAlignItems(Align.FlexStart);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setHeight(300);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(150);
+    root_child0.setHeight(50);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(120);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(120);
+    root_child2.setHeight(50);
+    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(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(38);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(150);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(300);
+
+    expect(root_child0.getComputedLeft()).toBe(150);
+    expect(root_child0.getComputedTop()).toBe(38);
+    expect(root_child0.getComputedWidth()).toBe(150);
+    expect(root_child0.getComputedHeight()).toBe(50);
+
+    expect(root_child1.getComputedLeft()).toBe(30);
+    expect(root_child1.getComputedTop()).toBe(38);
+    expect(root_child1.getComputedWidth()).toBe(120);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(180);
+    expect(root_child2.getComputedTop()).toBe(213);
+    expect(root_child2.getComputedWidth()).toBe(120);
+    expect(root_child2.getComputedHeight()).toBe(50);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
--- a/javascript/tests/generated/YGFlexWrapTest.test.ts
+++ b/javascript/tests/generated/YGFlexWrapTest.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<<df11e1c4a2b403410fe5f5d4d146d972>>
+ * @generated SignedSource<<6ec020ec4e84b8a877a84ce11981f7b3>>
 * generated by gentest/gentest-driver.ts from gentest/fixtures/YGFlexWrapTest.html
 */

@@ -1890,3 +1890,228 @@ test('wrap_nodes_with_content_sizing_margin_cross', () => {
    config.free();
  }
 });
+test('wrap_with_min_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMinHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(500);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('wrap_with_max_cross_axis', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(500);
+    root.setMaxHeight(500);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(400);
+    root_child0.setHeight(200);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(400);
+    root_child1.setHeight(200);
+    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(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(0);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(500);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(100);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(400);
+    expect(root_child0.getComputedHeight()).toBe(200);
+
+    expect(root_child1.getComputedLeft()).toBe(100);
+    expect(root_child1.getComputedTop()).toBe(200);
+    expect(root_child1.getComputedWidth()).toBe(400);
+    expect(root_child1.getComputedHeight()).toBe(200);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('nowrap_expands_flexline_box_to_min_cross', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setMinHeight(400);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    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(0);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(0);
+    expect(root_child0.getComputedHeight()).toBe(400);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(0);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(0);
+    expect(root_child0.getComputedHeight()).toBe(400);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('wrap_does_not_impose_min_cross_onto_single_flexline', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  config.setExperimentalFeatureEnabled(ExperimentalFeature.AbsolutePercentageAgainstPaddingEdge, true);
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setMinHeight(400);
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    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(0);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(0);
+    expect(root_child0.getComputedHeight()).toBe(0);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(0);
+    expect(root.getComputedTop()).toBe(0);
+    expect(root.getComputedWidth()).toBe(0);
+    expect(root.getComputedHeight()).toBe(400);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(0);
+    expect(root_child0.getComputedHeight()).toBe(0);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});