Add more tests to eventually test position: static

Summary:
Doing some test-driven-development to support this feature, so I will start by adding a ton of tests to ensure the nuance of position: static is captured in Yoga. Specifically I have a slew of tests to capture:

* Insets have no effect on static elements
* Insets are relative to the nearest non-static ancestor
* Percentage values for insets, padding, and margin of absolute children respect the correct dimension of the nearest non-static ancestor
  * Also added similar ones for static and relative children which should just respect their ancestor (static only because it is a flexbox by default)
  * This rule does NOT apply to border
* The containing block for absolute children is the padding box of their nearest non-static ancestor
* The containing block for static children is the content box of their parent (because all elements are flex containers in yoga, at least right now)

Reviewed By: NickGerleman

Differential Revision: D50475939

fbshipit-source-id: 7988ffc9bea3317875128dd1908d787b9b714a45

gentest/fixtures/YGStaticPositionTest.html

@@ -1,3 +1,326 @@
-<div id="static_position_insets_have_no_effect" data-disabled="true"
-    style="width: 100px; height: 100px; position: static; top: 50px; left: 50px;">
+<!-- The top level divs in each test are needed so that each div overlays each
+     other and the top measurement is accurate -->
+<div id="static_position_insets_have_no_effect_left_top" data-disabled="true">
+    <div style="width: 100px; height: 100px; position: static; top: 50px; left: 50px;">
+    </div>
+</div>
+
+<div id="static_position_insets_have_no_effect_right_bottom" data-disabled="true">
+    <div style="width: 100px; height: 100px; position: static; bottom: 50px; right: 50px;">
+    </div>
+</div>
+
+<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
+            <div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_deep" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
+            <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
+                <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
+                    <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
+                        <div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_width_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_width_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_width_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_height_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50%; width: 50px; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_height_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50%; width: 50px; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_height_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50%; width: 50px; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_left_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; left: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_left_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; left: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_left_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; left: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_right_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; right: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_right_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; right: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_right_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; right: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_top_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; top: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_top_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; top: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_top_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; top: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_bottom_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; bottom: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_bottom_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; bottom: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_bottom_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; bottom: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_margin_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; margin: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_margin_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; margin: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_margin_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; margin: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_padding_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; padding: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_padding_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; padding: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_padding_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; padding: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_border_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; border: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_border_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; border: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_border_percentage" data-disabled="true">
+    <div style="width: 200px; height: 200px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50px; border: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_containing_block_padding_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: absolute">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_containing_block_padding_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: relative">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_containing_block_padding_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:100px; width: 100px; position: static">
+            <div style="height: 50px; width: 50%; position: static">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="static_position_absolute_child_containing_block_content_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:50px; width: 50%; position: absolute">
+        </div>
+    </div>
+</div>
+
+<div id="static_position_relative_child_containing_block_content_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:50px; width: 50%; position: relative">
+        </div>
+    </div>
+</div>
+
+<div id="static_position_static_child_containing_block_content_box" data-disabled="true">
+    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
+        <div style="height:50px; width: 50%; position: static">
+        </div>
+    </div>
 </div>