add more tests in processbackgroundimage

Author: intergalacticspacehighway

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

@@ -727,4 +727,124 @@ describe('processBackgroundImage', () => {
       {color: processColor('blue'), position: 1},
     ]);
   });
+
+  it('should return empty array for invalid transition hints', () => {
+    let result = processBackgroundImage('linear-gradient(red, 40, blue)');
+    expect(result).toEqual([]);
+
+    result = processBackgroundImage('linear-gradient(red, 40px, blue)');
+    expect(result).toEqual([]);
+
+    // Multiple hints in a row
+    result = processBackgroundImage('linear-gradient(red, 20%, 40%, blue)');
+    expect(result).toEqual([]);
+
+    // Invalid object syntax
+    result = processBackgroundImage([
+      {
+        type: 'linearGradient',
+        colorStops: [{color: 'red'}, {positions: ['40']}, {color: 'blue'}],
+      },
+    ]);
+    expect(result).toEqual([]);
+  });
+
+  it('should process complex gradients with multiple transitioon hints', () => {
+    const input = 'linear-gradient(red, 20%, blue, 60%, green, 80%, yellow)';
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.2},
+      {color: processColor('blue'), position: 0.4},
+      {color: null, position: 0.6},
+      {color: processColor('green'), position: 0.7},
+      {color: null, position: 0.8},
+      {color: processColor('yellow'), position: 1},
+    ]);
+  });
+
+  it('should process object syntax with multiple hints', () => {
+    const input = [
+      {
+        type: 'linearGradient',
+        direction: 'to right',
+        colorStops: [
+          {color: 'red'},
+          {positions: ['20%']},
+          {color: 'blue'},
+          {positions: ['60%']},
+          {color: 'green'},
+          {positions: ['80%']},
+          {color: 'yellow'},
+        ],
+      },
+    ];
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.2},
+      {color: processColor('blue'), position: 0.4},
+      {color: null, position: 0.6},
+      {color: processColor('green'), position: 0.7},
+      {color: null, position: 0.8},
+      {color: processColor('yellow'), position: 1},
+    ]);
+  });
+
+  it('should process hints with explicit color stops', () => {
+    const input = 'linear-gradient(red 0%, 25%, blue 50%, 75%, green 100%)';
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.25},
+      {color: processColor('blue'), position: 0.5},
+      {color: null, position: 0.75},
+      {color: processColor('green'), position: 1},
+    ]);
+  });
+
+  it('should handle very complex gradients', () => {
+    const input = `linear-gradient(
+      red 0%,
+      20% ,
+      blue 30%,
+      45%,
+      green 50%,
+      65%,
+      yellow 70%  ,
+      85%,
+      purple 100%
+    )`;
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.2},
+      {color: processColor('blue'), position: 0.3},
+      {color: null, position: 0.45},
+      {color: processColor('green'), position: 0.5},
+      {color: null, position: 0.65},
+      {color: processColor('yellow'), position: 0.7},
+      {color: null, position: 0.85},
+      {color: processColor('purple'), position: 1},
+    ]);
+  });
+
+  it('should handle multiple gradients with hints', () => {
+    const input = `
+      linear-gradient(red, 30%, blue),
+      linear-gradient(to right, green, 60%, yellow)
+    `;
+    const result = processBackgroundImage(input);
+    expect(result).toHaveLength(2);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: null, position: 0.3},
+      {color: processColor('blue'), position: 1},
+    ]);
+    expect(result[1].colorStops).toEqual([
+      {color: processColor('green'), position: 0},
+      {color: null, position: 0.6},
+      {color: processColor('yellow'), position: 1},
+    ]);
+  });
 });

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

@@ -22,6 +22,7 @@ type LinearGradientDirection =
   | {type: 'angle', value: number}
   | {type: 'keyword', value: string};
 
+// null color stops indicate that the transition hint syntax is used. e.g. red, 20%, blue
 type ColorStopColor = ProcessedColorValue | null;
 
 type ParsedGradientValue = {
@@ -158,13 +159,6 @@ function parseCSSLinearGradient(
     let direction: LinearGradientDirection = DEFAULT_DIRECTION;
     const trimmedDirection = parts[0].trim().toLowerCase();
 
-    // matches individual color stops in a gradient function
-    // supports various color formats: named colors, hex colors, rgb(a), and hsl(a)
-    // e.g. "red 20%", "blue 50%", "rgba(0, 0, 0, 0.5) 30% 50%"
-    // TODO: does not support color hint syntax yet. It is WIP.
-    const colorStopRegex =
-      /\s*((?:(?:rgba?|hsla?)\s*\([^)]+\))|#[0-9a-fA-F]+|[a-zA-Z]+)(?:\s+(-?[0-9.]+%?)(?:\s+(-?[0-9.]+%?))?)?\s*/gi;
-
     if (ANGLE_UNIT_REGEX.test(trimmedDirection)) {
       const parsedAngle = getAngleInDegrees(trimmedDirection);
       if (parsedAngle != null) {
@@ -186,15 +180,13 @@ function parseCSSLinearGradient(
         // If a direction is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
-    } else if (!colorStopRegex.test(trimmedDirection)) {
-      // If first part is not an angle/direction or a color stop, return an empty array and do not apply any gradient. Same as web.
-      return [];
     }
 
     const colorStopsString = parts.join(',');
     const colorStops = [];
     // split by comma, but not if it's inside a parentheses. e.g. red, rgba(0, 0, 0, 0.5), green => ["red", "rgba(0, 0, 0, 0.5)", "green"]
     const stops = colorStopsString.split(/,(?![^(]*\))/);
+    let lastStop = null;
     for (const stop of stops) {
       const trimmedStop = stop.trim().toLowerCase();
       // Match function like pattern or single words
@@ -250,6 +242,14 @@ function parseCSSLinearGradient(
       // Case 4: [position] => transition hint syntax
       else if (colorStopParts.length === 1) {
         if (colorStopParts[0].endsWith('%')) {
+          if (
+            lastStop != null &&
+            lastStop.length === 1 &&
+            lastStop[0].endsWith('%')
+          ) {
+            // If the last stop is a transition hint syntax, return an empty array and do not apply any gradient. Same as web.
+            return [];
+          }
           colorStops.push({
             color: null,
             position: parseFloat(colorStopParts[0]) / 100,
@@ -269,6 +269,7 @@ function parseCSSLinearGradient(
         // If a color stop is invalid, return an empty array and do not apply any gradient. Same as web.
         return [];
       }
+      lastStop = colorStopParts;
     }
 
     const fixedColorStops = getFixedColorStops(colorStops);