Add tests for cycles with percentage dimensions (#1530)

Summary:
Pull Request resolved: #1530

Yoga has a shortcut where if a min dimension and max dimension are the same, the value acts as a definite length.

I was curious how browsers handled this.

CSS 2.1 said:
> If the containing block's width depends on this element's width, then the resulting layout is undefined

This is superceded in the CSS box sizing spec. https://www.w3.org/TR/css-sizing-3/#sizing-values

> If, in a particular axis, the containing block’s size depends on the box’s size, see the relevant layout module for special rules on how to resolve percentages. Negative values are invalid.

And later:
https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution

> Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially:

> If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value. For example, given a box with width: calc(20px + 50%), its max-content contribution is calculated as if its width were auto. (The percentage is honored as usual, however, during the actual sizing of the box itself; see below.)

> Otherwise, the percentage is resolved against the containing block’s size. (The containing block’s size is not re-resolved based on the resulting size of the box; the contents might thus overflow or underflow the containing block).

So, for the purpose of sizing the parent, the child sized using a percentage does not contribute, but we should be sizing children based on that size.

Yoga does not really work like this right now, but gets the answer right answer for half of these tests.

Reviewed By: yungsters

Differential Revision: D52251601

fbshipit-source-id: 4978b90723130283b00e87bbf49795a4d209174c

gentest/fixtures/YGPercentageTest.html

@@ -109,3 +109,41 @@
     <div style="width: 100%;"></div>
   </div>
 </div>
+
+<div id="percent_of_minmax_main" style="flex-direction: row; min-width: 60px; max-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_min_main" data-disabled="true" style="flex-direction: row; min-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_min_main_multiple" data-disabled="true" style="flex-direction: row; min-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px;"></div>
+  <div style="width: 50%; height: 20px;"></div>
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_max_main" data-disabled="true" style="flex-direction: row; max-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_minmax_cross_stretched" style="flex-direction: column; min-width: 60px; max-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_absolute_of_minmax_cross_stretched" style="flex-direction: column; min-width: 60px; max-width: 60px; height: 50px;">
+  <div style="width: 50%; height: 20px; position: absolute;"></div>
+</div>
+
+<div id="percent_of_minmax_cross_unstretched" style="flex-direction: column; min-width: 60px; max-width: 60px; height: 50px; align-items: flex-start;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_min_cross_unstretched" data-disabled="true" style="flex-direction: column; min-width: 60px; height: 50px; align-items: flex-start;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>
+
+<div id="percent_of_max_cross_unstretched" style="flex-direction: column; max-width: 60px; height: 50px; align-items: flex-start;">
+  <div style="width: 50%; height: 20px;"></div>
+</div>