Fix align-content strech with multiple lines

Summary: This is an update of facebook/yoga#368 which was reverted. It fixes support for align-content: strech with multiple lines. The problem with the last attempt at solving this was that align-items:stretch was interfering. We handle this now by detecting when the flex basis of the children hints at them overflowing. This is not 100% correct as the size of the items could change when remeasuring but it will work in 99% of cases.

Reviewed By: astreet

Differential Revision: D4551234

fbshipit-source-id: 2964f19cf415991dc55dfa2caa4868cb00c56bd0

gentest/fixtures/YGAlignContentTest.html

@@ -6,15 +6,23 @@
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
-<div id="align_content_flex_end" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
+<div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
+  <div style="width: 50px;"></div>
   <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px;"></div>
   <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px;"></div>
 </div>
 
-<div id="align_content_center" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: center;">
+<div id="align_content_flex_start_with_flex" style="width: 100px; height: 120px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
+  <div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
+  <div style="width: 50px; flex: 1; height: 10px; flex-shrink: 0;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; flex: 1;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
@@ -45,3 +53,92 @@
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
 </div>
+
+<div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_children" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;">
+    <div style="flex: 1;"></div>
+  </div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_flex" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; flex: 1;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; flex: 1;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_flex_no_shrink" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; flex: 1;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_margin" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; margin: 10px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; margin: 10px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_padding" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; padding: 10px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; padding: 10px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_single_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_fixed_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; height: 60px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_max_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; max-height: 20px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_row_with_min_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px; min-height: 80px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>
+
+<div id="align_content_stretch_column" style="width: 100px; height: 150px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
+  <div style="height: 50px;">
+    <div style="flex: 1;"></div>
+  </div>
+  <div style="height: 50px; flex: 1;"></div>
+  <div style="height: 50px;"></div>
+  <div style="height: 50px;"></div>
+  <div style="height: 50px;"></div>
+</div>

gentest/fixtures/YGFlexWrapTest.html

@@ -30,3 +30,17 @@
   <div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
   <div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
 </div>
+
+<div id="flex_wrap_wrap_to_child_height">
+  <div style="flex-direction: row; align-items: flex-start; flex-wrap: wrap;">
+    <div style="width: 100px;">
+      <div style="height: 100px; width: 100px;"></div>
+    </div>
+  </div>
+  <div style="width: 100px; height: 100px;"></div>
+</div>
+
+<div id="flex_wrap_align_stretch_fits_one_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row;">
+  <div style="width: 50px;"></div>
+  <div style="width: 50px;"></div>
+</div>