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 <length> apart from `0`.

Changelog:
[General][Breaking] - Disallow invalid unitless lengths in filters

Reviewed By: javache

Differential Revision: D69210768

fbshipit-source-id: c20a3aa1e9dbc84f636235a70c58e4d96dbe86b9
This commit is contained in:
Nick Gerleman
2025-02-06 21:02:24 -08:00
committed by Facebook GitHub Bot
parent e2a776f322
commit b34e63539d
2 changed files with 21 additions and 15 deletions
@@ -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', () => {
@@ -317,5 +317,9 @@ function parseLength(length: string): ?number {
return null;
}
if (match[3] == null && match[1] !== '0') {
return null;
}
return Number(match[1]);
}