Support "align-content: space-evenly" (#1422)

Summary:
X-link: https://github.com/facebook/react-native/pull/41019

### Changes made
- Regenerated tests (as some aspect ratio tests seem to be out of date compared to the fixtures)
- Added SpaceEvenly variant to the "Align" enums (via enums.py)
- Implemented `align-content: space-evenly` alignment in CalculateLayout.cpp
- Added generated tests `align-content: space-evenly`
- Updated NumericBitfield test to account for the fact that the Align enum now requires more bits (this bit could do with being reviewed as I am not 100% certain that it's valid to just update the test like this).

### Changes not made
- Any attempt to improve the spec-compliance of content alignment in general (e.g. I think https://github.com/facebook/yoga/pull/1013 probably still needs to happen)

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

Reviewed By: yungsters

Differential Revision: D50305438

Pulled By: NickGerleman

fbshipit-source-id: ef9f6f14220a0db066bc30db8dd690a4a82a0b00

enums.py

@@ -29,6 +29,7 @@ ENUMS = {
         "Baseline",
         "SpaceBetween",
         "SpaceAround",
+        "SpaceEvenly",
     ],
     "PositionType": ["Static", "Relative", "Absolute"],
     "Display": ["Flex", "None"],

gentest/fixtures/YGAlignContentTest.html

@@ -1,4 +1,11 @@
-<div id="align_content_flex_start" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
+<!-- ALIGN CONTENT: FLEX-START -->
+
+<div id="align_content_flex_start_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-start;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_flex_start_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
@@ -6,6 +13,28 @@
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_flex_start_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_flex_start_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_flex_start_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</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>
@@ -22,7 +51,14 @@
   <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;">
+<!-- ALIGN CONTENT: FLEX-END -->
+
+<div id="align_content_flex_end_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-end;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_flex_end_wrap" style="width: 140px; height: 120px; 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>
@@ -30,6 +66,181 @@
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_flex_end_wrap_singleline" style="width: 140px; height: 120px; 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>
+
+<div id="align_content_flex_end_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_flex_end_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+
+<!-- ALIGN CONTENT: CENTER -->
+
+<div id="align_content_center_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: center;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_center_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_center_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_center_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_center_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<!-- ALIGN CONTENT: SPACE-BETWEEN -->
+
+<div id="align_content_space_between_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-between;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_between_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_space_between_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_between_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_space_between_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<!-- ALIGN CONTENT: SPACE-AROUND -->
+
+<div id="align_content_space_around_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-around;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_around_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_space_around_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_around_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_space_around_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+
+<!-- ALIGN CONTENT: SPACE-EVENLY -->
+
+<div id="align_content_space_evenly_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-evenly;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_evenly_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
+<div id="align_content_space_evenly_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_space_evenly_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+<div id="align_content_space_evenly_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
+  <div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px; gap: 10px;">
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+    <div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
+  </div>
+</div>
+
+
+<!-- ALIGN CONTENT: STRETCH -->
+
 <div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
   <div style="width: 50px;"></div>
   <div style="width: 50px;"></div>
@@ -38,22 +249,6 @@
   <div style="width: 50px;"></div>
 </div>
 
-<div id="align_content_spacebetween" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-</div>
-
-<div id="align_content_spacearound" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <div style="width: 50px; height: 10px;"></div>
-  <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>

gentest/gentest-cpp.js

@@ -91,6 +91,7 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignStretch: {value: 'YGAlignStretch'},
   YGAlignSpaceBetween: {value: 'YGAlignSpaceBetween'},
   YGAlignSpaceAround: {value: 'YGAlignSpaceAround'},
+  YGAlignSpaceEvenly: {value: 'YGAlignSpaceEvenly'},
   YGAlignBaseline: {value: 'YGAlignBaseline'},
 
   YGDirectionInherit: {value: 'YGDirectionInherit'},

gentest/gentest-java.js

@@ -135,6 +135,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignStretch: {value: 'YogaAlign.STRETCH'},
   YGAlignSpaceBetween: {value: 'YogaAlign.SPACE_BETWEEN'},
   YGAlignSpaceAround: {value: 'YogaAlign.SPACE_AROUND'},
+  YGAlignSpaceEvenly: {value: 'YogaAlign.SPACE_EVENLY'},
   YGAlignBaseline: {value: 'YogaAlign.BASELINE'},
 
   YGDirectionInherit: {value: 'YogaDirection.INHERIT'},

gentest/gentest-javascript.js

@@ -120,6 +120,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignStretch: {value: 'Align.Stretch'},
   YGAlignSpaceBetween: {value: 'Align.SpaceBetween'},
   YGAlignSpaceAround: {value: 'Align.SpaceAround'},
+  YGAlignSpaceEvenly: {value: 'Align.SpaceEvenly'},
   YGAlignBaseline: {value: 'Align.Baseline'},
 
   YGDirectionInherit: {value: 'Direction.Inherit'},

gentest/gentest.js

@@ -608,6 +608,8 @@ function alignValue(e, value) {
       return e.YGAlignSpaceBetween;
     case 'space-around':
       return e.YGAlignSpaceAround;
+    case 'space-evenly':
+      return e.YGAlignSpaceEvenly;
     case 'baseline':
       return e.YGAlignBaseline;
   }

gentest/gentest.rb

@@ -14,7 +14,7 @@ browser = Watir::Browser.new(:chrome, options: {
     "browser" => "ALL",
     "performance" => "ALL"
   },
-  args: ['--force-device-scale-factor=1', '--window-position=0,0']
+  args: ['--force-device-scale-factor=1', '--window-position=0,0', '--hide-scrollbars']
 })
 
 Dir.chdir(File.dirname($0))

java/com/facebook/yoga/YogaAlign.java

@@ -17,7 +17,8 @@ public enum YogaAlign {
   STRETCH(4),
   BASELINE(5),
   SPACE_BETWEEN(6),
-  SPACE_AROUND(7);
+  SPACE_AROUND(7),
+  SPACE_EVENLY(8);
 
   private final int mIntValue;
 
@@ -39,6 +40,7 @@ public enum YogaAlign {
       case 5: return BASELINE;
       case 6: return SPACE_BETWEEN;
       case 7: return SPACE_AROUND;
+      case 8: return SPACE_EVENLY;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

javascript/src/generated/YGEnums.ts

@@ -16,6 +16,7 @@ export enum Align {
   Baseline = 5,
   SpaceBetween = 6,
   SpaceAround = 7,
+  SpaceEvenly = 8,
 }
 
 export enum Dimension {
@@ -141,6 +142,7 @@ const constants = {
   ALIGN_BASELINE: Align.Baseline,
   ALIGN_SPACE_BETWEEN: Align.SpaceBetween,
   ALIGN_SPACE_AROUND: Align.SpaceAround,
+  ALIGN_SPACE_EVENLY: Align.SpaceEvenly,
   DIMENSION_WIDTH: Dimension.Width,
   DIMENSION_HEIGHT: Dimension.Height,
   DIRECTION_INHERIT: Direction.Inherit,

tests/NumericBitfieldTest.cpp

@@ -191,8 +191,8 @@ TEST(NumericBitfield, third_enum_can_be_set) {
 TEST(NumericBitfield, setting_values_does_not_spill_over) {
   uint32_t flags = 0;
   static constexpr size_t alignOffset = 0;
-  static constexpr size_t edgesOffset = 3;
-  static constexpr size_t boolOffset = 7;
+  static constexpr size_t edgesOffset = 4;
+  static constexpr size_t boolOffset = 8;
 
   uint32_t edge = 0xffffff;
   setEnumData<YGEdge>(flags, edgesOffset, (YGEdge)edge);

yoga/YGEnums.cpp

@@ -27,6 +27,8 @@ const char* YGAlignToString(const YGAlign value) {
       return "space-between";
     case YGAlignSpaceAround:
       return "space-around";
+    case YGAlignSpaceEvenly:
+      return "space-evenly";
   }
   return "unknown";
 }

yoga/YGEnums.h

@@ -21,7 +21,8 @@ YG_ENUM_SEQ_DECL(
     YGAlignStretch,
     YGAlignBaseline,
     YGAlignSpaceBetween,
-    YGAlignSpaceAround)
+    YGAlignSpaceAround,
+    YGAlignSpaceEvenly)
 
 YG_ENUM_SEQ_DECL(
     YGDimension,

yoga/algorithm/CalculateLayout.cpp

@@ -2036,6 +2036,18 @@ static void calculateLayoutImpl(
             currentLead += remainingAlignContentDim / 2;
           }
           break;
+        case Align::SpaceEvenly:
+          if (availableInnerCrossDim > totalLineCrossDim) {
+            currentLead +=
+                remainingAlignContentDim / static_cast<float>(lineCount + 1);
+            if (lineCount > 1) {
+              crossDimLead =
+                  remainingAlignContentDim / static_cast<float>(lineCount + 1);
+            }
+          } else {
+            currentLead += remainingAlignContentDim / 2;
+          }
+          break;
         case Align::SpaceBetween:
           if (availableInnerCrossDim > totalLineCrossDim && lineCount > 1) {
             crossDimLead =
@@ -2192,6 +2204,7 @@ static void calculateLayoutImpl(
               case Align::Auto:
               case Align::SpaceBetween:
               case Align::SpaceAround:
+              case Align::SpaceEvenly:
                 break;
             }
           }

yoga/enums/Align.h

@@ -24,16 +24,17 @@ enum class Align : uint8_t {
   Baseline = YGAlignBaseline,
   SpaceBetween = YGAlignSpaceBetween,
   SpaceAround = YGAlignSpaceAround,
+  SpaceEvenly = YGAlignSpaceEvenly,
 };
 
 template <>
 constexpr inline int32_t ordinalCount<Align>() {
-  return 8;
+  return 9;
 } 
 
 template <>
 constexpr inline int32_t bitCount<Align>() {
-  return 3;
+  return 4;
 } 
 
 constexpr inline Align scopedEnum(YGAlign unscoped) {