Implement Percentage support for gap styles (facebook#1643)

Summary:
X-link: facebook/react-native#44067

X-link: facebook/litho#980

Pull Request resolved: facebook#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

Author: realsoelynn

gentest/fixtures/YGGapTest.html

@@ -171,3 +171,72 @@
   <div style="height: 20px"></div>
   <div style="height: 30px"></div>
 </div>
+
+<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
+  <div style="flex: 1;"></div>
+  <div style="flex: 1;"></div>
+  <div style="flex: 1;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
+  <div style="width: 10px;"></div>
+  <div style="flex: 1;"></div>
+  <div style="width: 10%;"></div>
+</div>
+
+<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width  -->
+<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>

java/com/facebook/yoga/YogaNative.java

@@ -108,6 +108,7 @@ public class YogaNative {
   static native void jni_YGNodeStyleSetAspectRatioJNI(long nativePointer, float aspectRatio);
   static native float jni_YGNodeStyleGetGapJNI(long nativePointer, int gutter);
   static native void jni_YGNodeStyleSetGapJNI(long nativePointer, int gutter, float gapLength);
+  static native void jni_YGNodeStyleSetGapPercentJNI(long nativePointer, int gutter, float gapLength);
   static native void jni_YGNodeSetHasMeasureFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetHasBaselineFuncJNI(long nativePointer, boolean hasMeasureFunc);
   static native void jni_YGNodeSetStyleInputsJNI(long nativePointer, float[] styleInputsArray, int size);

java/com/facebook/yoga/YogaNode.java

@@ -192,6 +192,8 @@ public interface Inputs {
 
   public abstract void setGap(YogaGutter gutter, float gapLength);
 
+  public abstract void setGapPercent(YogaGutter gutter, float gapLength);
+
   public abstract float getLayoutX();
 
   public abstract float getLayoutY();

java/com/facebook/yoga/YogaNodeJNIBase.java

@@ -721,4 +721,9 @@ public float getGap(YogaGutter gutter) {
   public void setGap(YogaGutter gutter, float gapLength) {
     YogaNative.jni_YGNodeStyleSetGapJNI(mNativePointer, gutter.intValue(), gapLength);
   }
+
+  @Override
+  public void setGapPercent(YogaGutter gutter, float gapLength) {
+    YogaNative.jni_YGNodeStyleSetGapPercentJNI(mNativePointer, gutter.intValue(), gapLength);
+  }
 }

java/jni/YGJNIVanilla.cpp

@@ -715,6 +715,18 @@ static void jni_YGNodeStyleSetGapJNI(
       static_cast<float>(gapLength));
 }
 
+static void jni_YGNodeStyleSetGapPercentJNI(
+    JNIEnv* /*env*/,
+    jobject /*obj*/,
+    jlong nativePointer,
+    jint gutter,
+    jfloat gapLength) {
+  YGNodeStyleSetGapPercent(
+      _jlong2YGNodeRef(nativePointer),
+      static_cast<YGGutter>(gutter),
+      static_cast<float>(gapLength));
+}
+
 // Yoga specific properties, not compatible with flexbox specification
 YG_NODE_JNI_STYLE_PROP(jfloat, float, AspectRatio);
 
@@ -944,6 +956,9 @@ static JNINativeMethod methods[] = {
      (void*)jni_YGNodeSetHasMeasureFuncJNI},
     {"jni_YGNodeStyleGetGapJNI", "(JI)F", (void*)jni_YGNodeStyleGetGapJNI},
     {"jni_YGNodeStyleSetGapJNI", "(JIF)V", (void*)jni_YGNodeStyleSetGapJNI},
+    {"jni_YGNodeStyleSetGapPercentJNI",
+     "(JIF)V",
+     (void*)jni_YGNodeStyleSetGapPercentJNI},
     {"jni_YGNodeSetHasBaselineFuncJNI",
      "(JZ)V",
      (void*)jni_YGNodeSetHasBaselineFuncJNI},