Implement Percentage support for gap styles (#1643)

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

X-link: https://github.com/facebook/litho/pull/980

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

Changelog [Internal]:
- Added percentage value for flex layout gap
- Wired up to pass proper available width and height to implement this feature

Reviewed By: NickGerleman

Differential Revision: D56002340

fbshipit-source-id: c0bc86ac70a1391f115c87da99c2ef411535f68b

javascript/tests/generated/YGGapTest.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<<f89c3d89a99f1b25041100e1652de594>>
+ * @generated SignedSource<<d7267afda72d6ed64f8a74487c3952d0>>
  * generated by gentest/gentest-driver.ts from gentest/fixtures/YGGapTest.html
  */
 
@@ -2336,3 +2336,966 @@ test('row_gap_determines_parent_height', () => {
     config.free();
   }
 });
+test('row_gap_percent_wrapping', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setPadding(Edge.Left, 10);
+    root.setPadding(Edge.Top, 10);
+    root.setPadding(Edge.Right, 10);
+    root.setPadding(Edge.Bottom, 10);
+    root.setWidth(300);
+    root.setHeight(700);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(10);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(138);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(10);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(138);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(10);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(190);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(62);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(190);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(62);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(190);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_determines_parent_height', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setWidth(300);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    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(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(130);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(130);
+    expect(root_child3.getComputedTop()).toBe(100);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(0);
+    expect(root_child4.getComputedTop()).toBe(200);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    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(200);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(70);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(200);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(70);
+    expect(root_child3.getComputedTop()).toBe(100);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(200);
+    expect(root_child4.getComputedTop()).toBe(200);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_both_content_padding_and_item_padding', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setPadding(Edge.Left, 10);
+    root.setPadding(Edge.Top, 10);
+    root.setPadding(Edge.Right, 10);
+    root.setPadding(Edge.Bottom, 10);
+    root.setWidth(300);
+    root.setHeight(700);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setPadding(Edge.Left, 10);
+    root_child0.setPadding(Edge.Top, 10);
+    root_child0.setPadding(Edge.Right, 10);
+    root_child0.setPadding(Edge.Bottom, 10);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setPadding(Edge.Left, 10);
+    root_child1.setPadding(Edge.Top, 10);
+    root_child1.setPadding(Edge.Right, 10);
+    root_child1.setPadding(Edge.Bottom, 10);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setPadding(Edge.Left, 10);
+    root_child2.setPadding(Edge.Top, 10);
+    root_child2.setPadding(Edge.Right, 10);
+    root_child2.setPadding(Edge.Bottom, 10);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setPadding(Edge.Left, 10);
+    root_child3.setPadding(Edge.Top, 10);
+    root_child3.setPadding(Edge.Right, 10);
+    root_child3.setPadding(Edge.Bottom, 10);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setPadding(Edge.Left, 10);
+    root_child4.setPadding(Edge.Top, 10);
+    root_child4.setPadding(Edge.Right, 10);
+    root_child4.setPadding(Edge.Bottom, 10);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(10);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(138);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(10);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(138);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(10);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(190);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(62);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(190);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(62);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(190);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_both_content_padding', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setPadding(Edge.Left, 10);
+    root.setPadding(Edge.Top, 10);
+    root.setPadding(Edge.Right, 10);
+    root.setPadding(Edge.Bottom, 10);
+    root.setWidth(300);
+    root.setHeight(700);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(10);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(138);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(10);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(138);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(10);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    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(700);
+
+    expect(root_child0.getComputedLeft()).toBe(190);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(62);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(190);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(62);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(190);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_content_margin', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setMargin(Edge.Left, 10);
+    root.setMargin(Edge.Top, 10);
+    root.setMargin(Edge.Right, 10);
+    root.setMargin(Edge.Bottom, 10);
+    root.setWidth(300);
+    root.setHeight(700);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(10);
+    expect(root.getComputedTop()).toBe(10);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(700);
+
+    expect(root_child0.getComputedLeft()).toBe(0);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(130);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(170);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(130);
+    expect(root_child3.getComputedTop()).toBe(170);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(0);
+    expect(root_child4.getComputedTop()).toBe(340);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(10);
+    expect(root.getComputedTop()).toBe(10);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(700);
+
+    expect(root_child0.getComputedLeft()).toBe(200);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(70);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(200);
+    expect(root_child2.getComputedTop()).toBe(170);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(70);
+    expect(root_child3.getComputedTop()).toBe(170);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(200);
+    expect(root_child4.getComputedTop()).toBe(340);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_content_margin_and_padding', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setMargin(Edge.Left, 10);
+    root.setMargin(Edge.Top, 10);
+    root.setMargin(Edge.Right, 10);
+    root.setMargin(Edge.Bottom, 10);
+    root.setPadding(Edge.Left, 10);
+    root.setPadding(Edge.Top, 10);
+    root.setPadding(Edge.Right, 10);
+    root.setPadding(Edge.Bottom, 10);
+    root.setWidth(300);
+    root.setHeight(700);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    root.calculateLayout(undefined, undefined, Direction.LTR);
+
+    expect(root.getComputedLeft()).toBe(10);
+    expect(root.getComputedTop()).toBe(10);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(700);
+
+    expect(root_child0.getComputedLeft()).toBe(10);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(138);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(10);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(138);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(10);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    root.calculateLayout(undefined, undefined, Direction.RTL);
+
+    expect(root.getComputedLeft()).toBe(10);
+    expect(root.getComputedTop()).toBe(10);
+    expect(root.getComputedWidth()).toBe(300);
+    expect(root.getComputedHeight()).toBe(700);
+
+    expect(root_child0.getComputedLeft()).toBe(190);
+    expect(root_child0.getComputedTop()).toBe(10);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(62);
+    expect(root_child1.getComputedTop()).toBe(10);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(190);
+    expect(root_child2.getComputedTop()).toBe(178);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(62);
+    expect(root_child3.getComputedTop()).toBe(178);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(190);
+    expect(root_child4.getComputedTop()).toBe(346);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_flexible_content', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(300);
+    root.setHeight(300);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setFlexGrow(1);
+    root_child0.setFlexShrink(1);
+    root_child0.setFlexBasis("0%");
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setFlexGrow(1);
+    root_child1.setFlexShrink(1);
+    root_child1.setFlexBasis("0%");
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setFlexGrow(1);
+    root_child2.setFlexShrink(1);
+    root_child2.setFlexBasis("0%");
+    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(0);
+    expect(root_child0.getComputedWidth()).toBe(80);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child1.getComputedLeft()).toBe(110);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(80);
+    expect(root_child1.getComputedHeight()).toBe(300);
+
+    expect(root_child2.getComputedLeft()).toBe(220);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(80);
+    expect(root_child2.getComputedHeight()).toBe(300);
+
+    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(220);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(80);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child1.getComputedLeft()).toBe(110);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(80);
+    expect(root_child1.getComputedHeight()).toBe(300);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(80);
+    expect(root_child2.getComputedHeight()).toBe(300);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test('row_gap_percent_wrapping_with_mixed_flexible_content', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setWidth(300);
+    root.setHeight(300);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(10);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setFlexGrow(1);
+    root_child1.setFlexShrink(1);
+    root_child1.setFlexBasis("0%");
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth("10%");
+    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(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child1.getComputedLeft()).toBe(40);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(200);
+    expect(root_child1.getComputedHeight()).toBe(300);
+
+    expect(root_child2.getComputedLeft()).toBe(270);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(30);
+    expect(root_child2.getComputedHeight()).toBe(300);
+
+    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(290);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(10);
+    expect(root_child0.getComputedHeight()).toBe(300);
+
+    expect(root_child1.getComputedLeft()).toBe(60);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(200);
+    expect(root_child1.getComputedHeight()).toBe(300);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(0);
+    expect(root_child2.getComputedWidth()).toBe(30);
+    expect(root_child2.getComputedHeight()).toBe(300);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});
+test.skip('row_gap_percent_wrapping_with_min_width', () => {
+  const config = Yoga.Config.create();
+  let root;
+
+  try {
+    root = Yoga.Node.create(config);
+    root.setFlexDirection(FlexDirection.Row);
+    root.setPositionType(PositionType.Absolute);
+    root.setFlexWrap(Wrap.Wrap);
+    root.setMinWidth(300);
+    root.setGap(Gutter.Column, "10%");
+    root.setGap(Gutter.Row, "10%");
+
+    const root_child0 = Yoga.Node.create(config);
+    root_child0.setWidth(100);
+    root_child0.setHeight(100);
+    root.insertChild(root_child0, 0);
+
+    const root_child1 = Yoga.Node.create(config);
+    root_child1.setWidth(100);
+    root_child1.setHeight(100);
+    root.insertChild(root_child1, 1);
+
+    const root_child2 = Yoga.Node.create(config);
+    root_child2.setWidth(100);
+    root_child2.setHeight(100);
+    root.insertChild(root_child2, 2);
+
+    const root_child3 = Yoga.Node.create(config);
+    root_child3.setWidth(100);
+    root_child3.setHeight(100);
+    root.insertChild(root_child3, 3);
+
+    const root_child4 = Yoga.Node.create(config);
+    root_child4.setWidth(100);
+    root_child4.setHeight(100);
+    root.insertChild(root_child4, 4);
+    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(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(130);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(0);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(130);
+    expect(root_child3.getComputedTop()).toBe(100);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(0);
+    expect(root_child4.getComputedTop()).toBe(200);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+
+    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(200);
+    expect(root_child0.getComputedTop()).toBe(0);
+    expect(root_child0.getComputedWidth()).toBe(100);
+    expect(root_child0.getComputedHeight()).toBe(100);
+
+    expect(root_child1.getComputedLeft()).toBe(70);
+    expect(root_child1.getComputedTop()).toBe(0);
+    expect(root_child1.getComputedWidth()).toBe(100);
+    expect(root_child1.getComputedHeight()).toBe(100);
+
+    expect(root_child2.getComputedLeft()).toBe(200);
+    expect(root_child2.getComputedTop()).toBe(100);
+    expect(root_child2.getComputedWidth()).toBe(100);
+    expect(root_child2.getComputedHeight()).toBe(100);
+
+    expect(root_child3.getComputedLeft()).toBe(70);
+    expect(root_child3.getComputedTop()).toBe(100);
+    expect(root_child3.getComputedWidth()).toBe(100);
+    expect(root_child3.getComputedHeight()).toBe(100);
+
+    expect(root_child4.getComputedLeft()).toBe(200);
+    expect(root_child4.getComputedTop()).toBe(200);
+    expect(root_child4.getComputedWidth()).toBe(100);
+    expect(root_child4.getComputedHeight()).toBe(100);
+  } finally {
+    if (typeof root !== 'undefined') {
+      root.freeRecursive();
+    }
+
+    config.free();
+  }
+});