Reject percentage radius for circle radial gradients

Per the CSS spec (css-images-3, <radial-size>), a circle's explicit
radius must be a <length> - percentages are only valid for ellipses.
Browsers reject the whole declaration for values such as
radial-gradient(circle 50%, red, blue), while React Native accepted
them and rendered an arbitrary interpretation (max of both resolved
axes), so the same style silently diverged between native and web.

processBackgroundImage now returns no gradient for a circle (explicit
or inferred from a single size) whose size is a percentage, matching
web behavior. Ellipses with percentage sizes are unaffected.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Titozzz

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

@@ -986,6 +986,23 @@ describe('processBackgroundImage', () => {
     expect(result[0].shape).toEqual('ellipse');
   });
 
+  it('should reject a circle with a percentage radius', () => {
+    const input = 'radial-gradient(circle 50%, red, blue)';
+    expect(processBackgroundImage(input)).toEqual([]);
+  });
+
+  it('should reject an inferred circle with a percentage radius', () => {
+    const input = 'radial-gradient(50%, red, blue)';
+    expect(processBackgroundImage(input)).toEqual([]);
+  });
+
+  it('should allow percentage sizes for ellipses', () => {
+    const input = 'radial-gradient(50% 20%, red, blue)';
+    const result = processBackgroundImage(input);
+    expect(result[0].shape).toEqual('ellipse');
+    expect(result[0].size).toEqual({x: '50%', y: '20%'});
+  });
+
   it('should handle radial gradient with explicit shape with size', () => {
     const input = 'radial-gradient(circle 100px at center, red, blue 80%)';
     const result = processBackgroundImage(input);

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

@@ -567,6 +567,15 @@ function parseRadialGradientCSSString(
       // If a single size is explicitly set and the shape is an ellipse, return null and do not apply any gradient. Same as web.
       return null;
     }
+
+    if (
+      shape === 'circle' &&
+      typeof size === 'object' &&
+      (typeof size.x === 'string' || typeof size.y === 'string')
+    ) {
+      // A circle radius must be a <length>. Percentages are only valid for ellipses, so return null and do not apply any gradient. Same as web.
+      return null;
+    }
   }
 
   const colorStops = parseColorStopsCSSString(remainingParts);