Merge branch 'facebook:main' into extended_main

.github/actions/setup-js/action.yml

@@ -6,7 +6,7 @@ runs:
     - name: Setup Node environment
       uses: actions/setup-node@v3
       with:
-        node-version: 18.x
+        node-version: 20.x
         cache: yarn
         cache-dependency-path: yarn.lock
       env:

.github/workflows/validate-tests.yml

@@ -5,7 +5,6 @@ on:
   push:
     branches:
       - main
-      - 'release-*'
   workflow_dispatch:
 
 jobs:

gentest/fixtures/YGAbsolutePositionTest.html

@@ -132,6 +132,22 @@
   <div style="position:absolute; width:50px; height:50px;"></div>
 </div>
 
+<div id="absolute_layout_padding">
+  <div style="width:200px; height:200px; margin:10px; position: relative">
+    <div style="position:static; width:200px; height:200px; padding: 50px;">
+      <div style="position:absolute; width:50px; height:50px;"></div>
+    </div>
+  </div>
+</div>
+
+<div id="absolute_layout_border">
+  <div style="width:200px; height:200px; margin:10px; position: relative">
+    <div style="position:static; width:200px; height:200px; border: 10px solid black;">
+      <div style="position:absolute; width:50px; height:50px;"></div>
+    </div>
+  </div>
+</div>
+
 <div id="absolute_layout_column_reverse_margin_border"
   style="width:200px; height:200px; flex-direction: column-reverse;">
   <div

gentest/fixtures/YGFlexDirectionTest.html

@@ -400,3 +400,8 @@
     <div style="width: 10px;"></div>
   </div>
 </div>
+
+<div id="flex_direction_alternating_with_percent" style="height: 300px; width: 200px; flex-direction: column;">
+  <div style="height: 50%; width: 50%; left: 10%; top: 10%; flex-direction: row;">
+  </div>
+</div>

gentest/fixtures/YGGapTest.html

@@ -171,3 +171,72 @@
   <div style="height: 20px"></div>
   <div style="height: 30px"></div>
 </div>
+
+<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+  <div style="width: 100px; height: 100px; padding: 10px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
+  <div style="flex: 1;"></div>
+  <div style="flex: 1;"></div>
+  <div style="flex: 1;"></div>
+</div>
+
+<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
+  <div style="width: 10px;"></div>
+  <div style="flex: 1;"></div>
+  <div style="width: 10%;"></div>
+</div>
+
+<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width  -->
+<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>

gentest/fixtures/YGIntrinsicSizeTest.html

@@ -0,0 +1,221 @@
+<div id="contains_inner_text_long_word" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        LoremipsumdolorsitametconsecteturadipiscingelitSedeleifasdfettortoracauctorFuscerhoncusipsumtemporerosaliquamconsequatPraesentsoda
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_no_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_no_height_long_word_in_paragraph"
+    style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus
+        loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumlorem
+        Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width:100px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_no_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width: 50px; height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_max_width_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-width: 50px; max-height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+
+<div id="contains_inner_text_max_width" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-width:100px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_width_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;width:100px">
+        Lorem ipsum
+    </div>
+</div>
+
+<div id="contains_inner_text_fixed_height_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;height:100px">
+        Lorem ipsum
+    </div>
+</div>
+
+<div id="contains_inner_text_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
+    <div style="flex-direction:row;max-height:20px">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
+        volutpat
+        libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
+        fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
+        vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
+        vitae
+        finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
+        consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
+        tincidunt
+        finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
+        vulputate eleifasd lectus vel varius.
+        Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
+        in
+        faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
+        venenatis
+        turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
+        nunc
+        malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
+        lobortis.
+        Sed at consectetur ipsum.
+    </div>
+</div>