Add text based intrinsic sizing tests (#1759)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1759

We just have block based tests right now. Intrinsic sizing is commonly used with text so lets add a few there.

Reviewed By: NickGerleman

Differential Revision: D66662940

fbshipit-source-id: f8b91419c89d22d79a91d3bd8c7da70429c827fb

gentest/fixtures/YGIntrinsicSizeTest.html

@@ -229,7 +229,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_width" style="width: 90px;">
     <div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -240,7 +240,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_width" style="width: 500px; position: relative;">
+<div id="stretch_width" style="width: 500px;">
     <div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -260,7 +260,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_height" style="height: 90px; ">
     <div style="height: fit-content; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -271,7 +271,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_height" style="height: 500px;">
     <div style="height: -webkit-fill-available; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -291,7 +291,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px;">
     <div style="flex-basis: fit-content; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -302,7 +302,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_flex_basis_column" style="height: 500px; position: relative;">
+<div id="stretch_flex_basis_column" style="height: 500px;">
     <div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -313,7 +313,7 @@
     </div>
 </div>
 
-<div id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
     <div style="width: 50px; height: 50px;">
     </div>
     <div style="width: 100px; height: 500px;">
@@ -322,7 +322,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px;">
     <div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -333,7 +333,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px;">
     <div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -344,7 +344,8 @@
     </div>
 </div>
 
-<div data-disabled="true" id="max_content_max_width" style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_max_width"
+    style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
     <div style="width: 50px; height: 50px;">
     </div>
     <div style="width: 100px; height: 50px;">
@@ -353,7 +354,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_max_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_max_width" style="width: 90px;">
     <div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -364,7 +365,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_max_width" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_max_width" style="width: 500px;">
     <div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -375,7 +376,8 @@
     </div>
 </div>
 
-<div data-disabled="true" id="max_content_min_width" style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
+<div data-disabled="true" id="max_content_min_width"
+    style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
     <div style="width: 50px; height: 50px;">
     </div>
     <div style="width: 100px; height: 50px;">
@@ -384,7 +386,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_min_width" style="width: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_min_width" style="width: 90px;">
     <div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -395,7 +397,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_min_width" style="width: 500px; position: relative;">
+<div data-disabled="true" id="stretch_min_width" style="width: 500px;">
     <div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -415,7 +417,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_max_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_max_height" style="height: 90px;">
     <div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -426,7 +428,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_max_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_max_height" style="height: 500px;">
     <div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -446,7 +448,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="fit_content_min_height" style="height: 90px; position: relative;">
+<div data-disabled="true" id="fit_content_min_height" style="height: 90px;">
     <div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -457,7 +459,7 @@
     </div>
 </div>
 
-<div data-disabled="true" id="stretch_min_height" style="height: 500px; position: relative;">
+<div data-disabled="true" id="stretch_min_height" style="height: 500px;">
     <div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
         <div style="width: 50px; height: 50px;">
         </div>
@@ -467,3 +469,75 @@
         </div>
     </div>
 </div>
+
+<div data-disabled="true" id="text_max_content_width" style="width: 200px">
+    <div style="width: max-content;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_width" style="width: 200px">
+    <div style="width: -webkit-fill-available;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_fit_content_width" style="width: 200px">
+    <div style="width: fit-content;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_max_content_min_width" style="width: 200px">
+    <div style="min-width: max-content; width: 200px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_min_width" style="width: 200px">
+    <div style="min-width: -webkit-fill-available; width: 100px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" data-disabled="true" id="text_fit_content_min_width" style="width: 200px">
+    <div style="min-width: fit-content; width: 300px">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_max_content_max_width" style="width: 200px">
+    <div style="max-width: max-content; width: 2000px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_stretch_max_width" style="width: 200px">
+    <div style="max-width: -webkit-fill-available; width: 300px;">
+        <div style="flex-direction:row;">
+            Lorem ipsum dolor sit amet
+        </div>
+    </div>
+</div>
+
+<div data-disabled="true" id="text_fit_content_max_width" style="width: 200px">
+    <div style="max-width: fit-content; width: 1000px">
+        <div style="flex-direction:row;">
+            Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
+        </div>
+    </div>
+</div>