Accept unitless zero stops and reject invalid layers in backgroundImage strings

Author: lazerg

packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js

@@ -353,6 +353,22 @@ describe('processBackgroundImage', () => {
     expect(result).toEqual([]);
   });
 
+  it('should process unitless zero color stop position', () => {
+    const input = 'linear-gradient(red 0, blue 100%)';
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: processColor('blue'), position: '100%'},
+    ]);
+  });
+
+  it('should return empty array if one of multiple gradients is invalid', () => {
+    const input =
+      'linear-gradient(red, blue), linear-gradient(notacolor, blue)';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([]);
+  });
+
   it('should process an array of style objects', () => {
     const input: ReadonlyArray<BackgroundImageValue> | string = [
       {

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

@@ -271,9 +271,11 @@ function parseBackgroundImageCSSString(
         ? parseRadialGradientCSSString(gradientContent)
         : parseLinearGradientCSSString(gradientContent);
 
-      if (gradient != null) {
-        gradients.push(gradient);
+      if (gradient == null) {
+        // If a gradient is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
       }
+      gradients.push(gradient);
     }
   }
   return gradients;
@@ -803,6 +805,10 @@ function getAngleInDegrees(angle?: string): ?number {
 }
 
 function getPositionFromCSSValue(position: string) {
+  if (position === '0') {
+    return 0;
+  }
+
   if (position.endsWith('px')) {
     return parseFloat(position);
   }