feat: enhance processClipPath with additional geometry box and shape parsing tests

Author: paradowstack

packages/react-native/Libraries/StyleSheet/__tests__/processClipPath-test.js

@@ -29,6 +29,30 @@ describe('processClipPath', () => {
         geometryBox: 'content-box',
       });
     });
+
+    it('should parse margin-box', () => {
+      expect(processClipPath('margin-box')).toEqual({
+        geometryBox: 'margin-box',
+      });
+    });
+
+    it('should parse fill-box', () => {
+      expect(processClipPath('fill-box')).toEqual({
+        geometryBox: 'fill-box',
+      });
+    });
+
+    it('should parse stroke-box', () => {
+      expect(processClipPath('stroke-box')).toEqual({
+        geometryBox: 'stroke-box',
+      });
+    });
+
+    it('should parse view-box', () => {
+      expect(processClipPath('view-box')).toEqual({
+        geometryBox: 'view-box',
+      });
+    });
   });
 
   describe('inset() function', () => {
@@ -56,6 +80,18 @@ describe('processClipPath', () => {
       });
     });
 
+    it('should parse inset with three values', () => {
+      expect(processClipPath('inset(10px 20px 30px)')).toEqual({
+        shape: {
+          type: 'inset',
+          top: 10,
+          right: 20,
+          left: 20,
+          bottom: 30,
+        },
+      });
+    });
+
     it('should parse inset with four values', () => {
       expect(processClipPath('inset(10px 20px 30px 40px)')).toEqual({
         shape: {
@@ -128,6 +164,17 @@ describe('processClipPath', () => {
       });
     });
 
+    it('should parse circle with percentage position', () => {
+      expect(processClipPath('circle(50px at 25% 75%)')).toEqual({
+        shape: {
+          type: 'circle',
+          r: 50,
+          cx: '25%',
+          cy: '75%',
+        },
+      });
+    });
+
     it('should parse circle with percentage radius', () => {
       expect(processClipPath('circle(50%)')).toEqual({
         shape: {
@@ -179,6 +226,18 @@ describe('processClipPath', () => {
       });
     });
 
+    it('should parse ellipse with percentage position', () => {
+      expect(processClipPath('ellipse(50px 25px at 10% 20%)')).toEqual({
+        shape: {
+          type: 'ellipse',
+          rx: 50,
+          ry: 25,
+          cx: '10%',
+          cy: '20%',
+        },
+      });
+    });
+
     it('should parse empty ellipse', () => {
       expect(processClipPath('ellipse()')).toEqual({
         shape: {
@@ -461,6 +520,61 @@ describe('processClipPath', () => {
     });
   });
 
+  describe('case-insensitive parsing', () => {
+    it('should parse case-insensitive inset', () => {
+      expect(processClipPath('InSeT(10Px)')).toEqual({
+        shape: {
+          type: 'inset',
+          top: 10,
+          right: 10,
+          bottom: 10,
+          left: 10,
+        },
+      });
+    });
+
+    it('should parse case-insensitive circle', () => {
+      expect(processClipPath('CiRcLe(50Px)')).toEqual({
+        shape: {
+          type: 'circle',
+          r: 50,
+        },
+      });
+    });
+
+    it('should parse case-insensitive geometry box', () => {
+      expect(processClipPath('BoRdEr-BoX')).toEqual({
+        geometryBox: 'border-box',
+      });
+    });
+  });
+
+  describe('whitespace handling', () => {
+    it('should handle extra whitespace in inset', () => {
+      expect(processClipPath('  inset(  10px   20px   )  ')).toEqual({
+        shape: {
+          type: 'inset',
+          top: 10,
+          bottom: 10,
+          right: 20,
+          left: 20,
+        },
+      });
+    });
+
+    it('should handle newlines in input', () => {
+      expect(processClipPath('inset(10px\n20px)')).toEqual({
+        shape: {
+          type: 'inset',
+          top: 10,
+          bottom: 10,
+          right: 20,
+          left: 20,
+        },
+      });
+    });
+  });
+
   describe('invalid values', () => {
     it('should return null for null', () => {
       expect(processClipPath(null)).toBeNull();
@@ -470,6 +584,10 @@ describe('processClipPath', () => {
       expect(processClipPath(undefined)).toBeNull();
     });
 
+    it('should return null for empty string', () => {
+      expect(processClipPath('')).toBeNull();
+    });
+
     it('should return null for invalid string', () => {
       expect(processClipPath('invalid')).toBeNull();
     });
@@ -482,12 +600,40 @@ describe('processClipPath', () => {
       expect(processClipPath('inset(invalid)')).toBeNull();
     });
 
+    it('should return null for inset with too many values', () => {
+      expect(processClipPath('inset(10px 20px 30px 40px 50px)')).toBeNull();
+    });
+
     it('should return null for circle with invalid radius', () => {
       expect(processClipPath('circle(invalid)')).toBeNull();
     });
 
+    it('should return null for ellipse with invalid radii', () => {
+      expect(processClipPath('ellipse(invalid)')).toBeNull();
+    });
+
     it('should return null for polygon with invalid points', () => {
       expect(processClipPath('polygon(0)')).toBeNull();
     });
+
+    it('should return null for polygon with too few points', () => {
+      expect(processClipPath('polygon(0px 0px)')).toBeNull();
+    });
+
+    it('should return null for rect with invalid values', () => {
+      expect(processClipPath('rect(invalid)')).toBeNull();
+    });
+
+    it('should return null for rect with wrong number of values', () => {
+      expect(processClipPath('rect(10px 20px)')).toBeNull();
+    });
+
+    it('should return null for xywh with invalid values', () => {
+      expect(processClipPath('xywh(invalid)')).toBeNull();
+    });
+
+    it('should return null for xywh with wrong number of values', () => {
+      expect(processClipPath('xywh(10px 20px)')).toBeNull();
+    });
   });
 });

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

@@ -119,7 +119,9 @@ export default function processClipPath(
   }
 
   if (typeof clipPath === 'string') {
-    return parseClipPathString(clipPath.replace(/\n/g, ' ').trim());
+    return parseClipPathString(
+      clipPath.replace(/\n/g, ' ').toLowerCase().trim(),
+    );
   }
 
   // Process object input
@@ -274,6 +276,10 @@ function processEllipseShape(shape: EllipseShapeValue): ?ParsedEllipseShape {
 }
 
 function processPolygonShape(shape: PolygonShapeValue): ?ParsedPolygonShape {
+  if (shape.points.length < 3) {
+    return null;
+  }
+
   const result: ParsedPolygonShape = {
     type: 'polygon',
     points: [],
@@ -624,7 +630,7 @@ function parsePolygonFunction(args: string): ?ParsedPolygonShape {
     points.push({x, y});
   }
 
-  if (points.length === 0) {
+  if (points.length < 3) {
     return null;
   }