Fixup margin: auto and justification behavior for overflowed containe…

…rs (#1646)

Summary:

X-link: facebook/react-native#44069

Fixes #978

1. Don't allow auto margin spaces to become a negative length
2. Replicate fallback alignment behavior specified by box-alignment spec that we are using for align-content.

Reviewed By: joevilches

Differential Revision: D56091577

gentest/fixtures/YGJustifyContentTest.html

@@ -120,3 +120,57 @@
   <div style="width: 20px;"></div>
   <div style="width: 20px;"></div>
 </div>
+
+<div id="justify_content_overflow_row_flex_start" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_flex_end" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_center" style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_space_between" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_space_around" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_space_evenly" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-evenly;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_reverse_space_around" style="width: 102px; height: 102px; flex-direction: row-reverse; justify-content: space-around;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_reverse_space_evenly" style="width: 102px; height: 102px; flex-direction: row-reverse; justify-content: space-evenly;">
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>
+
+<div id="justify_content_overflow_row_space_evenly_auto_margin" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-evenly;">
+  <div style="width: 40px; margin-right: auto;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+</div>

gentest/fixtures/YGMarginTest.html

@@ -150,3 +150,8 @@
   <div style="flex: 1; margin-left:auto;"></div>
   <div style="width: 50px; height: 50px;"></div>
 </div>
+
+<div id="margin_auto_overflowing_container" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 150px; margin-bottom: auto;"></div>
+  <div style="width: 50px; height: 150px;"></div>
+</div>