Add Fantom test for backgroundImage parsing (facebook#54185)

Summary:
Pull Request resolved: facebook#54185

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

Changelog: [Internal]

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,49 @@ 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'}],
+                      },
+                    ],
+                  }}
+                />
+              </>,
+            );
+          });
+
+          // We can't just assert this matches a fragment for some reason, the test
+          // fails with "Compared values have no visual difference."
+          // $FlowFixMe[unclear-type]
+          const output = root.getRenderedOutput().toJSX() as any;
+          React.Children.map(output.props.children, child => {
+            // $FlowFixMe[incompatible-use]
+            expect(child.props.backgroundImage).toEqual(
+              '[radial-gradient(ellipse farthest-corner at 50% 50% , rgba(230, 100, 101, 1), rgba(145, 152, 229, 1))]',
+            );
+          });
+        });
+      });
     });
 
     describe('pointerEvents', () => {

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

@@ -8,10 +8,14 @@
 #pragma once
 
 #include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/renderer/components/view/conversions.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/debug/flags.h>
 #include <react/renderer/graphics/BackgroundImage.h>
 
+#include <sstream>
 #include <string>
 
 namespace facebook::react {
@@ -48,4 +52,123 @@ inline void fromRawValue(
   }
 }
 
+#if RN_DEBUG_STRING_CONVERTIBLE
+inline void toStringColorStop(
+    std::stringstream& ss,
+    const ColorStop& colorStop) {
+  ss << toString(colorStop.color);
+  if (colorStop.position.unit != UnitType::Undefined) {
+    ss << " ";
+    ss << toString(colorStop.position);
+  }
+}
+
+inline void toStringLinearGradient(
+    std::stringstream& ss,
+    const LinearGradient& gradient) {
+  ss << "linear-gradient(";
+
+  if (gradient.direction.type == GradientDirectionType::Angle) {
+    ss << std::get<Float>(gradient.direction.value) << "deg";
+  } else {
+    auto keyword = std::get<GradientKeyword>(gradient.direction.value);
+    switch (keyword) {
+      case GradientKeyword::ToTopRight:
+        ss << "to top right";
+        break;
+      case GradientKeyword::ToBottomRight:
+        ss << "to bottom right";
+        break;
+      case GradientKeyword::ToTopLeft:
+        ss << "to top left";
+        break;
+      case GradientKeyword::ToBottomLeft:
+        ss << "to bottom left";
+        break;
+    }
+  }
+
+  for (const auto& colorStop : gradient.colorStops) {
+    ss << ", ";
+    toStringColorStop(ss, colorStop);
+  }
+
+  ss << ")";
+}
+
+inline void toStringRadialGradient(
+    std::stringstream& ss,
+    const RadialGradient& gradient) {
+  ss << "radial-gradient("
+     << (gradient.shape == RadialGradientShape::Circle ? "circle" : "ellipse")
+     << " ";
+
+  if (std::holds_alternative<RadialGradientSize::SizeKeyword>(
+          gradient.size.value)) {
+    auto& keyword =
+        std::get<RadialGradientSize::SizeKeyword>(gradient.size.value);
+    switch (keyword) {
+      case RadialGradientSize::SizeKeyword::ClosestSide:
+        ss << "closest-side";
+        break;
+      case RadialGradientSize::SizeKeyword::FarthestSide:
+        ss << "farthest-side";
+        break;
+      case RadialGradientSize::SizeKeyword::ClosestCorner:
+        ss << "closest-corner";
+        break;
+      case RadialGradientSize::SizeKeyword::FarthestCorner:
+        ss << "farthest-corner";
+        break;
+    }
+  } else {
+    auto& dimensions =
+        std::get<RadialGradientSize::Dimensions>(gradient.size.value);
+    ss << toString(dimensions.x) << " " << toString(dimensions.y);
+  }
+
+  ss << " at ";
+
+  if (gradient.position.left.has_value()) {
+    ss << toString(*gradient.position.left) << " ";
+  }
+  if (gradient.position.top.has_value()) {
+    ss << toString(*gradient.position.top) << " ";
+  }
+  if (gradient.position.right.has_value()) {
+    ss << toString(*gradient.position.right) << " ";
+  }
+  if (gradient.position.bottom.has_value()) {
+    ss << toString(*gradient.position.bottom) << " ";
+  }
+
+  for (const auto& colorStop : gradient.colorStops) {
+    ss << ", ";
+    toStringColorStop(ss, colorStop);
+  }
+
+  ss << ")";
+}
+
+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 << ", ";
+    }
+
+    if (std::holds_alternative<LinearGradient>(value[i])) {
+      toStringLinearGradient(ss, std::get<LinearGradient>(value[i]));
+    } else if (std::holds_alternative<RadialGradient>(value[i])) {
+      toStringRadialGradient(ss, std::get<RadialGradient>(value[i]));
+    }
+  }
+  ss << "]";
+
+  return ss.str();
+}
+#endif
+
 } // namespace facebook::react

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>
@@ -557,6 +558,18 @@ inline ValueUnit toValueUnit(const RawValue& value) {
   return {};
 }
 
+#if RN_DEBUG_STRING_CONVERTIBLE
+inline std::string toString(const ValueUnit& valueUnit) {
+  if (valueUnit.unit == UnitType::Percent) {
+    return toString(valueUnit.value) + "%";
+  } else if (valueUnit.unit == UnitType::Point) {
+    return toString(valueUnit.value) + "px";
+  } else {
+    return "undefined";
+  }
+}
+#endif
+
 inline void fromRawValue(
     const PropsParserContext& /*context*/,
     const RawValue& value,
@@ -565,7 +578,7 @@ inline void fromRawValue(
 }
 
 inline void fromRawValue(
-    const PropsParserContext& context,
+    const PropsParserContext& /*context*/,
     const RawValue& value,
     Transform& result) {
   auto transformMatrix = Transform{};
@@ -1225,6 +1238,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 +1436,6 @@ inline std::string toString(const Transform& transform) {
   result += "]";
   return result;
 }
+#endif
 
 } // namespace facebook::react