Teach test generator gap/row-gap/column-gap

Summary:
This adds mappings to the test generator to create the right language specific calls when an HTML fixture has gap properties.

Changelog:
[Internal][Added] - Teach yoga test generator gap/row-gap/column-gap

Reviewed By: javache

Differential Revision: D39922409

fbshipit-source-id: 5b905ed95ae64373d2c7d3bb1a03e94270bf209a

gentest/gentest-cpp.js

@@ -92,6 +92,10 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGEdgeStart:{value:'YGEdgeStart'},
   YGEdgeTop:{value:'YGEdgeTop'},
 
+  YGGutterAll:{value:'YGGutterAll'},
+  YGGutterColumn:{value:'YGGutterColumn'},
+  YGGutterRow:{value:'YGGutterRow'},
+
   YGFlexDirectionColumn:{value:'YGFlexDirectionColumn'},
   YGFlexDirectionColumnReverse:{value:'YGFlexDirectionColumnReverse'},
   YGFlexDirectionRow:{value:'YGFlexDirectionRow'},
@@ -242,4 +246,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGNodeStyleSetWidth:{value:function(nodeName, value) {
     this.push('YGNodeStyleSetWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
   }},
+
+  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+    this.push('YGNodeStyleSetGap' + toFunctionName(value) + '(' + nodeName + ', ' + gap + ', ' + toValueCpp(value) + ');');
+  }},
 });

gentest/gentest-cs.js

@@ -105,6 +105,10 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
   YGEdgeStart:{value:'Start'},
   YGEdgeTop:{value:'Top'},
 
+  YGGutterAll:{value:''},
+  YGGutterColumn:{value:'Column'},
+  YGGutterRow:{value:'Row'},
+
   YGFlexDirectionColumn:{value:'YogaFlexDirection.Column'},
   YGFlexDirectionColumnReverse:{value:'YogaFlexDirection.ColumnReverse'},
   YGFlexDirectionRow:{value:'YogaFlexDirection.Row'},
@@ -251,4 +255,8 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
   YGNodeStyleSetWidth:{value:function(nodeName, value) {
     this.push(nodeName + '.Width = ' + toCsUnitValue(value) + ';');
   }},
+
+  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+    this.push(nodeName + '.' + gap + 'Gap' + ' = ' + toCsUnitValue(value) + ';');
+  }},
 });

gentest/gentest-java.js

@@ -128,6 +128,10 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGEdgeStart:{value:'YogaEdge.START'},
   YGEdgeTop:{value:'YogaEdge.TOP'},
 
+  YGGutterAll:{value:'YogaGutter.ALL'},
+  YGGutterColumn:{value:'YogaGutter.COLUMN'},
+  YGGutterRow:{value:'YogaGutter.ROW'},
+
   YGFlexDirectionColumn:{value:'YogaFlexDirection.COLUMN'},
   YGFlexDirectionColumnReverse:{value:'YogaFlexDirection.COLUMN_REVERSE'},
   YGFlexDirectionRow:{value:'YogaFlexDirection.ROW'},
@@ -280,4 +284,8 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGNodeStyleSetWidth:{value:function(nodeName, value) {
     this.push(nodeName + '.setWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
   }},
+
+  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+    this.push(nodeName + '.setGap' + toMethodName(value) + '(' + gap + ', ' + toValueJava(value) + 'f);');
+  }},
 });

gentest/gentest-javascript.js

@@ -107,6 +107,10 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGEdgeStart:{value:'Yoga.EDGE_START'},
   YGEdgeTop:{value:'Yoga.EDGE_TOP'},
 
+  YGGutterAll:{value:'Yoga.GUTTER_ALL'},
+  YGGutterColumn:{value:'Yoga.GUTTER_COLUMN'},
+  YGGutterRow:{value:'Yoga.GUTTER_ROW'},
+
   YGFlexDirectionColumn:{value:'Yoga.FLEX_DIRECTION_COLUMN'},
   YGFlexDirectionColumnReverse:{value:'Yoga.FLEX_DIRECTION_COLUMN_REVERSE'},
   YGFlexDirectionRow:{value:'Yoga.FLEX_DIRECTION_ROW'},
@@ -251,4 +255,8 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGNodeStyleSetWidth:{value:function(nodeName, value) {
     this.push(nodeName + '.setWidth(' + toValueJavascript(value) + ');');
   }},
+
+  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+    this.push(nodeName + '.setGap('+ toValueJavascript(gap) + ', ' + toValueJavascript(value) + ');');
+  }},
 });

gentest/gentest.js

@@ -165,6 +165,15 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
 
     if (!isDefaultStyleValue(style, node.style[style])) {
       switch (style) {
+        case 'gap':
+          e.YGNodeStyleSetGap(nodeName, e.YGGutterAll, pointValue(e, node.style[style]));
+          break;
+        case 'column-gap':
+          e.YGNodeStyleSetGap(nodeName, e.YGGutterColumn, pointValue(e, node.style[style]));
+          break;
+        case 'row-gap':
+          e.YGNodeStyleSetGap(nodeName, e.YGGutterRow, pointValue(e, node.style[style]));
+          break;
         case 'direction':
           e.YGNodeStyleSetDirection(nodeName, directionValue(e, node.style[style]));
           break;
@@ -477,6 +486,8 @@ function calculateTree(root, roundToPixelGrid) {
 }
 
 function getYogaStyle(node) {
+  // TODO: Relying on computed style means we cannot test shorthand props like
+  // "padding", "margin", "gap".
   return [
     'direction',
     'flex-direction',
@@ -512,6 +523,8 @@ function getYogaStyle(node) {
     'height',
     'min-height',
     'max-height',
+    'column-gap',
+    'row-gap',
     'display',
   ].reduce(function(map, key) {
     map[key] = node.style[key] || getComputedStyle(node, null).getPropertyValue(key);