Add Fantom test for backgroundImage parsing

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -146,8 +146,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Linear Gradient
    */
-  experimental_backgroundImage: {process: processBackgroundImage},
-
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? true
+    : {process: processBackgroundImage},
   /**
    * View
    */

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
+ * @fantom_flags enableNativeCSSParsing:*
  * @format
  */
 
@@ -229,6 +230,56 @@ describe('<View>', () => {
           });
         });
       });
+
+      describe('background-image', () => {
+        it('it parses CSS and object syntax', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <>
+                <View
+                  style={{
+                    experimental_backgroundImage:
+                      'radial-gradient(#e66465, #9198e5)',
+                  }}
+                />
+                <View
+                  style={{
+                    experimental_backgroundImage: [
+                      {
+                        type: 'radial-gradient',
+                        shape: 'ellipse',
+                        position: {top: '50%', right: '50%'},
+                        size: 'farthest-corner',
+                        colorStops: [{color: '#e66465'}, {color: '#9198e5'}],
+                      },
+                    ],
+                  }}
+                />
+              </>,
+            );
+          });
+
+          const expectedProps = {
+            backgroundImage:
+              '[radial-gradient(ellipse farthest-corner at 50% 50% , rgba(230, 100, 101, 1), rgba(145, 152, 229, 1))]',
+          };
+
+          expect(root.getRenderedOutput().toJSON()).toEqual([
+            {
+              children: [],
+              props: expectedProps,
+              type: 'View',
+            },
+            {
+              children: [],
+              props: expectedProps,
+              type: 'View',
+            },
+          ]);
+        });
+      });
     });
 
     describe('pointerEvents', () => {

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -179,9 +179,9 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: {
-    process: require('../StyleSheet/processBackgroundImage').default,
-  },
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBackgroundImage').default},
   boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)
     : {process: require('../StyleSheet/processBoxShadow').default},

packages/react-native/React/Fabric/Utils/RCTGradientUtils.mm

@@ -267,6 +267,10 @@ @implementation RCTGradientUtils
 + (std::vector<ProcessedColorStop>)getFixedColorStops:(const std::vector<ColorStop> &)colorStops
                                    gradientLineLength:(CGFloat)gradientLineLength
 {
+  if (colorStops.empty()) {
+    return {};
+  }
+
   std::vector<ProcessedColorStop> fixedColorStops(colorStops.size());
   bool hasNullPositions = false;
   auto maxPositionSoFar = resolveColorStopPosition(colorStops[0].position, gradientLineLength);