Keep percentages in translateX/translateY string transforms (#59366)

Summary:
`processTransform` drops the `%` unit when it parses `translateX(...)` or `translateY(...)` from a CSS transform string:

```js
processTransform('translateX(10%)'); // [{translateX: 10}], expected [{translateX: '10%'}]
```

Native reads a bare number as points, so a view styled with `transform: 'translateX(10%)'` moves 10 points instead of 10% of its width. `translate(10%, 20px)` and the array form `[{translateX: '10%'}]` already keep the percentage, and so does the native CSS parser (`enableNativeCSSParsing`). Only the `translateX`/`translateY` branch of the JS string parser discards it.

The same parser also required a digit before the decimal point, so `translateX(.5px)` and `matrix(.5, …)` parsed `.5` as `5`. The array form and the native CSS parser both accept these. #57487 fixed the same problem in `processTransformOrigin`.

## Changelog:

[GENERAL] [FIXED] - Keep percentages in `translateX`/`translateY` string transforms and parse numbers without a leading zero

Pull Request resolved: #59366

Test Plan:
New tests fail without the fix and pass with it:

- `yarn fantom packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js`: 19 passed. Without the fix, 2 fail: `translateX(10%)` gives `{translateX: 10}`, and `translateX(.5px)` gives `{translateX: 5}`.
- `yarn fantom packages/react-native/Libraries/Components/View/__tests__/View-itest.js`: 228 passed. The new test renders a 200×50 `<View>` with `transform: 'translateX(10%) translateY(20%)'` and checks `getBoundingClientRect()`. Without the fix, the 2 `enableNativeCSSParsing` 🛑 variants fail with `Expected 20 but received 10`. The 2 ✅ variants already passed because the native parser handles it.
- `CSSTransformTest.cpp`: added `matrix_leading_dot`, `translate_x_leading_dot` and `translate_y_leading_dot` to show the native parser already handles these inputs. I couldn't find an OSS runner for these tests, so I compiled the file against googletest 1.15.2 and the in-repo headers: 95 tests passed. Changing an expected value to `5.0f` makes `translate_x_leading_dot` fail with `Which is: 0.5`, so the assertion is checking the parsed value.
- `yarn flow-check`: 0 errors. ESLint `--max-warnings 0` and Prettier on the changed JS files are clean, and `node scripts/clang-format.js --check` on the changed C++ file is clean.

Not run: RNTester on a device. The change is JS-only and covered by the Fantom layout test above.

Reviewed By: rubennorte

Differential Revision: D127122803

Pulled By: javache

fbshipit-source-id: a7f8873c12bc845c074405e6d79da00b723d223c

Author: camchis

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -197,6 +197,31 @@ describe('<View>', () => {
           ).toEqual(<rn-view transform='[{"translateX": 10}]' />);
         });
 
+        it('resolves percentages in string translateX and translateY against the view size', () => {
+          const root = Fantom.createRoot();
+
+          const viewRef = createRef<HostInstance>();
+          Fantom.runTask(() => {
+            root.render(
+              <View
+                ref={viewRef}
+                style={{
+                  width: 200,
+                  height: 50,
+                  transform: 'translateX(10%) translateY(20%)',
+                }}
+              />,
+            );
+          });
+
+          const viewBounds = nullthrows(
+            viewRef.current,
+          ).getBoundingClientRect();
+          // 10% of the 200 width and 20% of the 50 height.
+          expect(viewBounds.x).toBe(20);
+          expect(viewBounds.y).toBe(10);
+        });
+
         [
           [undefined, {x: -5, y: 0, width: 20, height: 10}],
           ['50% 50%', {x: -5, y: 0, width: 20, height: 10}],

packages/react-native/Libraries/StyleSheet/__tests__/processTransform-itest.js

@@ -148,4 +148,35 @@ describe('processTransform', () => {
       );
     });
   });
+
+  describe('string parsing', () => {
+    it('should keep the percentage unit for translateX and translateY', () => {
+      expect(processTransform('translateX(10%)')).toEqual([
+        {translateX: '10%'},
+      ]);
+      expect(processTransform('translateY(-25.5%)')).toEqual([
+        {translateY: '-25.5%'},
+      ]);
+      expect(processTransform('translateX(10px)')).toEqual([{translateX: 10}]);
+    });
+
+    it('should keep the percentage unit for translate', () => {
+      expect(processTransform('translate(10%, 20px)')).toEqual([
+        {translate: ['10%', 20]},
+      ]);
+    });
+
+    it('should parse numbers without a leading zero', () => {
+      expect(processTransform('translateX(.5px)')).toEqual([{translateX: 0.5}]);
+      expect(processTransform('translateY(-.25px)')).toEqual([
+        {translateY: -0.25},
+      ]);
+      expect(processTransform('translate(.5px, .25px)')).toEqual([
+        {translate: [0.5, 0.25]},
+      ]);
+      expect(processTransform('matrix(.5, 0, 0, .5, 10, 20, 0, 0, 1)')).toEqual(
+        [{matrix: [0.5, 0, 0, 0.5, 10, 20, 0, 0, 1]}],
+      );
+    });
+  });
 });

packages/react-native/Libraries/StyleSheet/processTransform.js

@@ -60,11 +60,16 @@ const _getKeyAndValueFromCSSTransform: (
   key,
   args,
 ) => {
-  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+|%)?/g);
+  const argsWithUnitsRegex = new RegExp(
+    /([+-]?(?:\d+(?:\.\d*)?|\.\d+))([a-zA-Z]+|%)?/g,
+  );
 
   switch (key) {
     case 'matrix':
-      return {key, value: args.match(/[+-]?\d+(\.\d+)?/g)?.map(Number)};
+      return {
+        key,
+        value: args.match(/[+-]?(?:\d+(?:\.\d*)?|\.\d+)/g)?.map(Number),
+      };
     case 'translate':
     case 'translate3d':
       const parsedArgs = [];
@@ -73,7 +78,7 @@ const _getKeyAndValueFromCSSTransform: (
       let matches;
       while ((matches = argsWithUnitsRegex.exec(args))) {
         const value = Number(matches[1]);
-        const unitOfMeasurement = matches[3];
+        const unitOfMeasurement = matches[2];
 
         if (value !== 0 && !unitOfMeasurement) {
           missingUnitOfMeasurement = true;
@@ -125,7 +130,7 @@ const _getKeyAndValueFromCSSTransform: (
       }
 
       const value = Number(argMatches[1]);
-      const unitOfMeasurement = argMatches[3];
+      const unitOfMeasurement = argMatches[2];
 
       if (__DEV__) {
         invariant(
@@ -135,7 +140,16 @@ const _getKeyAndValueFromCSSTransform: (
         );
       }
 
-      return {key, value};
+      // The percentage unit is meaningful for translations, so keep it in the
+      // value instead of dropping it. A bare number is interpreted as points.
+      return {
+        key,
+        value:
+          unitOfMeasurement === '%' &&
+          (key === 'translateX' || key === 'translateY')
+            ? `${value}%`
+            : value,
+      };
 
     default:
       return {key, value: !isNaN(args) ? Number(args) : args};

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

@@ -24,6 +24,16 @@ TEST(CSSTransform, matrix_basic) {
   EXPECT_EQ(matrix.values[5], 6.0f);
 }
 
+TEST(CSSTransform, matrix_leading_dot) {
+  auto val =
+      parseCSSProperty<CSSTransformFunction>("matrix(.5, 0, 0, -.5, 10, 20)");
+  EXPECT_TRUE(std::holds_alternative<CSSMatrix>(val));
+  auto& matrix = std::get<CSSMatrix>(val);
+
+  EXPECT_EQ(matrix.values[0], 0.5f);
+  EXPECT_EQ(matrix.values[3], -0.5f);
+}
+
 TEST(CSSTransform, matrix_funky) {
   auto val =
       parseCSSProperty<CSSTransformFunction>("mAtRiX( 1  , \n2,3, 4, \t5, 6)");
@@ -181,6 +191,16 @@ TEST(CSSTransform, translate_x_pct) {
   EXPECT_EQ(std::get<CSSPercentage>(translate.value).value, 420.0f);
 }
 
+TEST(CSSTransform, translate_x_leading_dot) {
+  auto val = parseCSSProperty<CSSTransformFunction>("translateX(.5px)");
+  EXPECT_TRUE(std::holds_alternative<CSSTranslateX>(val));
+  auto& translate = std::get<CSSTranslateX>(val);
+
+  EXPECT_TRUE(std::holds_alternative<CSSLength>(translate.value));
+  EXPECT_EQ(std::get<CSSLength>(translate.value).value, 0.5f);
+  EXPECT_EQ(std::get<CSSLength>(translate.value).unit, CSSLengthUnit::Px);
+}
+
 TEST(CSSTransform, translate_x_funky) {
   auto val = parseCSSProperty<CSSTransformFunction>("transLaTeX(420%)");
   EXPECT_TRUE(std::holds_alternative<CSSTranslateX>(val));
@@ -224,6 +244,15 @@ TEST(CSSTransform, translate_y_pct) {
   EXPECT_EQ(std::get<CSSPercentage>(translate.value).value, 420.0f);
 }
 
+TEST(CSSTransform, translate_y_leading_dot) {
+  auto val = parseCSSProperty<CSSTransformFunction>("translateY(-.25%)");
+  EXPECT_TRUE(std::holds_alternative<CSSTranslateY>(val));
+  auto& translate = std::get<CSSTranslateY>(val);
+
+  EXPECT_TRUE(std::holds_alternative<CSSPercentage>(translate.value));
+  EXPECT_EQ(std::get<CSSPercentage>(translate.value).value, -0.25f);
+}
+
 TEST(CSSTransform, translate_y_funky) {
   auto val = parseCSSProperty<CSSTransformFunction>("transLaTeY(420%)");
   EXPECT_TRUE(std::holds_alternative<CSSTranslateY>(val));