diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js index 976060faab26..81a882f4175a 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js @@ -113,5 +113,14 @@ describe('processTransformOrigin', () => { processTransformOrigin('top 30% center'); }).toThrow('Could not parse transform-origin: top 30% center'); }); + it('should handle decimal percentage and pixel values', () => { + expect(processTransformOrigin('50.5% 30.2%')).toEqual([ + '50.5%', + '30.2%', + 0, + ]); + expect(processTransformOrigin('12.5px 7.5px')).toEqual([12.5, 7.5, 0]); + expect(processTransformOrigin('.5% .5px')).toEqual(['.5%', 0.5, 0]); + }); }); }); diff --git a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js index 75e4acacbd60..96cd040d8142 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js +++ b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js @@ -11,7 +11,8 @@ import invariant from 'invariant'; // Pre-compiled regex pattern for performance - avoids regex compilation on each call -const TRANSFORM_ORIGIN_REGEX = /(top|bottom|left|right|center|\d+(?:%|px)|0)/gi; +const TRANSFORM_ORIGIN_REGEX = + /(top|bottom|left|right|center|\d*\.?\d+(?:%|px)|0)/gi; const INDEX_X = 0; const INDEX_Y = 1; diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp index fbfbeac8bc06..3df2920f069e 100644 --- a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp @@ -425,4 +425,34 @@ TEST(CSSTransformOrigin, percentage_percentage) { EXPECT_EQ(origin.z, CSSLength{}); } +TEST(CSSTransformOrigin, decimal_length_length) { + auto val = parseCSSProperty("12.5px 7.5px"); + EXPECT_TRUE(std::holds_alternative(val)); + auto& origin = std::get(val); + + EXPECT_TRUE(std::holds_alternative(origin.x)); + EXPECT_EQ(std::get(origin.x).value, 12.5f); + EXPECT_EQ(std::get(origin.x).unit, CSSLengthUnit::Px); + + EXPECT_TRUE(std::holds_alternative(origin.y)); + EXPECT_EQ(std::get(origin.y).value, 7.5f); + EXPECT_EQ(std::get(origin.y).unit, CSSLengthUnit::Px); + + EXPECT_EQ(origin.z, CSSLength{}); +} + +TEST(CSSTransformOrigin, decimal_percentage_percentage) { + auto val = parseCSSProperty("50.5% 30.2%"); + EXPECT_TRUE(std::holds_alternative(val)); + auto& origin = std::get(val); + + EXPECT_TRUE(std::holds_alternative(origin.x)); + EXPECT_EQ(std::get(origin.x).value, 50.5f); + + EXPECT_TRUE(std::holds_alternative(origin.y)); + EXPECT_EQ(std::get(origin.y).value, 30.2f); + + EXPECT_EQ(origin.z, CSSLength{}); +} + } // namespace facebook::react