Wire native CSS parsing for transformOrigin

Summary:
Gate `processTransformOrigin` behind `enableNativeCSSParsing()`. When the flag is on, CSS transform-origin strings like `"top left"` or `"10px 50%"` are parsed natively using the existing CSS transform-origin parser instead of being preprocessed in JS.

Changelog: [Internal]

Differential Revision: D94052730

Author: NickGerleman

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

@@ -61,6 +61,10 @@ export const transformAttribute: AnyAttributeType = nativeCSSParsing
   ? true
   : {process: processTransform};
 
+export const transformOriginAttribute: AnyAttributeType = nativeCSSParsing
+  ? true
+  : {process: processTransformOrigin};
+
 const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Layout
@@ -155,7 +159,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    * Transform
    */
   transform: transformAttribute,
-  transformOrigin: {process: processTransformOrigin},
+  transformOrigin: transformOriginAttribute,
 
   /**
    * Filter

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

@@ -986,7 +986,8 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
   }
 }
 
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+inline void
+parseProcessedTransformOrigin(const PropsParserContext & /*context*/, const RawValue &value, TransformOrigin &result)
 {
   if (!value.hasType<std::vector<RawValue>>()) {
     result = {};
@@ -1020,6 +1021,55 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
   result = transformOrigin;
 }
 
+inline void parseUnprocessedTransformOriginString(const std::string &value, TransformOrigin &result)
+{
+  auto cssOrigin = parseCSSProperty<CSSTransformOrigin>(value);
+  if (!std::holds_alternative<CSSTransformOrigin>(cssOrigin)) {
+    result = {};
+    return;
+  }
+
+  const auto &origin = std::get<CSSTransformOrigin>(cssOrigin);
+  TransformOrigin transformOrigin;
+
+  auto x = cssLengthPercentageToValueUnit(origin.x);
+  auto y = cssLengthPercentageToValueUnit(origin.y);
+  if (!x || !y) {
+    result = {};
+    return;
+  }
+
+  transformOrigin.xy[0] = x;
+  transformOrigin.xy[1] = y;
+
+  if (origin.z.unit != CSSLengthUnit::Px) {
+    result = {};
+    return;
+  }
+  transformOrigin.z = origin.z.value;
+
+  result = transformOrigin;
+}
+
+inline void
+parseUnprocessedTransformOrigin(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+{
+  if (value.hasType<std::string>()) {
+    parseUnprocessedTransformOriginString((std::string)value, result);
+  } else {
+    parseProcessedTransformOrigin(context, value, result);
+  }
+}
+
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+{
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing()) {
+    parseUnprocessedTransformOrigin(context, value, result);
+  } else {
+    parseProcessedTransformOrigin(context, value, result);
+  }
+}
+
 inline void fromRawValue(const PropsParserContext &context, const RawValue &value, PointerEventsMode &result)
 {
   result = PointerEventsMode::Auto;

packages/react-native/ReactCommon/react/renderer/components/view/tests/ConversionsTest.cpp

@@ -357,4 +357,87 @@ TEST(ConversionsTest, unprocessed_transform_rawvalue_translate_percent) {
   EXPECT_EQ(result.operations[0].x.unit, UnitType::Percent);
 }
 
+TEST(ConversionsTest, unprocessed_transform_origin_css_top_left) {
+  TransformOrigin result;
+  parseUnprocessedTransformOriginString("top left", result);
+
+  EXPECT_EQ(result.xy[0].value, 0.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Percent);
+  EXPECT_EQ(result.xy[1].value, 0.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 0.0f);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_css_center) {
+  TransformOrigin result;
+  parseUnprocessedTransformOriginString("center", result);
+
+  EXPECT_EQ(result.xy[0].value, 50.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Percent);
+  EXPECT_EQ(result.xy[1].value, 50.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 0.0f);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_css_right_bottom) {
+  TransformOrigin result;
+  parseUnprocessedTransformOriginString("right bottom", result);
+
+  EXPECT_EQ(result.xy[0].value, 100.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Percent);
+  EXPECT_EQ(result.xy[1].value, 100.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 0.0f);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_css_length_percent) {
+  TransformOrigin result;
+  parseUnprocessedTransformOriginString("10px 50%", result);
+
+  EXPECT_EQ(result.xy[0].value, 10.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Point);
+  EXPECT_EQ(result.xy[1].value, 50.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 0.0f);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_processed_array) {
+  RawValue value{folly::dynamic::array("50%", "50%", 0)};
+
+  TransformOrigin result;
+  parseProcessedTransformOrigin(
+      PropsParserContext{-1, ContextContainer{}}, value, result);
+
+  EXPECT_EQ(result.xy[0].value, 50.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Percent);
+  EXPECT_EQ(result.xy[1].value, 50.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 0.0f);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_rawvalue_string) {
+  RawValue value{folly::dynamic("top left")};
+  TransformOrigin result;
+  parseUnprocessedTransformOrigin(
+      PropsParserContext{-1, ContextContainer{}}, value, result);
+
+  EXPECT_EQ(result.xy[0].value, 0.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Percent);
+  EXPECT_EQ(result.xy[1].value, 0.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+}
+
+TEST(ConversionsTest, unprocessed_transform_origin_rawvalue_array) {
+  RawValue value{folly::dynamic::array(10, "50%", 5)};
+  TransformOrigin result;
+  parseUnprocessedTransformOrigin(
+      PropsParserContext{-1, ContextContainer{}}, value, result);
+
+  EXPECT_EQ(result.xy[0].value, 10.0f);
+  EXPECT_EQ(result.xy[0].unit, UnitType::Point);
+  EXPECT_EQ(result.xy[1].value, 50.0f);
+  EXPECT_EQ(result.xy[1].unit, UnitType::Percent);
+  EXPECT_EQ(result.z, 5.0f);
+}
+
 } // namespace facebook::react