Add Fantom test for backgroundImage parsing (#54185)

Summary:
Pull Request resolved: #54185

Validate that the changes in D83341309 work across both experiment variants.

Changelog: [Internal]

Reviewed By: andrewdacenko

Differential Revision: D84924308

Author: javache

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/ReactCommon/react/renderer/components/view/BackgroundImagePropsConversions.h

@@ -12,8 +12,6 @@
 #include <react/renderer/core/RawProps.h>
 #include <react/renderer/graphics/BackgroundImage.h>
 
-#include <string>
-
 namespace facebook::react {
 
 void parseProcessedBackgroundImage(

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -612,6 +612,10 @@ SharedDebugStringConvertibleList BaseViewProps::getDebugProps() const {
               defaultBaseViewProps.pointerEvents),
           debugStringConvertibleItem(
               "transform", transform, defaultBaseViewProps.transform),
+          debugStringConvertibleItem(
+              "backgroundImage",
+              backgroundImage,
+              defaultBaseViewProps.backgroundImage),
       };
 }
 #endif

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -18,6 +18,7 @@
 #include <react/renderer/css/CSSNumber.h>
 #include <react/renderer/css/CSSPercentage.h>
 #include <react/renderer/css/CSSValueParser.h>
+#include <react/renderer/debug/flags.h>
 #include <react/renderer/graphics/BlendMode.h>
 #include <react/renderer/graphics/Isolation.h>
 #include <react/renderer/graphics/LinearGradient.h>
@@ -565,7 +566,7 @@ inline void fromRawValue(
 }
 
 inline void fromRawValue(
-    const PropsParserContext& context,
+    const PropsParserContext& /*context*/,
     const RawValue& value,
     Transform& result) {
   auto transformMatrix = Transform{};
@@ -1225,6 +1226,7 @@ inline void fromRawValue(
   result = isolation.value();
 }
 
+#if RN_DEBUG_STRING_CONVERTIBLE
 template <size_t N>
 inline std::string toString(const std::array<float, N> vec) {
   std::string s;
@@ -1422,5 +1424,6 @@ inline std::string toString(const Transform& transform) {
   result += "]";
   return result;
 }
+#endif
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h

@@ -46,17 +46,7 @@ inline int toAndroidRepr(const SharedColor& color) {
 #endif
 
 inline std::string toString(const SharedColor& value) {
-  ColorComponents components = colorComponentsFromColor(value);
-  std::array<char, 255> buffer{};
-  std::snprintf(
-      buffer.data(),
-      buffer.size(),
-      "rgba(%.0f, %.0f, %.0f, %g)",
-      components.red * 255.f,
-      components.green * 255.f,
-      components.blue * 255.f,
-      components.alpha);
-  return buffer.data();
+  return value.toString();
 }
 
 #pragma mark - Geometry

packages/react-native/ReactCommon/react/renderer/graphics/BackgroundImage.h

@@ -7,7 +7,6 @@
 
 #pragma once
 
-#include <react/renderer/graphics/ColorComponents.h>
 #include <react/renderer/graphics/LinearGradient.h>
 #include <react/renderer/graphics/RadialGradient.h>
 
@@ -19,4 +18,27 @@ using BackgroundImage = std::variant<LinearGradient, RadialGradient>;
 folly::dynamic toDynamic(const BackgroundImage& backgroundImage);
 #endif
 
+#if RN_DEBUG_STRING_CONVERTIBLE
+inline std::string toString(std::vector<BackgroundImage>& value) {
+  std::stringstream ss;
+
+  ss << "[";
+  for (size_t i = 0; i < value.size(); i++) {
+    if (i > 0) {
+      ss << ", ";
+    }
+
+    const auto& backgroundImage = value[i];
+    if (std::holds_alternative<LinearGradient>(backgroundImage)) {
+      std::get<LinearGradient>(backgroundImage).toString(ss);
+    } else if (std::holds_alternative<RadialGradient>(backgroundImage)) {
+      std::get<RadialGradient>(backgroundImage).toString(ss);
+    }
+  }
+  ss << "]";
+
+  return ss.str();
+}
+#endif
+
 }; // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/graphics/Color.cpp

@@ -7,8 +7,24 @@
 
 #include "Color.h"
 
+#include <array>
+
 namespace facebook::react {
 
+std::string SharedColor::toString() const noexcept {
+  ColorComponents components = colorComponentsFromColor(*this);
+  std::array<char, 255> buffer{};
+  std::snprintf(
+      buffer.data(),
+      buffer.size(),
+      "rgba(%.0f, %.0f, %.0f, %g)",
+      components.red * 255.f,
+      components.green * 255.f,
+      components.blue * 255.f,
+      components.alpha);
+  return buffer.data();
+}
+
 bool isColorMeaningful(const SharedColor& color) noexcept {
   if (!color) {
     return false;

packages/react-native/ReactCommon/react/renderer/graphics/Color.h

@@ -7,11 +7,12 @@
 
 #pragma once
 
-#include <functional>
-
 #include <react/renderer/graphics/ColorComponents.h>
 #include <react/renderer/graphics/HostPlatformColor.h>
 
+#include <functional>
+#include <string>
+
 #ifdef RN_SERIALIZABLE_STATE
 #include <folly/dynamic.h>
 #endif
@@ -52,6 +53,8 @@ class SharedColor {
     return color_ != HostPlatformColor::UndefinedColor;
   }
 
+  std::string toString() const noexcept;
+
  private:
   Color color_;
 };

packages/react-native/ReactCommon/react/renderer/graphics/ColorStop.h

@@ -7,10 +7,12 @@
 
 #pragma once
 
+#include <react/renderer/debug/flags.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Float.h>
 #include <react/renderer/graphics/ValueUnit.h>
 #include <optional>
+#include <sstream>
 
 namespace facebook::react {
 
@@ -22,6 +24,16 @@ struct ColorStop {
 #ifdef RN_SERIALIZABLE_STATE
   folly::dynamic toDynamic() const;
 #endif
+
+#if RN_DEBUG_STRING_CONVERTIBLE
+  void toString(std::stringstream& ss) const {
+    ss << color.toString();
+    if (position.unit != UnitType::Undefined) {
+      ss << " ";
+      ss << position.toString();
+    }
+  }
+#endif
 };
 
 struct ProcessedColorStop {

packages/react-native/ReactCommon/react/renderer/graphics/DoubleConversions.cpp

@@ -29,7 +29,9 @@ std::string toString(double doubleValue, char suffix) {
     // Serialize infinite and NaN as 0
     builder.AddCharacter('0');
   }
-  builder.AddCharacter(suffix);
+  if (suffix != '\0') {
+    builder.AddCharacter(suffix);
+  }
   return builder.Finalize();
 }