react-native-tvos 0.82.1-0 → 0.83.0-0

package/ReactCommon/react/renderer/css/tests/CSSBackgroundImageTest.cpp

@@ -0,0 +1,560 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <gtest/gtest.h>
+#include <react/renderer/css/CSSBackgroundImage.h>
+
+namespace facebook::react {
+
+namespace {
+
+CSSColorStop
+makeCSSColorStop(uint8_t r, uint8_t g, uint8_t b, uint8_t a = 255) {
+  return CSSColorStop{.color = CSSColor{.r = r, .g = g, .b = b, .a = a}};
+}
+
+} // namespace
+
+class CSSBackgroundImageTest : public ::testing::Test {};
+
+TEST_F(CSSBackgroundImageTest, LinearGradientToRight) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(to right, red, blue)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 90.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientToBottomRight) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(to bottom right, red, blue)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{
+              .value = CSSLinearGradientDirectionKeyword::ToBottomRight},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, EmptyStringReturnsEmptyArray) {
+  auto result = parseCSSProperty<CSSBackgroundImageList>("");
+  ASSERT_TRUE(std::holds_alternative<std::monostate>(result));
+}
+
+TEST_F(CSSBackgroundImageTest, InvalidValueReturnsEmptyArray) {
+  auto result = parseCSSProperty<CSSBackgroundImageList>("linear-");
+  ASSERT_TRUE(std::holds_alternative<std::monostate>(result));
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithWhitespacesInDirection) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(to   bottom   right, red, blue)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{
+              .value = CSSLinearGradientDirectionKeyword::ToBottomRight},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithRandomWhitespaces) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      " linear-gradient(to   bottom   right,  red  30%,  blue  80%)  ");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{
+              .value = CSSLinearGradientDirectionKeyword::ToBottomRight},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 30.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 80.0f}},
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithAngle) {
+  auto result =
+      parseCSSProperty<CSSBackgroundImage>("linear-gradient(45deg, red, blue)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 45.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientCaseInsensitive) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "LiNeAr-GradieNt(To Bottom, Red, Blue)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, MultipleLinearGradientsWithNewlines) {
+  auto result = parseCSSProperty<CSSBackgroundImageList>(
+      "\n      linear-gradient(to top, red, blue),\n      linear-gradient(to bottom, green, yellow)");
+  decltype(result) expected = CSSBackgroundImageList{
+      {CSSLinearGradientFunction{
+           .direction =
+               CSSLinearGradientDirection{.value = CSSAngle{.degrees = 0.0f}},
+           .items =
+               {CSSColorStop{
+                    .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255}},
+                CSSColorStop{
+                    .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255}}}},
+       CSSLinearGradientFunction{
+           .direction =
+               CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+           .items = {
+               CSSColorStop{
+                   .color = CSSColor{.r = 0, .g = 128, .b = 0, .a = 255}},
+               CSSColorStop{
+                   .color = CSSColor{.r = 255, .g = 255, .b = 0, .a = 255}},
+           }}}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithMultipleColorStops) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(to bottom, red 0%, green 50%, blue 100%)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 0.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 128, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 50.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 100.0f}},
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithColorStopEndPosition) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(red 10% 30%, blue 50%)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 10.0f},
+              .endPosition = CSSPercentage{.value = 30.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 50.0f}}}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientMixedPositionedStops) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(to right, red, green, blue 60%, yellow, purple)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 90.0f}},
+      .items = {
+          makeCSSColorStop(255, 0, 0),
+          makeCSSColorStop(0, 128, 0),
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 60.0f}},
+          makeCSSColorStop(255, 255, 0),
+          makeCSSColorStop(128, 0, 128),
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithHslColors) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(hsl(330, 100%, 45.1%), hsl(0, 100%, 50%))");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {makeCSSColorStop(230, 0, 115), makeCSSColorStop(255, 0, 0)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithoutDirection) {
+  auto result =
+      parseCSSProperty<CSSBackgroundImage>("linear-gradient(#e66465, #9198e5)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {
+          makeCSSColorStop(230, 100, 101), makeCSSColorStop(145, 152, 229)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientInvalidCases) {
+  const std::vector<std::string> invalidInputs = {
+      "linear-gradient(45deg, rede, blue)",
+      "linear-gradient(45 deg, red, blue)",
+      "linear-gradient(to left2, red, blue)",
+      "linear-gradient(to left, red 5, blue)"};
+  for (const auto& input : invalidInputs) {
+    const auto result = parseCSSProperty<CSSBackgroundImage>(input);
+    ASSERT_TRUE(std::holds_alternative<std::monostate>(result))
+        << "Input should be invalid: " << input;
+  }
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithMultipleTransitionHints) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(red, 20%, blue, 60%, green, 80%, yellow)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {
+          makeCSSColorStop(255, 0, 0),
+          CSSColorHint{.position = CSSPercentage{.value = 20.0f}},
+          makeCSSColorStop(0, 0, 255),
+          CSSColorHint{.position = CSSPercentage{.value = 60.0f}},
+          makeCSSColorStop(0, 128, 0),
+          CSSColorHint{.position = CSSPercentage{.value = 80.0f}},
+          makeCSSColorStop(255, 255, 0),
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientInvalidTransitionHints) {
+  const std::vector<std::string> invalidInputs = {
+      // color hints must be between two color stops
+      "linear-gradient(red, 30%, blue, 60%, green, 80%)",
+      "linear-gradient(red, 30%, 60%, green)",
+      "linear-gradient(20%, red, green)"};
+  for (const auto& input : invalidInputs) {
+    const auto result = parseCSSProperty<CSSBackgroundImageList>(input);
+    ASSERT_TRUE(std::holds_alternative<std::monostate>(result))
+        << "Input should be invalid: " << input;
+  }
+}
+
+TEST_F(CSSBackgroundImageTest, LinearGradientWithMixedUnits) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "linear-gradient(red 10%, 20px, blue 30%, purple 40px)");
+  decltype(result) expected = CSSLinearGradientFunction{
+      .direction =
+          CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 10.0f}},
+          CSSColorHint{
+              .position = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 30.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 128, .g = 0, .b = 128, .a = 255},
+              .startPosition =
+                  CSSLength{.value = 40.0f, .unit = CSSLengthUnit::Px}},
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientBasic) {
+  auto result =
+      parseCSSProperty<CSSBackgroundImage>("radial-gradient(red, blue)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Ellipse,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientInferCircleFromSingleLength) {
+  auto result =
+      parseCSSProperty<CSSBackgroundImage>("radial-gradient(100px, red, blue)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size =
+          CSSRadialGradientExplicitSize{
+              .sizeX = CSSLength{.value = 100.0f, .unit = CSSLengthUnit::Px},
+              .sizeY = CSSLength{.value = 100.0f, .unit = CSSLengthUnit::Px}},
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientInferEllipseFromDoubleLength) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(100px 50px, red, blue)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Ellipse,
+      .size =
+          CSSRadialGradientExplicitSize{
+              .sizeX = CSSLength{.value = 100.0f, .unit = CSSLengthUnit::Px},
+              .sizeY = CSSLength{.value = 50.0f, .unit = CSSLengthUnit::Px}},
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientExplicitShapeWithSize) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(circle 100px at center, red, blue 80%)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size =
+          CSSRadialGradientExplicitSize{
+              .sizeX = CSSLength{.value = 100.0f, .unit = CSSLengthUnit::Px},
+              .sizeY = CSSLength{.value = 100.0f, .unit = CSSLengthUnit::Px}},
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {
+          makeCSSColorStop(255, 0, 0),
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 80.0f}}}};
+  ASSERT_EQ(result, expected);
+}
+
+// 1. position syntax: [ left | center | right | top | bottom |
+// <length-percentage> ]
+TEST_F(CSSBackgroundImageTest, RadialGradientPositionLengthSyntax) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(circle at 20px, red, blue)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+// 2. position syntax: [ left | center | right ] && [ top | center | bottom ]
+TEST_F(CSSBackgroundImageTest, RadialGradientPositionKeywordCombinations) {
+  const std::vector<std::string> inputs = {
+      "radial-gradient(circle at left top, red, blue)",
+      "radial-gradient(circle at top left, red, blue)"};
+  decltype(parseCSSProperty<CSSBackgroundImage>(inputs[0])) expected =
+      CSSRadialGradientFunction{
+          .shape = CSSRadialGradientShape::Circle,
+          .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+          .position =
+              CSSRadialGradientPosition{
+                  .top = CSSPercentage{.value = 0.0f},
+                  .left = CSSPercentage{.value = 0.0f}},
+          .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  for (const auto& input : inputs) {
+    auto result = parseCSSProperty<CSSBackgroundImage>(input);
+    ASSERT_EQ(result, expected) << "Failed for input: " << input;
+  }
+}
+
+// 3. position syntax: [ left | center | right | <length-percentage> ] [ top
+// | center | bottom | <length-percentage> ]
+TEST_F(CSSBackgroundImageTest, RadialGradientComplexPositionSyntax) {
+  const std::vector<std::pair<std::string, CSSRadialGradientPosition>>
+      testCases = {
+          {
+              "radial-gradient(circle at left 20px, red, blue)",
+              {.top = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px},
+               .left = CSSPercentage{.value = 0.f}},
+          },
+          {
+              "radial-gradient(circle at 20px 20px, red, blue)",
+              {.top = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px},
+               .left = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px}},
+          },
+          {
+              "radial-gradient(circle at right 50px, red, blue)",
+              {.top = CSSLength{.value = 50.0f, .unit = CSSLengthUnit::Px},
+               .right = CSSPercentage{.value = 0.f}},
+          }};
+  for (const auto& [input, expectedPosition] : testCases) {
+    const auto result = parseCSSProperty<CSSBackgroundImage>(input);
+    decltype(result) expected = CSSRadialGradientFunction{
+        .shape = CSSRadialGradientShape::Circle,
+        .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+        .position = expectedPosition,
+        .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+    ASSERT_EQ(result, expected);
+  }
+}
+
+// 4. position syntax: [ [ left | right ] <length-percentage> ] && [ [ top |
+// bottom ] <length-percentage> ]
+TEST_F(CSSBackgroundImageTest, RadialGradientSeparatePositionPercentages) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(at top 0% right 10%, red, blue)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Ellipse,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 0.0f},
+              .right = CSSPercentage{.value = 10.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientWithTransitionHints) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(circle, red 0%, 25%, blue 50%, 75%, green 100%)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 0.0f}},
+          CSSColorHint{.position = CSSPercentage{.value = 25.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 50.0f}},
+          CSSColorHint{.position = CSSPercentage{.value = 75.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 128, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 100.0f}},
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, MultipleGradientsRadialAndLinear) {
+  auto result = parseCSSProperty<CSSBackgroundImageList>(
+      "radial-gradient(circle at top left, red, blue), linear-gradient(to bottom, green, yellow)");
+  decltype(result) expected = CSSBackgroundImageList{
+      {CSSRadialGradientFunction{
+           .shape = CSSRadialGradientShape::Circle,
+           .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+           .position =
+               CSSRadialGradientPosition{
+                   .top = CSSPercentage{.value = 0.0f},
+                   .left = CSSPercentage{.value = 0.0f}},
+           .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}},
+       CSSLinearGradientFunction{
+           .direction =
+               CSSLinearGradientDirection{.value = CSSAngle{.degrees = 180.0f}},
+           .items = {
+               makeCSSColorStop(0, 128, 0), makeCSSColorStop(255, 255, 0)}}}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientMixedCase) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "RaDiAl-GrAdIeNt(CiRcLe ClOsEsT-sIdE aT cEnTeR, rEd, bLuE)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size = CSSRadialGradientSizeKeyword::ClosestSide,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {makeCSSColorStop(255, 0, 0), makeCSSColorStop(0, 0, 255)}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientWhitespaceVariations) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(   circle    farthest-corner    at    25%    75%   ,   red   0%   ,   blue    100%   )");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Circle,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 75.0f},
+              .left = CSSPercentage{.value = 25.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 0.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 100.0f}},
+      }};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientInvalidCases) {
+  const std::vector<std::string> invalidInputs = {
+      "radial-gradient(circle at top leftt, red, blue)",
+      "radial-gradient(circle at, red, blue)",
+      "radial-gradient(ellipse 100px, red, blue)",
+      "radial-gradient(ellipse at top 20% top 50%, red, blue)"};
+  for (const auto& input : invalidInputs) {
+    const auto result = parseCSSProperty<CSSBackgroundImageList>(input);
+    ASSERT_TRUE(std::holds_alternative<std::monostate>(result))
+        << "Input should be invalid: " << input;
+  }
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientMultipleColorStops) {
+  auto result = parseCSSProperty<CSSBackgroundImage>(
+      "radial-gradient(red 0%, yellow 30%, green 60%, blue 100%)");
+  decltype(result) expected = CSSRadialGradientFunction{
+      .shape = CSSRadialGradientShape::Ellipse,
+      .size = CSSRadialGradientSizeKeyword::FarthestCorner,
+      .position =
+          CSSRadialGradientPosition{
+              .top = CSSPercentage{.value = 50.0f},
+              .left = CSSPercentage{.value = 50.0f}},
+      .items = {
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 0.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 255, .g = 255, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 30.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 128, .b = 0, .a = 255},
+              .startPosition = CSSPercentage{.value = 60.0f}},
+          CSSColorStop{
+              .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255},
+              .startPosition = CSSPercentage{.value = 100.0f}}}};
+  ASSERT_EQ(result, expected);
+}
+
+TEST_F(CSSBackgroundImageTest, InvalidGradientFunctionName) {
+  const std::string input =
+      "aoeusntial-gradient(red 0%, yellow 30%, green 60%, blue 100%)";
+  const auto result = parseCSSProperty<CSSBackgroundImageList>(input);
+  ASSERT_TRUE(std::holds_alternative<std::monostate>(result));
+}
+
+TEST_F(CSSBackgroundImageTest, RadialGradientNegativeRadius) {
+  const std::vector<std::string> invalidInputs = {
+      "radial-gradient(circle -100px, red, blue)",
+      "radial-gradient(ellipse 100px -40px, red, blue)"};
+  for (const auto& input : invalidInputs) {
+    const auto result = parseCSSProperty<CSSBackgroundImageList>(input);
+    ASSERT_TRUE(std::holds_alternative<std::monostate>(result))
+        << "Input should be invalid: " << input;
+  }
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/css/tests/CSSColorTest.cpp

@@ -191,8 +191,9 @@ TEST(CSSColor, rgb_rgba_values) {
 
   auto rgbLegacySyntaxWithSolidusAlphaValue =
       parseCSSProperty<CSSColor>("rgb(1, 4, 5 /0.5)");
-  EXPECT_TRUE(std::holds_alternative<std::monostate>(
-      rgbLegacySyntaxWithSolidusAlphaValue));
+  EXPECT_TRUE(
+      std::holds_alternative<std::monostate>(
+          rgbLegacySyntaxWithSolidusAlphaValue));
 
   auto rgbaWithSolidusAlphaValue =
       parseCSSProperty<CSSColor>("rgba(255 255 255 / 0.5)");
@@ -317,8 +318,9 @@ TEST(CSSColor, hsl_hsla_values) {
 
   auto rgbLegacySyntaxWithSolidusAlphaValue =
       parseCSSProperty<CSSColor>("hsl(1, 4, 5 / 0.5)");
-  EXPECT_TRUE(std::holds_alternative<std::monostate>(
-      rgbLegacySyntaxWithSolidusAlphaValue));
+  EXPECT_TRUE(
+      std::holds_alternative<std::monostate>(
+          rgbLegacySyntaxWithSolidusAlphaValue));
 
   auto hslaWithoutAlphaValue = parseCSSProperty<CSSColor>("hsla(70 190% 75%)");
   EXPECT_TRUE(std::holds_alternative<CSSColor>(hslaWithoutAlphaValue));

package/ReactCommon/react/renderer/css/tests/CSSFilterTest.cpp

@@ -177,7 +177,7 @@ TEST(CSSFilter, drop_shadow_no_blur_pre_color) {
       std::get<CSSDropShadowFilter>(value).standardDeviation.unit,
       CSSLengthUnit::Px);
 
-  CSSColor red{255, 0, 0, 255};
+  CSSColor red{.r = 255, .g = 0, .b = 0, .a = 255};
   EXPECT_EQ(std::get<CSSDropShadowFilter>(value).color, red);
 }
 
@@ -195,7 +195,7 @@ TEST(CSSFilter, drop_shadow_no_blur_post_color) {
   EXPECT_EQ(
       std::get<CSSDropShadowFilter>(value).standardDeviation.unit,
       CSSLengthUnit::Px);
-  CSSColor red{255, 0, 0, 255};
+  CSSColor red{.r = 255, .g = 0, .b = 0, .a = 255};
 
   EXPECT_EQ(std::get<CSSDropShadowFilter>(value).color, red);
 }
@@ -231,7 +231,7 @@ TEST(CSSFilter, drop_shadow_with_blur_pre_color) {
       std::get<CSSDropShadowFilter>(value).standardDeviation.unit,
       CSSLengthUnit::Px);
 
-  CSSColor red{255, 0, 0, 255};
+  CSSColor red{.r = 255, .g = 0, .b = 0, .a = 255};
   EXPECT_EQ(std::get<CSSDropShadowFilter>(value).color, red);
 }
 
@@ -250,7 +250,7 @@ TEST(CSSFilter, drop_shadow_with_blur_post_color) {
       std::get<CSSDropShadowFilter>(value).standardDeviation.unit,
       CSSLengthUnit::Px);
 
-  CSSColor red{255, 0, 0, 255};
+  CSSColor red{.r = 255, .g = 0, .b = 0, .a = 255};
   EXPECT_EQ(std::get<CSSDropShadowFilter>(value).color, red);
 }
 
@@ -550,7 +550,7 @@ TEST(CSSFilter, filter_list) {
   EXPECT_EQ(
       std::get<CSSDropShadowFilter>(list[2]).standardDeviation.unit,
       CSSLengthUnit::Px);
-  CSSColor red{255, 0, 0, 255};
+  CSSColor red{.r = 255, .g = 0, .b = 0, .a = 255};
   EXPECT_EQ(std::get<CSSDropShadowFilter>(list[2]).color, red);
 
   EXPECT_TRUE(std::holds_alternative<CSSDropShadowFilter>(list[3]));

package/ReactCommon/react/renderer/css/tests/CSSFontVariantTest.cpp

@@ -38,8 +38,9 @@ TEST(CSSFontVariant, multiple_variants) {
 
   auto commonLigaturesAndHistoricalForms =
       parseCSSProperty<CSSFontVariantList>("common-ligatures no-contextual");
-  EXPECT_TRUE(std::holds_alternative<CSSFontVariantList>(
-      commonLigaturesAndHistoricalForms));
+  EXPECT_TRUE(
+      std::holds_alternative<CSSFontVariantList>(
+          commonLigaturesAndHistoricalForms));
   EXPECT_EQ(
       std::get<CSSFontVariantList>(commonLigaturesAndHistoricalForms).size(),
       2);

package/ReactCommon/react/renderer/css/tests/CSSListTest.cpp

@@ -35,8 +35,9 @@ TEST(CSSList, single_value) {
 
   auto whitespaceValue =
       parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(" 20 ");
-  EXPECT_TRUE(std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
-      whitespaceValue));
+  EXPECT_TRUE(
+      std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
+          whitespaceValue));
   EXPECT_EQ(
       std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue).size(), 1);
   EXPECT_EQ(
@@ -63,8 +64,9 @@ TEST(CSSList, multiple_comma_values) {
 
   auto whitespaceValue =
       parseCSSProperty<CSSCommaSeparatedList<CSSNumber>>(" 20 , 30 , 40 ");
-  EXPECT_TRUE(std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
-      whitespaceValue));
+  EXPECT_TRUE(
+      std::holds_alternative<CSSCommaSeparatedList<CSSNumber>>(
+          whitespaceValue));
   EXPECT_EQ(
       std::get<CSSCommaSeparatedList<CSSNumber>>(whitespaceValue).size(), 3);
   EXPECT_EQ(
@@ -78,8 +80,9 @@ TEST(CSSList, multiple_comma_values) {
 TEST(CSSList, multiple_space_values) {
   auto simpleValue =
       parseCSSProperty<CSSWhitespaceSeparatedList<CSSNumber>>("20 30 40");
-  EXPECT_TRUE(std::holds_alternative<CSSWhitespaceSeparatedList<CSSNumber>>(
-      simpleValue));
+  EXPECT_TRUE(
+      std::holds_alternative<CSSWhitespaceSeparatedList<CSSNumber>>(
+          simpleValue));
   EXPECT_EQ(
       std::get<CSSWhitespaceSeparatedList<CSSNumber>>(simpleValue).size(), 3);
   EXPECT_EQ(
@@ -94,8 +97,9 @@ TEST(CSSList, multiple_space_values) {
 
   auto whitespaceValue =
       parseCSSProperty<CSSWhitespaceSeparatedList<CSSNumber>>(" 20 \n 30  40 ");
-  EXPECT_TRUE(std::holds_alternative<CSSWhitespaceSeparatedList<CSSNumber>>(
-      whitespaceValue));
+  EXPECT_TRUE(
+      std::holds_alternative<CSSWhitespaceSeparatedList<CSSNumber>>(
+          whitespaceValue));
   EXPECT_EQ(
       std::get<CSSWhitespaceSeparatedList<CSSNumber>>(whitespaceValue).size(),
       3);