Add data-disabled to test fixtures (#1286)

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

This can be marked in fixtures to skip a test without commenting it out. We add one more usage of this.

The same functionality existed (unused) before for `experiments`, which I changed to `data-experiments`.

Formatting of JS tests changed to be closer to what Prettier would output, and to remove usage of `Yoga.UNDEFINED` which doesn't existi and just resolves to `undefined` (this is converted to NaN by the wrapper layer).

Reviewed By: yungsters

Differential Revision: D45723003

fbshipit-source-id: 337af319ab1c1c12047d6579da8c7e63b4f1537a

gentest/fixtures/YGAlignItemsTest.html

@@ -111,7 +111,8 @@
   <div style="width: 50px; height: 50px;"></div>
 </div>
 
-<div id="align_baseline_multiline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
+<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
+<div id="align_baseline_multiline_column" data-disabled="true" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
   <div style="width: 50px; height: 50px;"></div>
   <div style="width: 30px; height: 50px;">
     <div style="width: 20px; height: 20px;"></div>
@@ -122,7 +123,8 @@
   <div style="width: 50px; height: 20px;"></div>
 </div>
 
-<div id="align_baseline_multiline_column2" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
+<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
+<div id="align_baseline_multiline_column2" data-disabled="true" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
   <div style="width: 50px; height: 50px;flex-direction:column;"></div>
   <div style="width: 30px; height: 50px;flex-direction:column;">
     <div style="width: 20px; height: 20px;flex-direction:column;"></div>

gentest/fixtures/YGMinMaxDimensionTest.html

@@ -6,21 +6,17 @@
   <div style="width: 10px; max-height: 50px;"></div>
 </div>
 
-<!-- Chrome and Yoga disagree on the correct output -->
-<!--
-<div id="min_height" style="width: 100px; height: 100px;">
+<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
+<div id="min_height" data-disabled="true" style="width: 100px; height: 100px;">
   <div style="flex-grow: 1; min-height: 60px;"></div>
   <div style="flex-grow: 1;"></div>
 </div>
--->
 
-<!-- Chrome and Yoga disagree on the correct output -->
-<!--
-<div id="min_width" style="width: 100px; height: 100px; flex-direction: row">
+<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
+<div id="min_width" data-disabled="true" style="width: 100px; height: 100px; flex-direction: row">
   <div style="flex-grow: 1; min-width: 60px;"></div>
   <div style="flex-grow: 1;"></div>
 </div>
--->
 
 <div id="justify_content_min_max" style="max-height: 200px; min-height: 100px; width: 100px; justify-content: center;">
   <div style="width: 60px; height: 60px;"></div>

gentest/fixtures/YGPercentageTest.html

@@ -21,13 +21,11 @@
 </div>
 
 
-<!-- Chrome and Yoga disagree on the correct output -->
-<!--
-<div id="percentage_flex_basis_cross_min_height" style="width: 200px; height: 200px; flex-direction: column;">
+<!-- TODO: Yoga's behavior is no longer in line with Chromium  -->
+<div id="percentage_flex_basis_cross_min_height" data-disabled="true" style="width: 200px; height: 200px; flex-direction: column;">
   <div style="flex-grow: 1; min-height: 60%;"></div>
   <div style="flex-grow: 2; min-height: 10%;"></div>
 </div>
--->
 
 <div id="percentage_flex_basis_main_max_height" style="width: 200px; height: 200px; flex-direction: row;">
   <div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>

gentest/gentest-cpp.js

@@ -34,10 +34,15 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
     ]);
   }},
 
-  emitTestPrologue:{value:function(name, experiments) {
+  emitTestPrologue:{value:function(name, experiments, disabled) {
     this.push('TEST(YogaTest, ' + name + ') {');
     this.pushIndent();
 
+    if (disabled) {
+      this.push('GTEST_SKIP();');
+      this.push('');
+    }
+
     this.push('const YGConfigRef config = YGConfigNew();')
     for (var i in experiments) {
       this.push('YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeature' + experiments[i] +', true);');

gentest/gentest-cs.js

@@ -45,8 +45,11 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
     this.pushIndent();
   }},
 
-  emitTestPrologue:{value:function(name, experiments) {
+  emitTestPrologue:{value:function(name, experiments, disabled) {
     this.push('[Test]');
+    if (disabled) {
+      this.push('[Ignore]');
+    }
     this.push('public void Test_' + name + '()');
     this.push('{');
     this.pushIndent();

gentest/gentest-java.js

@@ -44,6 +44,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
       '',
       'import static org.junit.Assert.assertEquals;',
       '',
+      'import org.junit.Ignore;',
       'import org.junit.Test;',
       'import org.junit.runner.RunWith;',
       'import org.junit.runners.Parameterized;',
@@ -67,8 +68,11 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
     ]);
   }},
 
-  emitTestPrologue:{value:function(name, experiments) {
+  emitTestPrologue:{value:function(name, experiments, disabled) {
     this.push('@Test');
+    if (disabled) {
+      this.push('@Ignore');
+    }
     this.push('public void test_' + name + '() {');
     this.pushIndent();
 

gentest/gentest-javascript.js

@@ -33,8 +33,9 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
 
   emitPrologue:{value:function() {}},
 
-  emitTestPrologue:{value:function(name, experiments) {
-    this.push('test(' + JSON.stringify(name) + ', () => {');
+  emitTestPrologue:{value:function(name, experiments, ignore) {
+    const testFn = ignore ? `test.skip` : 'test';
+    this.push(`${testFn}('${name}', () => {`);
     this.pushIndent();
     this.push('const config = Yoga.Config.create();');
     this.push('let root;');
@@ -64,7 +65,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
     this.push('} finally {');
     this.pushIndent();
 
-    this.push('if (typeof root !== "undefined") {');
+    this.push('if (typeof root !== \'undefined\') {');
     this.pushIndent();
     this.push('root.freeRecursive();');
     this.popIndent();
@@ -135,13 +136,13 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGWrapWrap:{value:'Yoga.WRAP_WRAP'},
   YGWrapWrapReverse:{value: 'Yoga.WRAP_WRAP_REVERSE'},
 
-  YGUndefined:{value:'Yoga.UNDEFINED'},
+  YGUndefined:{value:'undefined'},
 
   YGDisplayFlex:{value:'Yoga.DISPLAY_FLEX'},
   YGDisplayNone:{value:'Yoga.DISPLAY_NONE'},
 
   YGNodeCalculateLayout:{value:function(node, dir, experiments) {
-    this.push(node + '.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, ' + dir + ');');
+    this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
   }},
 
   YGNodeInsertChild:{value:function(parentName, nodeName, index) {

gentest/gentest.js

@@ -68,7 +68,11 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
 
 
   for (var i = 0; i < genericLayoutTree.length; i++) {
-    e.emitTestPrologue(genericLayoutTree[i].name, genericLayoutTree[i].experiments);
+    e.emitTestPrologue(
+      genericLayoutTree[i].name,
+      genericLayoutTree[i].experiments,
+      genericLayoutTree[i].disabled
+    );
 
     if (genericLayoutTree[i].name == 'wrap_column') {
       // Modify width and left values due to both safari and chrome not abiding by the
@@ -475,9 +479,10 @@ function calculateTree(root, roundToPixelGrid) {
       style: getYogaStyle(child),
       declaredStyle: child.style,
       rawStyle: child.getAttribute('style'),
-      experiments: child.getAttribute('experiments')
-          ? child.getAttribute('experiments').split(' ')
+      experiments: child.dataset.experiments
+          ? child.dataset.experiments.split(' ')
           : DEFAULT_EXPERIMENTS,
+      disabled: child.dataset.disabled === 'true',
     };
 
     var size = getRoundedSize(child);