Rewrite gentest from in-browser JS to Node.js/TypeScript

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>