fix: accept three-value conic gradient positions

Author: Stringsaeed

packages/react-native/ReactCommon/react/renderer/css/CSSBackgroundImage.h

@@ -927,9 +927,6 @@ struct CSSDataTypeParser<CSSConicGradientFunction> {
       if (third.has_value()) {
         parser.syntaxParser().consumeWhitespace();
         fourth = parsePositionComponent(parser);
-        if (!fourth.has_value()) {
-          return {};
-        }
       }
       auto position = resolvePosition(*first, second, third, fourth);
       if (!position.has_value()) {
@@ -1001,6 +998,57 @@ struct CSSDataTypeParser<CSSConicGradientFunction> {
     return std::get<CSSPercentage>(component);
   }
 
+  // [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
+  // with exactly one offset, which belongs to the edge keyword directly before it.
+  static std::optional<CSSRadialGradientPosition> resolveThreeValuePosition(
+      const PositionComponent &first,
+      const PositionComponent &second,
+      const PositionComponent &third)
+  {
+    const bool offsetIsSecond = !std::holds_alternative<CSSGradientPositionKeyword>(second);
+    if (!std::holds_alternative<CSSGradientPositionKeyword>(first) ||
+        offsetIsSecond == !std::holds_alternative<CSSGradientPositionKeyword>(third)) {
+      return {};
+    }
+    auto offsetKeyword = std::get<CSSGradientPositionKeyword>(offsetIsSecond ? first : second);
+    auto bareKeyword = std::get<CSSGradientPositionKeyword>(offsetIsSecond ? third : first);
+    auto isHorizontal = [](CSSGradientPositionKeyword keyword) {
+      return keyword == CSSGradientPositionKeyword::Left || keyword == CSSGradientPositionKeyword::Right;
+    };
+    if (offsetKeyword == CSSGradientPositionKeyword::Center ||
+        (bareKeyword != CSSGradientPositionKeyword::Center &&
+         isHorizontal(bareKeyword) == isHorizontal(offsetKeyword))) {
+      return {};
+    }
+
+    CSSRadialGradientPosition position;
+    auto setEdge = [&position](CSSGradientPositionKeyword keyword, std::variant<CSSLength, CSSPercentage> value) {
+      switch (keyword) {
+        case CSSGradientPositionKeyword::Left:
+          position.left = value;
+          break;
+        case CSSGradientPositionKeyword::Right:
+          position.right = value;
+          break;
+        case CSSGradientPositionKeyword::Top:
+          position.top = value;
+          break;
+        case CSSGradientPositionKeyword::Bottom:
+          position.bottom = value;
+          break;
+        case CSSGradientPositionKeyword::Center:
+          break;
+      }
+    };
+    setEdge(offsetKeyword, positionValue(offsetIsSecond ? second : third));
+    if (bareKeyword == CSSGradientPositionKeyword::Center) {
+      (isHorizontal(offsetKeyword) ? position.top : position.left) = CSSPercentage{50.0f};
+    } else {
+      setEdge(bareKeyword, CSSPercentage{0.0f});
+    }
+    return position;
+  }
+
   static std::optional<CSSRadialGradientPosition> resolvePosition(
       const PositionComponent &first,
       const std::optional<PositionComponent> &second,
@@ -1009,7 +1057,13 @@ struct CSSDataTypeParser<CSSConicGradientFunction> {
   {
     CSSRadialGradientPosition position;
     if (third.has_value()) {
-      if (!second.has_value() || !fourth.has_value() || !std::holds_alternative<CSSGradientPositionKeyword>(first) ||
+      if (!second.has_value()) {
+        return {};
+      }
+      if (!fourth.has_value()) {
+        return resolveThreeValuePosition(first, *second, *third);
+      }
+      if (!std::holds_alternative<CSSGradientPositionKeyword>(first) ||
           !std::holds_alternative<CSSGradientPositionKeyword>(*third) ||
           std::holds_alternative<CSSGradientPositionKeyword>(*second) ||
           std::holds_alternative<CSSGradientPositionKeyword>(*fourth)) {

packages/react-native/ReactCommon/react/renderer/css/tests/CSSBackgroundImageTest.cpp

@@ -639,6 +639,56 @@ TEST_F(CSSBackgroundImageTest, ConicGradientWithFourValuePosition) {
   ASSERT_EQ(result, expected);
 }
 
+TEST_F(CSSBackgroundImageTest, ConicGradientWithThreeValuePosition) {
+  const std::vector<std::pair<std::string, CSSRadialGradientPosition>>
+      testCases = {
+          {"conic-gradient(at right 10px top, red, blue)",
+           {.top = CSSPercentage{.value = 0.0f},
+            .right = CSSLength{.value = 10.0f, .unit = CSSLengthUnit::Px}}},
+          {"conic-gradient(at top 20px left, red, blue)",
+           {.top = CSSLength{.value = 20.0f, .unit = CSSLengthUnit::Px},
+            .left = CSSPercentage{.value = 0.0f}}},
+          {"conic-gradient(at left bottom 10%, red, blue)",
+           {.bottom = CSSPercentage{.value = 10.0f},
+            .left = CSSPercentage{.value = 0.0f}}},
+          {"conic-gradient(at center top 25%, red, blue)",
+           {.top = CSSPercentage{.value = 25.0f},
+            .left = CSSPercentage{.value = 50.0f}}},
+          {"conic-gradient(at right 25% center, red, blue)",
+           {.top = CSSPercentage{.value = 50.0f},
+            .right = CSSPercentage{.value = 25.0f}}},
+          {"conic-gradient(at top 25% center, red, blue)",
+           {.top = CSSPercentage{.value = 25.0f},
+            .left = CSSPercentage{.value = 50.0f}}}};
+
+  for (const auto& [input, expectedPosition] : testCases) {
+    const auto result = parseCSSProperty<CSSBackgroundImage>(input);
+    decltype(result) expected = CSSConicGradientFunction{
+        .from = CSSAngle{.degrees = 0.0f},
+        .position = expectedPosition,
+        .items = {
+            CSSConicColorStop{
+                .color = CSSColor{.r = 255, .g = 0, .b = 0, .a = 255}},
+            CSSConicColorStop{
+                .color = CSSColor{.r = 0, .g = 0, .b = 255, .a = 255}}}};
+    ASSERT_EQ(result, expected) << "Failed for input: " << input;
+  }
+}
+
+TEST_F(CSSBackgroundImageTest, ConicGradientRejectsInvalidThreeValuePosition) {
+  for (const auto& input : {
+           "conic-gradient(at left top center, red, blue)",
+           "conic-gradient(at center 10px top, red, blue)",
+           "conic-gradient(at 10px left top, red, blue)",
+           "conic-gradient(at left 10px right, red, blue)",
+           "conic-gradient(at left 10px 20px, red, blue)",
+       }) {
+    const auto result = parseCSSProperty<CSSBackgroundImage>(input);
+    ASSERT_TRUE(std::holds_alternative<std::monostate>(result))
+        << "Unexpectedly accepted: " << input;
+  }
+}
+
 TEST_F(CSSBackgroundImageTest, InvalidGradientFunctionName) {
   const std::string input =
       "aoeusntial-gradient(red 0%, yellow 30%, green 60%, blue 100%)";