negative values and invalid gradient syntax handling

Author: intergalacticspacehighway

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

@@ -740,7 +740,7 @@ type RadialExtent =
   | 'closest-side'
   | 'farthest-corner'
   | 'farthest-side';
-type RadialGradientPosition =
+export type RadialGradientPosition =
   | {
       top: number | string,
       left: number | string,
@@ -757,15 +757,19 @@ type RadialGradientPosition =
       bottom: number | string,
       right: number | string,
     };
+
+export type RadialGradientShape = 'circle' | 'ellipse';
+export type RadialGradientSize =
+  | RadialExtent
+  | {
+      x: string | number,
+      y: string | number,
+    };
+
 type RadialGradientValue = {
   type: 'radialGradient',
-  shape: 'circle' | 'ellipse',
-  size:
-    | RadialExtent
-    | {
-        x: number | string,
-        y: number | string,
-      },
+  shape: RadialGradientShape,
+  size: RadialGradientSize,
   position: RadialGradientPosition,
   colorStops: $ReadOnlyArray<{
     color: ____ColorValue_Internal,

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

@@ -1129,4 +1129,19 @@ describe('processBackgroundImage', () => {
       {color: processColor('blue'), position: '100%'},
     ]);
   });
+
+  it('should not process invalid gradient syntax', () => {
+    const input =
+      'aoeusntial-gradient(red 0%, yellow 30%, green 60%, blue 100%)';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([]);
+  });
+
+  it('should not process negative radius in radial gradient syntax', () => {
+    const input = 'radial-gradient(circle -100px, red, blue)';
+    const input1 = 'radial-gradient(ellipse 100px -40px, red, blue)';
+    const result = processBackgroundImage(input);
+    const result1 = processBackgroundImage(input1);
+    expect(result).toEqual([]);
+  });
 });

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

@@ -11,7 +11,12 @@
 'use strict';
 
 import type {ProcessedColorValue} from './processColor';
-import type {BackgroundImageValue} from './StyleSheetTypes';
+import type {
+  BackgroundImageValue,
+  RadialGradientPosition,
+  RadialGradientSize,
+  RadialGradientShape,
+} from './StyleSheetTypes';
 const processColor = require('./processColor').default;
 
 // Linear Gradient
@@ -45,35 +50,7 @@ const DEFAULT_RADIAL_POSITION: RadialGradientPosition = {
   top: '50%',
   left: '50%',
 };
-type RadialExtent =
-  | 'closest-corner'
-  | 'closest-side'
-  | 'farthest-corner'
-  | 'farthest-side';
-type RadialGradientSize =
-  | RadialExtent
-  | {
-      x: string | number,
-      y: string | number,
-    };
-type RadialGradientShape = 'circle' | 'ellipse';
-type RadialGradientPosition =
-  | {
-      top: number | string,
-      left: number | string,
-    }
-  | {
-      top: number | string,
-      right: number | string,
-    }
-  | {
-      bottom: number | string,
-      right: number | string,
-    }
-  | {
-      bottom: number | string,
-      left: number | string,
-    };
+
 type RadialGradientBackgroundImage = {
   type: 'radialGradient',
   shape: RadialGradientShape,
@@ -273,24 +250,25 @@ function parseBackgroundImageCSSString(
   cssString: string,
 ): $ReadOnlyArray<ParsedBackgroundImageValue> {
   const gradients = [];
-  let match;
-  // matches one or more linear-gradient or radial-gradient functions in CSS
-  const gradientRegex =
-    /(linear|radial)-gradient\s*\(((?:\([^)]*\)|[^()])*)\)/gi;
-
-  while ((match = gradientRegex.exec(cssString))) {
-    const [, type, gradientContent] = match;
-    const isRadial = type.toLowerCase() === 'radial';
-
-    const gradient = isRadial
-      ? parseRadialGradientCSSString(gradientContent)
-      : parseLinearGradientCSSString(gradientContent);
-
-    if (gradient != null) {
-      gradients.push(gradient);
+  const bgImageStrings = splitGradients(cssString);
+
+  for (const bgImageString of bgImageStrings) {
+    const bgImage = bgImageString.toLowerCase();
+    const gradientRegex = /^(linear|radial)-gradient\(((?:\([^)]*\)|[^()])*)\)/;
+
+    const match = gradientRegex.exec(bgImage);
+    if (match) {
+      const [, type, gradientContent] = match;
+      const isRadial = type.toLowerCase() === 'radial';
+      const gradient = isRadial
+        ? parseRadialGradientCSSString(gradientContent)
+        : parseLinearGradientCSSString(gradientContent);
+
+      if (gradient != null) {
+        gradients.push(gradient);
+      }
     }
   }
-
   return gradients;
 }
 
@@ -312,6 +290,7 @@ function parseRadialGradientCSSString(
   let hasExplicitShape = false;
   const firstPartTokens = firstPartStr.split(/\s+/);
 
+  // firstPartTokens is the shape, size, and position
   while (firstPartTokens.length > 0) {
     let token = firstPartTokens.shift();
     if (token == null) {
@@ -333,7 +312,7 @@ function parseRadialGradientCSSString(
       hasShapeSizeOrPositionString = true;
     } else if (tokenTrimmed.endsWith('px') || tokenTrimmed.endsWith('%')) {
       let sizeX = getPositionFromCSSValue(tokenTrimmed);
-      if (sizeX == null) {
+      if (sizeX == null || sizeX < 0) {
         // If a size is invalid, return null and do not apply any gradient. Same as web.
         return null;
       }
@@ -347,7 +326,7 @@ function parseRadialGradientCSSString(
       tokenTrimmed = token.toLowerCase().trim();
       if (tokenTrimmed.endsWith('px') || tokenTrimmed.endsWith('%')) {
         const sizeY = getPositionFromCSSValue(tokenTrimmed);
-        if (sizeY == null) {
+        if (sizeY == null || sizeY < 0) {
           // If a size is invalid, return null and do not apply any gradient. Same as web.
           return null;
         }
@@ -801,3 +780,31 @@ function getPositionFromCSSValue(position: string) {
     return position;
   }
 }
+
+function splitGradients(input) {
+  const result = [];
+  let current = '';
+  let depth = 0;
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (char === '(') {
+      depth++;
+    } else if (char === ')') {
+      depth--;
+    } else if (char === ',' && depth === 0) {
+      result.push(current.trim());
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim() !== '') {
+    result.push(current.trim());
+  }
+
+  return result;
+}

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -7635,7 +7635,7 @@ type RadialExtent =
   | \\"closest-side\\"
   | \\"farthest-corner\\"
   | \\"farthest-side\\";
-type RadialGradientPosition =
+export type RadialGradientPosition =
   | {
       top: number | string,
       left: number | string,
@@ -7652,15 +7652,17 @@ type RadialGradientPosition =
       bottom: number | string,
       right: number | string,
     };
+export type RadialGradientShape = \\"circle\\" | \\"ellipse\\";
+export type RadialGradientSize =
+  | RadialExtent
+  | {
+      x: string | number,
+      y: string | number,
+    };
 type RadialGradientValue = {
   type: \\"radialGradient\\",
-  shape: \\"circle\\" | \\"ellipse\\",
-  size:
-    | RadialExtent
-    | {
-        x: number | string,
-        y: number | string,
-      },
+  shape: RadialGradientShape,
+  size: RadialGradientSize,
   position: RadialGradientPosition,
   colorStops: $ReadOnlyArray<{
     color: ____ColorValue_Internal,
@@ -8015,35 +8017,6 @@ type LinearGradientBackgroundImage = {
     position: ColorStopPosition,
   }>,
 };
-type RadialExtent =
-  | \\"closest-corner\\"
-  | \\"closest-side\\"
-  | \\"farthest-corner\\"
-  | \\"farthest-side\\";
-type RadialGradientSize =
-  | RadialExtent
-  | {
-      x: string | number,
-      y: string | number,
-    };
-type RadialGradientShape = \\"circle\\" | \\"ellipse\\";
-type RadialGradientPosition =
-  | {
-      top: number | string,
-      left: number | string,
-    }
-  | {
-      top: number | string,
-      right: number | string,
-    }
-  | {
-      bottom: number | string,
-      right: number | string,
-    }
-  | {
-      bottom: number | string,
-      left: number | string,
-    };
 type RadialGradientBackgroundImage = {
   type: \\"radialGradient\\",
   shape: RadialGradientShape,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt

@@ -233,10 +233,13 @@ internal class RadialGradient(
       }
     }
 
+    // max is used to handle 0 radius user input. Radius has to be a positive float
+    val radius = max(radiusX, 0.00001f)
+
     val shader = AndroidRadialGradient(
       centerX,
       centerY,
-      radiusX,
+      radius,
       colors,
       positions,
       Shader.TileMode.CLAMP