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/src/Node.cpp

@@ -240,6 +240,10 @@ void Node::setGap(int gutter, double gapLength) {
   YGNodeStyleSetGap(m_node, static_cast<YGGutter>(gutter), gapLength);
 }
 
+void Node::setGapPercent(int gutter, double gapLength) {
+  YGNodeStyleSetGapPercent(m_node, static_cast<YGGutter>(gutter), gapLength);
+}
+
 int Node::getPositionType(void) const {
   return YGNodeStyleGetPositionType(m_node);
 }

javascript/src/Node.h

@@ -124,6 +124,7 @@ class Node {
   void setPaddingPercent(int edge, double padding);
 
   void setGap(int gutter, double gapLength);
+  void setGapPercent(int gutter, double gapLength);
 
  public: // Style getters
   int getPositionType(void) const;

javascript/src/embind.cpp

@@ -116,6 +116,7 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("setPadding", &Node::setPadding)
       .function("setPaddingPercent", &Node::setPaddingPercent)
       .function("setGap", &Node::setGap)
+      .function("setGapPercent", &Node::setGapPercent)
 
       .function("setDirection", &Node::setDirection)
 

javascript/src/wrapAssembly.ts

@@ -144,7 +144,8 @@ export type Node = {
   setHeightAuto(): void;
   setHeightPercent(height: number | undefined): void;
   setJustifyContent(justifyContent: Justify): void;
-  setGap(gutter: Gutter, gapLength: number | undefined): Value;
+  setGap(gutter: Gutter, gapLength: number | `${number}%` | undefined): Value;
+  setGapPercent(gutter: Gutter, gapLength: number | undefined): Value;
   setMargin(
     edge: Edge,
     margin: number | 'auto' | `${number}%` | undefined,
@@ -209,6 +210,7 @@ export default function wrapAssembly(lib: any): Yoga {
     'setMaxWidth',
     'setMaxHeight',
     'setPadding',
+    'setGap',
   ]) {
     const methods = {
       [Unit.Point]: lib.Node.prototype[fnName],

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();
+  }
+});