Allow specifying the test name in the input to gentest

Summary: Allow adding test name within html through the id of the root element. This makes it much easier to re-generate test files.

Differential Revision: D3771966

fbshipit-source-id: 313e1648dcf4521e7c649f54c4ced2aa3297bf06

gentest/gentest.js

@@ -50,7 +50,7 @@ function printTest(rootNode, layoutTree) {
   }));
 
   for (var i = 0; i < layoutTree.length - 1; i++) {
-    lines.push('TEST(CSSLayoutTest, INSERT_NAME_HERE) {');
+    lines.push('TEST(CSSLayoutTest, ' + layoutTree[i].name + ') {');
 
     lines.push('  ' + setupTestTree(layoutTree[i], 'root', null).reduce(function(curr, prev) {
       return curr + '\n  ' + prev;
@@ -346,6 +346,7 @@ function calculateTree(root) {
   for (var i = 0; i < root.children.length; i++) {
     var child = root.children[i];
     rootLayout.push({
+      name: child.id !== '' ? child.id : 'INSERT_NAME_HERE',
       left: child.offsetLeft,
       top: child.offsetTop,
       width: child.offsetWidth,

tests/CSSLayoutAbsolutePositionTest.cpp

@@ -10,16 +10,16 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px; height: 100px;">
+ * <div id="absolute_layout_width_height_left_top" style="width: 100px; height: 100px;">
  * <div style="width:10px; height: 10px; position: absolute; left: 10px; top: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px;">
+ * <div id="absolute_layout_width_height_right_bottom" style="width: 100px; height: 100px;">
  * <div style="width:10px; height: 10px; position: absolute; right: 10px; bottom: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px;">
+ * <div id="absolute_layout_left_top_right_bottom" style="width: 100px; height: 100px;">
  * <div style="position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px;">
+ * <div id="absolute_layout_width_height_left_top_right_bottom" style="width: 100px; height: 100px;">
  * <div style="width:10px; height: 10px; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px;"></div>
  * </div>
  *

tests/CSSLayoutAlignContentTest.cpp

@@ -10,28 +10,28 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
+ * <div id="align_content_flex_start" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
+ * <div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: center;">
+ * <div id="align_content_center" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: center;">
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * <div style="width: 50px; height: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
+ * <div id="align_content_stretch" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
  * <div style="width: 50px;"></div>
  * <div style="width: 50px;"></div>
  * <div style="width: 50px;"></div>

tests/CSSLayoutAlignItemsTest.cpp

@@ -10,16 +10,16 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px; height: 100px;">
+ * <div id="align_items_stretch" style="width: 100px; height: 100px;">
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; align-items: center;">
+ * <div id="align_items_center" style="width: 100px; height: 100px; align-items: center;">
  * <div style="height: 10px; width: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; align-items: flex-start;">
+ * <div id="align_items_flex_start" style="width: 100px; height: 100px; align-items: flex-start;">
  * <div style="height: 10px; width: 10px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; align-items: flex-end;">
+ * <div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
  * <div style="height: 10px; width: 10px;"></div>
  * </div>
  *

tests/CSSLayoutAlignSelfTest.cpp

@@ -10,16 +10,16 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width:100px; height: 100px;">
+ * <div id="align_self_center" style="width:100px; height: 100px;">
  * <div style="height: 10px; width: 10px; align-self: center;"></div>
  * </div>
- * <div style="width:100px; height: 100px;">
+ * <div id="align_self_flex_end" style="width:100px; height: 100px;">
  * <div style="height: 10px; width: 10px; align-self: flex-end;"></div>
  * </div>
- * <div style="width:100px; height: 100px;">
+ * <div id="align_self_flex_start" style="width:100px; height: 100px;">
  * <div style="height: 10px; width: 10px; align-self: flex-start;"></div>
  * </div>
- * <div style="width:100px; height: 100px; align-items: flex-start;">
+ * <div id="align_self_flex_end_override_flex_start" style="width:100px; height: 100px; align-items: flex-start;">
  * <div style="height: 10px; width: 10px; align-self: flex-end;"></div>
  * </div>
  *

tests/CSSLayoutFlexDirectionTest.cpp

@@ -10,32 +10,32 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px">
+ * <div id="flex_direction_column_no_height" style="width: 100px">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="height: 100px; flex-direction: row;">
+ * <div id="flex_direction_row_no_width" style="height: 100px; flex-direction: row;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="height: 100px; width: 100px;">
+ * <div id="flex_direction_column" style="height: 100px; width: 100px;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="height: 100px; width: 100px; flex-direction: row;">
+ * <div id="flex_direction_row" style="height: 100px; width: 100px; flex-direction: row;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="height: 100px; width: 100px; flex-direction: column-reverse;">
+ * <div id="flex_direction_column_reverse" style="height: 100px; width: 100px; flex-direction: column-reverse;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="height: 100px; width: 100px; flex-direction: row-reverse;">
+ * <div id="flex_direction_row_reverse" style="height: 100px; width: 100px; flex-direction: row-reverse;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>

tests/CSSLayoutFlexTest.cpp

@@ -10,23 +10,23 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px; height: 100px;">
+ * <div id="flex_basis_flex_grow_column" style="width: 100px; height: 100px;">
  * <div style="flex-basis: 50px; flex-grow: 1;"></div>
  * <div style="flex-grow: 1;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-direction: row;">
+ * <div id="flex_basis_flex_grow_row" style="width: 100px; height: 100px; flex-direction: row;">
  * <div style="flex-basis: 50px; flex-grow: 1;"></div>
  * <div style="flex-grow: 1;"></div>
  * </div>
- * <div style="width: 100px; height: 100px;">
+ * <div id="flex_basis_flex_shrink_column" style="width: 100px; height: 100px;">
  * <div style="flex-basis: 100px; flex-shrink: 1;"></div>
  * <div style="flex-basis: 50px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-direction: row;">
+ * <div id="flex_basis_flex_shrink_row" style="width: 100px; height: 100px; flex-direction: row;">
  * <div style="flex-basis: 100px; flex-shrink: 1;"></div>
  * <div style="flex-basis: 50px;"></div>
  * </div>
- * <div style="width: 100px;">
+ * <div id="flex_basis_flex_grow_undefined_main" style="width: 100px;">
  * <div style="flex-basis: 100px; flex-grow: 1;"></div>
  * <div style="flex-basis: 50px;"></div>
  * </div>

tests/CSSLayoutFlexWrapTest.cpp

@@ -10,13 +10,13 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="height: 100px; flex-wrap: wrap">
+ * <div id="wrap_column" style="height: 100px; flex-wrap: wrap">
  * <div style="height: 30px; width: 30px;"></div>
  * <div style="height: 30px; width: 30px;"></div>
  * <div style="height: 30px; width: 30px;"></div>
  * <div style="height: 30px; width: 30px;"></div>
  * </div>
- * <div style="width: 100px; flex-direction: row; flex-wrap: wrap">
+ * <div id="wrap_row" style="width: 100px; flex-direction: row; flex-wrap: wrap">
  * <div style="height: 30px; width: 30px;"></div>
  * <div style="height: 30px; width: 30px;"></div>
  * <div style="height: 30px; width: 30px;"></div>

tests/CSSLayoutJustifyContentTest.cpp

@@ -10,52 +10,52 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
+ * <div id="justify_content_row_flex_start" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
+ * <div id="justify_content_row_flex_end" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
+ * <div id="justify_content_row_center" style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
+ * <div id="justify_content_row_space_between" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
+ * <div id="justify_content_row_space_around" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * <div style="width: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; justify-content: flex-start;">
+ * <div id="justify_content_column_flex_start" style="width: 102px; height: 102px; justify-content: flex-start;">
  * <div style="height: 10px;"></div>
  * <div style="heigth: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; justify-content: flex-end;">
+ * <div id="justify_content_column_flex_end" style="width: 102px; height: 102px; justify-content: flex-end;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; justify-content: center;">
+ * <div id="justify_content_column_center" style="width: 102px; height: 102px; justify-content: center;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; justify-content: space-between;">
+ * <div id="justify_content_column_space_between" style="width: 102px; height: 102px; justify-content: space-between;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * </div>
- * <div style="width: 102px; height: 102px; justify-content: space-around;">
+ * <div id="justify_content_column_space_around" style="width: 102px; height: 102px; justify-content: space-around;">
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>
  * <div style="height: 10px;"></div>

tests/CSSLayoutMinMaxDimensionTest.cpp

@@ -10,17 +10,17 @@
 /**
  * @Generated by gentest/gentest.sh with the following input
  *
- * <div style="width: 100px; height: 100px;">
+ * <div id="max_width" style="width: 100px; height: 100px;">
  * <div style="height: 10px; max-width: 50px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-direction: row;">
+ * <div id="max_height" style="width: 100px; height: 100px; flex-direction: row;">
  * <div style="width: 10px; max-height: 50px;"></div>
  * </div>
- * <div style="width: 100px; height: 100px;">
+ * <div id="min_height" style="width: 100px; height: 100px;">
  * <div style="flex-grow: 1; min-height: 60px;"></div>
  * <div style="flex-grow: 1;"></div>
  * </div>
- * <div style="width: 100px; height: 100px; flex-direction: row">
+ * <div id="min_width" style="width: 100px; height: 100px; flex-direction: row">
  * <div style="flex-grow: 1; min-width: 60px;"></div>
  * <div style="flex-grow: 1;"></div>
  * </div>