fix: zero value should make sense (#696)

Author: Jackie1210

package.json

@@ -103,7 +103,7 @@
     "@shuding/opentype.js": "1.4.0-beta.0",
     "css-background-parser": "^0.1.0",
     "css-box-shadow": "1.0.0-3",
-    "css-gradient-parser": "^0.0.16",
+    "css-gradient-parser": "^0.0.17",
     "css-to-react-native": "^3.0.0",
     "emoji-regex-xs": "^2.0.1",
     "escape-html": "^1.0.3",

pnpm-lock.yaml

@@ -153,7 +153,7 @@ function calcRadialGradient(
         xDelta,
         style,
         true
-      ) || xDelta / 2
+      ) ?? xDelta / 2
   }
 
   if (cy.type === 'keyword') {
@@ -169,7 +169,7 @@ function calcRadialGradient(
         yDelta,
         style,
         true
-      ) || yDelta / 2
+      ) ?? yDelta / 2
   }
 
   return pos

src/builder/gradient/radial.ts

@@ -172,6 +172,26 @@ describe('Gradient', () => {
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
 
+    it('should make sense if x of y is zero', async () => {
+      const svg = await satori(
+        <div
+          style={{
+            backgroundColor: 'white',
+            backgroundImage: 'radial-gradient(circle at 0px 0%, blue, red)',
+            backgroundSize: '100px 100px',
+            height: '100%',
+            width: '100%',
+          }}
+        ></div>,
+        {
+          width: 100,
+          height: 100,
+          fonts,
+        }
+      )
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+
     it('should support radial-gradient with unspecified <ending-shape>', async () => {
       const svg = await satori(
         <div