Make gentest faster and more reliable (#1889)

Summary:
Pull Request resolved: #1889

This change used Claude to make some major quality of life changes to `yarn gentest`. The bulk of the logic is now run in the driver, instead of the browser, and the scripts are typechecked. We rely on attributes, instead of declared style in DOM, so that we don't miss inputs the browser massages. We no longer preprocess the fixtures, to remap invalid CSS properties to valid ones. Generation now happens in parallel. We avoid outputting temp files to source root.

From there, I looked over major parts, and had it clean up a lot of things to taste, but I let it try to do a full rewrite for simplicity, using the original as reference.

It is about neutral in terms of line count

Reviewed By: sammy-SC

Differential Revision: D94005983

Author: NickGerleman

gentest/fixtures/YGAbsolutePositionTest.html

@@ -1,5 +1,5 @@
 <div id="absolute_layout_width_height_start_top" style="width: 100px; height: 100px;">
-  <div style="width:10px; height: 10px; position: absolute; start: 10px; top: 10px;"></div>
+  <div style="width:10px; height: 10px; position: absolute; inset-inline-start: 10px; top: 10px;"></div>
 </div>
 
 <div id="absolute_layout_width_height_left_auto_right" style="width: 100px; height: 100px">
@@ -15,20 +15,20 @@
 </div>
 
 <div id="absolute_layout_width_height_end_bottom" style="width: 100px; height: 100px;">
-  <div style="width:10px; height: 10px; position: absolute; end: 10px; bottom: 10px;"></div>
+  <div style="width:10px; height: 10px; position: absolute; inset-inline-end: 10px; bottom: 10px;"></div>
 </div>
 
 <div id="absolute_layout_start_top_end_bottom" style="width: 100px; height: 100px;">
-  <div style="position: absolute; start: 10px; top: 10px; end: 10px; bottom: 10px;"></div>
+  <div style="position: absolute; inset-inline-start: 10px; top: 10px; inset-inline-end: 10px; bottom: 10px;"></div>
 </div>
 
 <div id="absolute_layout_width_height_start_top_end_bottom" style="width: 100px; height: 100px;">
-  <div style="width:10px; height: 10px; position: absolute; start: 10px; top: 10px; end: 10px; bottom: 10px;"></div>
+  <div style="width:10px; height: 10px; position: absolute; inset-inline-start: 10px; top: 10px; inset-inline-end: 10px; bottom: 10px;"></div>
 </div>
 
 <div id="do_not_clamp_height_of_absolute_node_to_height_of_its_overflow_hidden_parent"
   style="height: 50px; width: 50px; overflow: hidden; flex-direction: row;">
-  <div style="position: absolute; start: 0px; top: 0px;">
+  <div style="position: absolute; inset-inline-start: 0px; top: 0px;">
     <div style="width: 100px; height: 100px;"></div>
   </div>
 </div>

gentest/fixtures/YGAndroidNewsFeed.html

@@ -2,7 +2,7 @@
   <div layout="width: 1080; height: 444; top: 0; left: 0;" style="flex-shrink: 0; " >
     <div layout="width: 1080; height: 444; top: 0; left: 0;" style="align-content: stretch; " >
       <div layout="width: 1080; height: 226; top: 0; left: 0;" style="align-content: stretch; " >
-        <div layout="width: 1044; height: 202; top: 24; left: 36;" style="flex-direction: row; align-items: flex-start; align-content: stretch; margin-top: 24px; margin-start: 36px; " >
+        <div layout="width: 1044; height: 202; top: 24; left: 36;" style="flex-direction: row; align-items: flex-start; align-content: stretch; margin-top: 24px; margin-inline-start: 36px; " >
           <div layout="width: 120; height: 120; top: 0; left: 0;" style="flex-direction: row; align-content: stretch; flex-shrink: 0; " >
             <div layout="width: 120; height: 120; top: 0; left: 0;" style="align-content: stretch; flex-shrink: 0; width: 120px; height: 120px; " has-custom-measure="true"></div>
           </div>
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div layout="width: 1080; height: 218; top: 226; left: 0;" style="align-content: stretch; " >
-        <div layout="width: 906; height: 194; top: 24; left: 174;" style="flex-direction: row; align-items: flex-start; align-content: stretch; margin-top: 24px; margin-start: 174px; " >
+        <div layout="width: 906; height: 194; top: 24; left: 174;" style="flex-direction: row; align-items: flex-start; align-content: stretch; margin-top: 24px; margin-inline-start: 174px; " >
           <div layout="width: 72; height: 72; top: 12; left: 0;" style="flex-direction: row; align-content: stretch; flex-shrink: 0; " >
             <div layout="width: 72; height: 72; top: 0; left: 0;" style="align-content: stretch; flex-shrink: 0; width: 72px; height: 72px; " has-custom-measure="true"></div>
           </div>

gentest/fixtures/YGBorderTest.html

@@ -13,6 +13,6 @@
   <div style="height: 10px;"></div>
 </div>
 
-<div id="border_center_child" style="width: 100px; height: 100px; border-start-width: 10px; border-top-width: 10; border-end-width: 20px; border-bottom-width: 20px; align-items: center; justify-content: center;">
+<div id="border_center_child" style="width: 100px; height: 100px; border-inline-start-width: 10px; border-top-width: 10; border-inline-end-width: 20px; border-bottom-width: 20px; align-items: center; justify-content: center;">
   <div style="height: 10px; width: 10px;"></div>
 </div>

gentest/fixtures/YGBoxSizingTest.html

@@ -220,33 +220,33 @@
 </div>
 
 <div id="box_sizing_content_box_padding_start"
-  style="width: 100px; height: 100px; padding-start: 5px; box-sizing: content-box">
+  style="width: 100px; height: 100px; padding-inline-start: 5px; box-sizing: content-box">
 </div>
 
 <div id="box_sizing_border_box_padding_start"
-  style="width: 100px; height: 100px; padding-start: 5px; box-sizing: border-box">
+  style="width: 100px; height: 100px; padding-inline-start: 5px; box-sizing: border-box">
 </div>
 
 <div id="box_sizing_content_box_padding_end"
-  style="width: 100px; height: 100px; padding-end: 5px; box-sizing: content-box">
+  style="width: 100px; height: 100px; padding-inline-end: 5px; box-sizing: content-box">
 </div>
 
 <div id="box_sizing_border_box_padding_end"
-  style="width: 100px; height: 100px; padding-end: 5px; box-sizing: border-box">
+  style="width: 100px; height: 100px; padding-inline-end: 5px; box-sizing: border-box">
 </div>
 
 <div id="box_sizing_content_box_border_start"
-  style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: content-box">
+  style="width: 100px; height: 100px; border-inline-start-width: 5px; box-sizing: content-box">
 </div>
 
 <div id="box_sizing_border_box_border_start"
-  style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: border-box">
+  style="width: 100px; height: 100px; border-inline-start-width: 5px; box-sizing: border-box">
 </div>
 
 <div id="box_sizing_content_box_border_end"
-  style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: content-box">
+  style="width: 100px; height: 100px; border-inline-end-width: 5px; box-sizing: content-box">
 </div>
 
 <div id="box_sizing_border_box_border_end"
-  style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: border-box">
+  style="width: 100px; height: 100px; border-inline-end-width: 5px; box-sizing: border-box">
 </div>

gentest/fixtures/YGFlexDirectionTest.html

@@ -41,9 +41,9 @@
   <div style="width: 10px;"></div>
 </div>
 
-<!-- gentest.rb will swap margin-start to margin-left. This is needed to use YGEdgeStart instead of YGEdgeLeft in the generated tests -->
+<!-- margin-inline-start maps to YGEdgeStart in the generated tests -->
 <div id="flex_direction_row_reverse_margin_start"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-start: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-inline-start: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -57,7 +57,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_margin_end"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-end: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; margin-inline-end: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -85,7 +85,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_padding_start"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-start: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-inline-start: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -99,7 +99,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_padding_end"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-end: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; padding-inline-end: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -127,7 +127,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_border_start"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; border-start-width: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; border-inline-start-width: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -141,7 +141,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_border_end"
-  style="height: 100px; width: 100px; flex-direction: row-reverse; border-end-width: 100px;">
+  style="height: 100px; width: 100px; flex-direction: row-reverse; border-inline-end-width: 100px;">
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
   <div style="width: 10px;"></div>
@@ -170,7 +170,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_pos_start" style="height: 100px; width: 100px;">
-  <div style="height: 100px; width: 100px; flex-direction: row-reverse; start: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; inset-inline-start: 100px;">
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
@@ -186,7 +186,7 @@
 </div>
 
 <div id="flex_direction_row_reverse_pos_end" style="height: 100px; width: 100px;">
-  <div style="height: 100px; width: 100px; flex-direction: row-reverse; end: 100px;">
+  <div style="height: 100px; width: 100px; flex-direction: row-reverse; inset-inline-end: 100px;">
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
@@ -243,15 +243,15 @@
 
 <div id="flex_direction_row_reverse_inner_pos_start" data-disabled="true" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; start: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; inset-inline-start: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
 </div>
 
 <div id="flex_direction_row_reverse_inner_pos_end" data-disabled="true" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; end: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; inset-inline-end: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
@@ -291,15 +291,15 @@
 
 <div id="flex_direction_row_reverse_inner_marign_start" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; margin-start: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; margin-inline-start: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
 </div>
 
 <div id="flex_direction_row_reverse_inner_margin_end" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; margin-end: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; margin-inline-end: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
@@ -339,15 +339,15 @@
 
 <div id="flex_direction_row_reverse_inner_border_start" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; border-start: 10px solid black"></div>
+    <div style="width: 10px; height: 10px; position: absolute; border-inline-start: 10px solid black"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
 </div>
 
 <div id="flex_direction_row_reverse_inner_border_end" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; border-end: 10px solid black"></div>
+    <div style="width: 10px; height: 10px; position: absolute; border-inline-end: 10px solid black"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
@@ -387,15 +387,15 @@
 
 <div id="flex_direction_row_reverse_inner_padding_start" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; padding-start: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; padding-inline-start: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>
 </div>
 
 <div id="flex_direction_row_reverse_inner_padding_end" style="height: 100px; width: 100px;">
   <div style="height: 100px; width: 100px; flex-direction: row-reverse; ">
-    <div style="width: 10px; height: 10px; position: absolute; padding-end: 10px"></div>
+    <div style="width: 10px; height: 10px; position: absolute; padding-inline-end: 10px"></div>
     <div style="width: 10px;"></div>
     <div style="width: 10px;"></div>
   </div>

gentest/fixtures/YGFlexWrapTest.html

@@ -1,4 +1,4 @@
-<div id="wrap_column" style="height: 100px; flex-wrap: wrap">
+<div data-disabled="true" 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>

gentest/fixtures/YGMarginTest.html

@@ -1,21 +1,21 @@
 <div id="margin_start" style="width: 100px; height: 100px; flex-direction: row;">
-  <div style="width: 10px; margin-start: 10px;"></div>
+  <div style="width: 10px; margin-inline-start: 10px;"></div>
 </div>
 
 <div id="margin_top" style="width: 100px; height: 100px;">
   <div style="height: 10px; margin-top: 10px;"></div>
 </div>
 
 <div id="margin_end" style="width: 100px; height: 100px; flex-direction: row; justify-content: flex-end;">
-  <div style="width: 10px; margin-end: 10px;"></div>
+  <div style="width: 10px; margin-inline-end: 10px;"></div>
 </div>
 
 <div id="margin_bottom" style="width: 100px; height: 100px; justify-content: flex-end;">
   <div style="height: 10px; margin-bottom: 10px;"></div>
 </div>
 
 <div id="margin_and_flex_row" style="width: 100px; height: 100px; flex-direction: row;">
-  <div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
+  <div style="margin-inline-start: 10px; margin-inline-end: 10px; flex-grow: 1;"></div>
 </div>
 
 <div id="margin_and_flex_column" style="width: 100px; height: 100px;">
@@ -27,11 +27,11 @@
 </div>
 
 <div id="margin_and_stretch_column" style="width: 100px; height: 100px;">
-  <div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
+  <div style="margin-inline-start: 10px; margin-inline-end: 10px; flex-grow: 1;"></div>
 </div>
 
 <div id="margin_with_sibling_row" style="width: 100px; height: 100px; flex-direction: row;">
-  <div style="margin-end: 10px; flex-grow: 1;"></div>
+  <div style="margin-inline-end: 10px; flex-grow: 1;"></div>
   <div style="flex-grow: 1;"></div>
 </div>
 
@@ -83,12 +83,12 @@
 </div>
 
 <div id="margin_auto_start_and_end_column" style="width: 200px; height: 200px; align-items: center; flex-direction: row;">
-  <div style="width: 50px; height: 50px; margin-start: auto; margin-end: auto;"></div>
+  <div style="width: 50px; height: 50px; margin-inline-start: auto; margin-inline-end: auto;"></div>
   <div style="width: 50px; height: 50px;"></div>
 </div>
 
 <div id="margin_auto_start_and_end" style="width: 200px; height: 200px; ">
-  <div style="width: 50px; height: 50px; margin-start: auto; margin-end: auto;"></div>
+  <div style="width: 50px; height: 50px; margin-inline-start: auto; margin-inline-end: auto;"></div>
   <div style="width: 50px; height: 50px;"></div>
 </div>
 

gentest/fixtures/YGPaddingTest.html

@@ -14,7 +14,7 @@
 </div>
 
 <div id="padding_center_child"
-  style="width: 100px; height: 100px; padding-start: 10px; padding-top: 10; padding-end: 20px; padding-bottom: 20px; align-items: center; justify-content: center;">
+  style="width: 100px; height: 100px; padding-inline-start: 10px; padding-top: 10; padding-inline-end: 20px; padding-bottom: 20px; align-items: center; justify-content: center;">
   <div style="height: 10px; width: 10px;"></div>
 </div>
 
@@ -24,6 +24,6 @@
 </div>
 
 <div id="physical_and_relative_edge_defined"
-  style="width: 200px; height: 200px; padding-left: 20px; padding-end: 50px;">
+  style="width: 200px; height: 200px; padding-left: 20px; padding-inline-end: 50px;">
   <div style="width: 100%; height: 50px;"></div>
 </div>

gentest/fixtures/YGStaticPositionTest.html

@@ -432,7 +432,7 @@
         <div
             style="height:200px; width: 200px; position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px">
             <div
-                style="height: 63%; width: 41%; position: absolute; start: 12px; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
+                style="height: 63%; width: 41%; position: absolute; inset-inline-start: 12px; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
             </div>
         </div>
     </div>
@@ -444,7 +444,7 @@
         <div
             style="height:200px; width: 200px; position: static; margin: 6px 3px 9px 8px; border-width: 10px 2px 1px 8px; padding: 7px 9px 4px 1px">
             <div
-                style="height: 63%; width: 41%; position: absolute; end: 4px; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
+                style="height: 63%; width: 41%; position: absolute; inset-inline-end: 4px; margin: 12px 4px 7px 9px; border-width: 1px 5px 9px 2px; padding: 3px 8px 10px 5px">
             </div>
         </div>
     </div>