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]); }