Add experiment support to gentest

Summary: This diff does two things - Clean up some of the generated code making the files smaller. - Add experiment support to generated tests allowing us to use gentest for things still being experimented with such as more compliant flex-basis behavior. Reviewed By: gkassabli Differential Revision: D4226734 fbshipit-source-id: 2cc1471c21883e8e326f16e7a8bb1a3657acd84b
2016-11-23 11:12:51 -08:00
parent a0d560a24b
commit 22b0fdb3e6
49 changed files with 6574 additions and 6119 deletions
--- a/gentest/fixtures/CSSLayoutRoundingTest.html
+++ b/gentest/fixtures/CSSLayoutRoundingTest.html
@@ -0,0 +1,64 @@
+<div id="rounding_flex_basis_flex_grow_row_width_of_100" experiments="Rounding" style="width: 100px; height: 100px; flex-direction: row;">
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+</div>
+
+<div id="rounding_flex_basis_flex_grow_row_prime_number_width" experiments="Rounding" style="width: 113px; height: 100px; flex-direction: row;">
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1;"></div>
+</div>
+
+<div id="rounding_flex_basis_flex_shrink_row" experiments="Rounding" style="width: 101px; height: 100px; flex-direction: row;">
+ <div style="flex-basis: 100px; flex-shrink: 1;"></div>
+ <div style="flex-basis: 25px;"></div>
+ <div style="flex-basis: 25px;"></div>
+</div>
+
+<div id="rounding_flex_basis_overrides_main_size" experiments="Rounding" style="height: 113px; width: 100px;">
+ <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+ <div style="height: 10px; flex-grow:1;"></div>
+ <div style="height: 10px; flex-grow:1;"></div>
+</div>
+
+<div id="rounding_total_fractial" experiments="Rounding" style="height: 113.4px; width: 87.4px;">
+ <div style="height: 20.3px; flex-grow:0.7; flex-basis:50.3px;"></div>
+ <div style="height: 10px; flex-grow:1.6;"></div>
+ <div style="height: 10.7px; flex-grow:1.1;"></div>
+</div>
+
+<div id="rounding_total_fractial_nested" experiments="Rounding" style="height: 113.4px; width: 87.4px;">
+ <div style="height: 20.3px; flex-grow:0.7; flex-basis:50.3px;">
+   <div style="bottom: 13.3px; height: 9.9px; flex-grow:1; flex-basis:0.3px;"></div>
+   <div style="top: 13.3px; height: 1.1px; flex-grow:4; flex-basis:0.3px;"></div>
+ </div>
+ <div style="height: 10px; flex-grow:1.6;"></div>
+ <div style="height: 10.7px; flex-grow:1.1;"></div>
+</div>
+
+<div id="rounding_fractial_input_1" experiments="Rounding" style="height: 113.4px; width: 100px;">
+  <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+</div>
+
+<div id="rounding_fractial_input_2" experiments="Rounding" style="height: 113.6px; width: 100px;">
+  <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+</div>
+
+<div id="rounding_fractial_input_3" experiments="Rounding" style="top: 0.3px; height: 113.4px; width: 100px;">
+  <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+</div>
+
+<div id="rounding_fractial_input_4" experiments="Rounding" style="top: 0.7px; height: 113.4px; width: 100px;">
+  <div style="height: 20px; flex-grow:1; flex-basis:50px;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+  <div style="height: 10px; flex-grow:1;"></div>
+</div>
--- a/gentest/gentest-cpp.js
+++ b/gentest/gentest-cpp.js
@@ -26,20 +26,35 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
    ]);
  }},

-  emitTestPrologue:{value:function(name) {
+  emitTestPrologue:{value:function(name, experiments) {
    this.push('TEST(CSSLayoutTest, ' + name + ') {');
    this.pushIndent();
+
+    if (experiments.length > 0) {
+      for (var i in experiments) {
+        this.push('CSSLayoutSetExperimentalFeatureEnabled(CSSExperimentalFeature' + experiments[i] +', true);');
+      }
+      this.push('');
+    }
  }},

  emitTestTreePrologue:{value:function(nodeName) {
    this.push('const CSSNodeRef ' + nodeName + ' = CSSNodeNew();');
  }},

-  emitTestEpilogue:{value:function() {
+  emitTestEpilogue:{value:function(experiments) {
    this.push([
      '',
      'CSSNodeFreeRecursive(root);',
    ]);
+
+    if (experiments.length > 0) {
+      this.push('');
+      for (var i in experiments) {
+        this.push('CSSLayoutSetExperimentalFeatureEnabled(CSSExperimentalFeature' + experiments[i] +', false);');
+      }
+    }
+
    this.popIndent();
    this.push([
      '}',
@@ -130,7 +145,7 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetBorder:{value:function(nodeName, edge, value) {
-    this.push('CSSNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + value + ');');
+    this.push('CSSNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + toFloatString(value) + ');');
  }},

  CSSNodeStyleSetDirection:{value:function(nodeName, value) {
--- a/gentest/gentest-cs.js
+++ b/gentest/gentest-cs.js
@@ -31,18 +31,32 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
    this.pushIndent();
  }},

-  emitTestPrologue:{value:function(name) {
+  emitTestPrologue:{value:function(name, experiments) {
    this.push('[Test]');
    this.push('public void Test_' + name + '()');
    this.push('{');
    this.pushIndent();
+
+    if (experiments.length > 0) {
+      for (var i in experiments) {
+        this.push('CSSNode.SetExperimentalFeatureEnabled(CSSExperimentalFeature.' + experiments[i] +', true);');
+      }
+      this.push('');
+    }
  }},

  emitTestTreePrologue:{value:function(nodeName) {
    this.push('CSSNode ' + nodeName + ' = new CSSNode();');
  }},

-  emitTestEpilogue:{value:function() {
+  emitTestEpilogue:{value:function(experiments) {
+    if (experiments.length > 0) {
+      this.push('');
+      for (var i in experiments) {
+        this.push('CSSNode.SetExperimentalFeatureEnabled(CSSExperimentalFeature.' + experiments[i] +', false);');
+      }
+    }
+
    this.popIndent();
    this.push([
      '}',
@@ -61,7 +75,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  AssertEQ:{value:function(v0, v1) {
-    this.push('Assert.AreEqual(' + v0 + ', ' + v1 + ');');
+    this.push('Assert.AreEqual(' + v0 + 'f, ' + v1 + ');');
  }},

  CSSAlignAuto:{value:'CSSAlign.Auto'},
@@ -141,7 +155,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetBorder:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.SetBorder(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.SetBorder(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetDirection:{value:function(nodeName, value) {
@@ -149,7 +163,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetFlexBasis:{value:function(nodeName, value) {
-    this.push(nodeName + '.FlexBasis = ' + value + ';');
+    this.push(nodeName + '.FlexBasis = ' + value + 'f;');
  }},

  CSSNodeStyleSetFlexDirection:{value:function(nodeName, value) {
@@ -157,11 +171,11 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetFlexGrow:{value:function(nodeName, value) {
-    this.push(nodeName + '.FlexGrow = ' + value + ';');
+    this.push(nodeName + '.FlexGrow = ' + value + 'f;');
  }},

  CSSNodeStyleSetFlexShrink:{value:function(nodeName, value) {
-    this.push(nodeName + '.FlexShrink = ' + value + ';');
+    this.push(nodeName + '.FlexShrink = ' + value + 'f;');
  }},

  CSSNodeStyleSetFlexWrap:{value:function(nodeName, value) {
@@ -169,7 +183,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleHeight = ' + value + ';');
+    this.push(nodeName + '.StyleHeight = ' + value + 'f;');
  }},

  CSSNodeStyleSetJustifyContent:{value:function(nodeName, value) {
@@ -177,23 +191,23 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetMargin:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.SetMargin(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.SetMargin(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetMaxHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleMaxHeight = ' + value + ';');
+    this.push(nodeName + '.StyleMaxHeight = ' + value + 'f;');
  }},

  CSSNodeStyleSetMaxWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleMaxWidth = ' + value + ';');
+    this.push(nodeName + '.StyleMaxWidth = ' + value + 'f;');
  }},

  CSSNodeStyleSetMinHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleMinHeight = ' + value + ';');
+    this.push(nodeName + '.StyleMinHeight = ' + value + 'f;');
  }},

  CSSNodeStyleSetMinWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleMinWidth = ' + value + ';');
+    this.push(nodeName + '.StyleMinWidth = ' + value + 'f;');
  }},

  CSSNodeStyleSetOverflow:{value:function(nodeName, value) {
@@ -201,11 +215,11 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetPadding:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.SetPadding(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.SetPadding(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetPosition:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.SetPosition(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.SetPosition(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetPositionType:{value:function(nodeName, value) {
@@ -213,6 +227,6 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.StyleWidth = ' + value + ';');
+    this.push(nodeName + '.StyleWidth = ' + value + 'f;');
  }},
 });
--- a/gentest/gentest-java.js
+++ b/gentest/gentest-java.js
@@ -11,6 +11,18 @@ var JavaEmitter = function() {
  Emitter.call(this, 'java', '  ');
 };

+function toJavaUpper(symbol) {
+  var out = '';
+  for (var i = 0; i < symbol.length; i++) {
+    var c = symbol[i];
+    if (c == c.toUpperCase() && i != 0 && symbol[i - 1] != symbol[i - 1].toUpperCase()) {
+      out += '_';
+    }
+    out += c.toUpperCase();
+  }
+  return out;
+}
+
 JavaEmitter.prototype = Object.create(Emitter.prototype, {
  constructor:{value:JavaEmitter},

@@ -27,17 +39,31 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
    this.pushIndent();
  }},

-  emitTestPrologue:{value:function(name) {
+  emitTestPrologue:{value:function(name, experiments) {
    this.push('@Test');
    this.push('public void test_' + name + '() {');
    this.pushIndent();
+
+    if (experiments.length > 0) {
+      for (var i in experiments) {
+        this.push('CSSNode.setExperimentalFeatureEnabled(CSSExperimentalFeature.' + toJavaUpper(experiments[i]) +', true);');
+      }
+      this.push('');
+    }
  }},

  emitTestTreePrologue:{value:function(nodeName) {
    this.push('final CSSNode ' + nodeName + ' = new CSSNode();');
  }},

-  emitTestEpilogue:{value:function() {
+  emitTestEpilogue:{value:function(experiments) {
+    if (experiments.length > 0) {
+      this.push('');
+      for (var i in experiments) {
+        this.push('CSSNode.setExperimentalFeatureEnabled(CSSExperimentalFeature.' + toJavaUpper(experiments[i]) +', false);');
+      }
+    }
+
    this.popIndent();
    this.push([
      '}',
@@ -54,7 +80,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  AssertEQ:{value:function(v0, v1) {
-    this.push('assertEquals(' + v0 + ', ' + v1 + ', 0.0f);');
+    this.push('assertEquals(' + v0 + 'f, ' + v1 + ', 0.0f);');
  }},

  CSSAlignAuto:{value:'CSSAlign.AUTO'},
@@ -134,7 +160,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetBorder:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.setBorder(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.setBorder(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetDirection:{value:function(nodeName, value) {
@@ -142,7 +168,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetFlexBasis:{value:function(nodeName, value) {
-    this.push(nodeName + '.setFlexBasis(' + value + ');');
+    this.push(nodeName + '.setFlexBasis(' + value + 'f);');
  }},

  CSSNodeStyleSetFlexDirection:{value:function(nodeName, value) {
@@ -150,11 +176,11 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetFlexGrow:{value:function(nodeName, value) {
-    this.push(nodeName + '.setFlexGrow(' + value + ');');
+    this.push(nodeName + '.setFlexGrow(' + value + 'f);');
  }},

  CSSNodeStyleSetFlexShrink:{value:function(nodeName, value) {
-    this.push(nodeName + '.setFlexShrink(' + value + ');');
+    this.push(nodeName + '.setFlexShrink(' + value + 'f);');
  }},

  CSSNodeStyleSetFlexWrap:{value:function(nodeName, value) {
@@ -162,7 +188,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleHeight(' + value + ');');
+    this.push(nodeName + '.setStyleHeight(' + value + 'f);');
  }},

  CSSNodeStyleSetJustifyContent:{value:function(nodeName, value) {
@@ -170,23 +196,23 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetMargin:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.setMargin(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.setMargin(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetMaxHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleMaxHeight(' + value + ');');
+    this.push(nodeName + '.setStyleMaxHeight(' + value + 'f);');
  }},

  CSSNodeStyleSetMaxWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleMaxWidth(' + value + ');');
+    this.push(nodeName + '.setStyleMaxWidth(' + value + 'f);');
  }},

  CSSNodeStyleSetMinHeight:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleMinHeight(' + value + ');');
+    this.push(nodeName + '.setStyleMinHeight(' + value + 'f);');
  }},

  CSSNodeStyleSetMinWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleMinWidth(' + value + ');');
+    this.push(nodeName + '.setStyleMinWidth(' + value + 'f);');
  }},

  CSSNodeStyleSetOverflow:{value:function(nodeName, value) {
@@ -198,7 +224,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetPosition:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.setPosition(' + edge + ', ' + value + ');');
+    this.push(nodeName + '.setPosition(' + edge + ', ' + value + 'f);');
  }},

  CSSNodeStyleSetPositionType:{value:function(nodeName, value) {
@@ -206,6 +232,6 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  CSSNodeStyleSetWidth:{value:function(nodeName, value) {
-    this.push(nodeName + '.setStyleWidth(' + value + ');');
+    this.push(nodeName + '.setStyleWidth(' + value + 'f);');
  }},
 });
--- a/gentest/gentest.js
+++ b/gentest/gentest.js
@@ -46,36 +46,7 @@ function printTest(e, LTRContainer, RTLContainer, genericContainer) {
    ' * of patent rights can be found in the PATENTS file in the same directory.',
    ' */',
    '',
-    '/**',
-    ' * @Generated by gentest/gentest.sh with the following input',
-    ' *',
-  ]);
-
-  var indentation = 0;
-  e.push(genericContainer.innerHTML.split('\n').map(function(line) {
-    return line.trim();
-  }).filter(function(line) {
-    return line.length > 0 && line !== '<div id="default"></div>';
-  }).map(function(line) {
-    var result;
-    if (line.indexOf('</div') == 0) {
-      result = '  '.repeat(indentation - 1) + line;
-    } else {
-      result = '  '.repeat(indentation) + line;
-    }
-
-    indentation += (line.match(/<div/g) || []).length;
-    indentation -= (line.match(/<\/div/g) || []).length;
-    return result;
-  }).reduce(function(curr, prev) {
-    if (prev.indexOf('<div') == 0) {
-      prev = '\n' + prev;
-    }
-    return curr + '\n' + prev;
-  }));
-  e.push([
-    ' *',
-    ' */',
+    ' // @Generated by gentest/gentest.rb from gentest/fixtures/' + document.title + '.html',
    '',
  ]);
  e.emitPrologue();
@@ -86,7 +57,7 @@ function printTest(e, LTRContainer, RTLContainer, genericContainer) {


  for (var i = 0; i < genericLayoutTree.length; i++) {
-    e.emitTestPrologue(genericLayoutTree[i].name);
+    e.emitTestPrologue(genericLayoutTree[i].name, genericLayoutTree[i].experiments);

    if (genericLayoutTree[i].name == 'wrap_column') {
      // Modify width and left values due to both safari and chrome not abiding by the
@@ -127,7 +98,7 @@ function printTest(e, LTRContainer, RTLContainer, genericContainer) {

    assertTestTree(e, RTLLayoutTree[i], 'root', null);

-    e.emitTestEpilogue();
+    e.emitTestEpilogue(genericLayoutTree[i].experiments);
  }
  e.emitEpilogue();

@@ -443,6 +414,9 @@ function calculateTree(root) {
      style: getCSSLayoutStyle(child),
      declaredStyle: child.style,
      rawStyle: child.getAttribute('style'),
+      experiments: child.getAttribute('experiments')
+          ? child.getAttribute('experiments').split(' ')
+          : [],
    });
  }

--- a/gentest/gentest.rb
+++ b/gentest/gentest.rb
@@ -1,10 +1,17 @@
 #!/usr/bin/env ruby
+
 require 'watir-webdriver'
 require 'fileutils'
+
 caps = Selenium::WebDriver::Remote::Capabilities.chrome(
-  "loggingPrefs"=>{"browser"=>"ALL", "performance"=>"ALL"})
+  "loggingPrefs"=>{
+    "browser"=>"ALL",
+    "performance"=>"ALL"
+  }
+)
 browser = Watir::Browser.new(:chrome, :desired_capabilities => caps)
 Dir.chdir(File.dirname($0))
+
 Dir['fixtures/*.html'].each do |file|
  fixture = File.read(file)
  name = File.basename(file, '.*')
@@ -22,7 +29,7 @@ Dir['fixtures/*.html'].each do |file|

  template = File.open('test-template.html').read
  f = File.open('test.html', 'w')
-  f.write sprintf(template, ltr_fixture, rtl_fixture, fixture)
+  f.write sprintf(template, name, ltr_fixture, rtl_fixture, fixture)
  f.close
  FileUtils.copy('test.html', "#{name}.html") if $DEBUG

--- a/gentest/test-template.html
+++ b/gentest/test-template.html
@@ -2,7 +2,7 @@
 <html>
  <head>
    <meta charset="UTF-8">
-    <title>test page</title>
+    <title>%s</title>
    <script src="gentest.js"></script>
    <script src="gentest-cpp.js"></script>
    <script src="gentest-java.js"></script>