From b34e63539dc49b0b6586441f4df4d7d28fd47237 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Thu, 6 Feb 2025 21:02:24 -0800 Subject: [PATCH] Disallow invalid unitless lengths in filters (#49242) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/49242 Same bug as in D68740553, copy/pasted. Unitless numbers are not valid apart from `0`. Changelog: [General][Breaking] - Disallow invalid unitless lengths in filters Reviewed By: javache Differential Revision: D69210768 fbshipit-source-id: c20a3aa1e9dbc84f636235a70c58e4d96dbe86b9 --- .../__tests__/processFilter-test.js | 32 ++++++++++--------- .../Libraries/StyleSheet/processFilter.js | 4 +++ 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js index af0cbf0bf06..5612da4a35d 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js @@ -112,7 +112,7 @@ describe('processFilter', () => { }); it('string multiple filters', () => { expect( - processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90deg)'), + processFilter('brightness(0.5) opacity(0.5) blur(5px) hue-rotate(90deg)'), ).toEqual([{brightness: 0.5}, {opacity: 0.5}, {blur: 5}, {hueRotate: 90}]); }); it('string multiple filters with newlines', () => { @@ -124,7 +124,7 @@ describe('processFilter', () => { }); it('string multiple filters one invalid', () => { expect( - processFilter('brightness(0.5) opacity(0.5) blur(5) hue-rotate(90foo)'), + processFilter('brightness(0.5) opacity(0.5) blur(5px) hue-rotate(90foo)'), ).toEqual([]); }); it('string multiple same filters', () => { @@ -233,7 +233,7 @@ function createFilterPrimitive( function testDropShadow() { it('should parse string drop-shadow', () => { - expect(processFilter('drop-shadow(4px 4 10px red)')).toEqual([ + expect(processFilter('drop-shadow(4px 4px 10px red)')).toEqual([ { dropShadow: { offsetX: 4, @@ -246,7 +246,7 @@ function testDropShadow() { }); it('should parse string negative offsets drop-shadow', () => { - expect(processFilter('drop-shadow(-4 -4)')).toEqual([ + expect(processFilter('drop-shadow(-4px -4px)')).toEqual([ { dropShadow: { offsetX: -4, @@ -258,7 +258,9 @@ function testDropShadow() { it('should parse string multiple drop-shadows', () => { expect( - processFilter('drop-shadow(4 4) drop-shadow(4 4) drop-shadow(4 4)'), + processFilter( + 'drop-shadow(4px 4px) drop-shadow(4px 4px) drop-shadow(4px 4px)', + ), ).toEqual([ { dropShadow: { @@ -283,7 +285,7 @@ function testDropShadow() { it('should parse string drop-shadow with random whitespaces', () => { expect( - processFilter(' drop-shadow(4px 4 10px red) '), + processFilter(' drop-shadow(4px 4px 10px red) '), ).toEqual([ { dropShadow: { @@ -299,7 +301,7 @@ function testDropShadow() { it('should parse string drop-shadow with multiple filters', () => { expect( processFilter( - 'drop-shadow(4px 4 10px red) brightness(0.5) brightness(0.5)', + 'drop-shadow(4px 4px 10px red) brightness(0.5) brightness(0.5)', ), ).toEqual([ { @@ -316,7 +318,7 @@ function testDropShadow() { }); it('should parse string drop-shadow with color', () => { - expect(processFilter('drop-shadow(50 50 purple)')).toEqual([ + expect(processFilter('drop-shadow(50px 50px purple)')).toEqual([ { dropShadow: { offsetX: 50, @@ -328,7 +330,7 @@ function testDropShadow() { }); it('should parse string drop-shadow with rgba color', () => { - expect(processFilter('drop-shadow(50 50 rgba(0, 0, 0, 1))')).toEqual([ + expect(processFilter('drop-shadow(50px 50px rgba(0, 0, 0, 1))')).toEqual([ { dropShadow: { offsetX: 50, @@ -340,7 +342,7 @@ function testDropShadow() { }); it('should parse string with mixed case drop-shadow', () => { - expect(processFilter('DroP-sHaDOw(50 50 purple)')).toEqual([ + expect(processFilter('DroP-sHaDOw(50px 50px purple)')).toEqual([ { dropShadow: { offsetX: 50, @@ -359,7 +361,7 @@ function testDropShadow() { offsetX: 4, offsetY: 4, color: '#FFFFFF', - standardDeviation: '10', + standardDeviation: '10px', }, }, ]), @@ -376,7 +378,7 @@ function testDropShadow() { }); it('should fail to parse string comma separated drop-shadow', () => { - expect(processFilter('drop-shadow(4px, 4, 10px, red)')).toEqual([]); + expect(processFilter('drop-shadow(4px, 4px, 10px, red)')).toEqual([]); }); it('should fail to parse other symbols after args comma separated drop-shadow', () => { @@ -384,15 +386,15 @@ function testDropShadow() { }); it('should fail on color between lengths string drop-shadow', () => { - expect(processFilter('drop-shadow(10 red 10 10')).toEqual([]); + expect(processFilter('drop-shadow(10px red 10px 10px')).toEqual([]); }); it('should fail on color between offset & blur string drop-shadow', () => { - expect(processFilter('drop-shadow(10 10 red 10')).toEqual([]); + expect(processFilter('drop-shadow(10px 10px red 10px')).toEqual([]); }); it('should fail on negative blue', () => { - expect(processFilter('drop-shadow(10 10 -10')).toEqual([]); + expect(processFilter('drop-shadow(10px 10px -10px')).toEqual([]); }); it('should fail on invalid object drop-shadow', () => { diff --git a/packages/react-native/Libraries/StyleSheet/processFilter.js b/packages/react-native/Libraries/StyleSheet/processFilter.js index f91ddc0994a..8f77d16432d 100644 --- a/packages/react-native/Libraries/StyleSheet/processFilter.js +++ b/packages/react-native/Libraries/StyleSheet/processFilter.js @@ -317,5 +317,9 @@ function parseLength(length: string): ?number { return null; } + if (match[3] == null && match[1] !== '0') { + return null; + } + return Number(match[1]); }