From 568293ab21742c286a7bf13b35b3d668f7cb5289 Mon Sep 17 00:00:00 2001
From: lynn <jcignorance@gmail.com>
Date: Tue, 29 Jul 2025 23:50:05 +0800
Subject: [PATCH] fix: zero value should make sense

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   8 +++----
 src/builder/gradient/radial.ts                |   4 ++--
 ...ld-make-sense-if-x-of-y-is-zero-1-snap.png | Bin 0 -> 3799 bytes
 test/gradient.test.tsx                        |  20 ++++++++++++++++++
 5 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-radial-gradient-should-make-sense-if-x-of-y-is-zero-1-snap.png

diff --git a/package.json b/package.json
index 539b003f..5be253df 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8f0adfb..13edb7a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
         specifier: 1.0.0-3
         version: 1.0.0-3
       css-gradient-parser:
-        specifier: ^0.0.16
-        version: 0.0.16
+        specifier: ^0.0.17
+        version: 0.0.17
       css-to-react-native:
         specifier: ^3.0.0
         version: 3.0.0
@@ -4205,8 +4205,8 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /css-gradient-parser@0.0.16:
-    resolution: {integrity: sha512-3O5QdqgFRUbXvK1x5INf1YkBz1UKSWqrd63vWsum8MNHDBYD5urm3QtxZbKU259OrEXNM26lP/MPY3d1IGkBgA==}
+  /css-gradient-parser@0.0.17:
+    resolution: {integrity: sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==}
     engines: {node: '>=16'}
     dev: false
 
diff --git a/src/builder/gradient/radial.ts b/src/builder/gradient/radial.ts
index a8fc4bd8..719eec0c 100644
--- a/src/builder/gradient/radial.ts
+++ b/src/builder/gradient/radial.ts
@@ -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
diff --git a/test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-radial-gradient-should-make-sense-if-x-of-y-is-zero-1-snap.png b/test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-radial-gradient-should-make-sense-if-x-of-y-is-zero-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..98f531911cc0a1b2f99668f61cc687075145a8f3
GIT binary patch
literal 3799
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
X&pSIa?!Z5+D-L{ccyH~VQ`!Fkb8d}l

literal 0
HcmV?d00001

diff --git a/test/gradient.test.tsx b/test/gradient.test.tsx
index a03126a5..5c7b7a8a 100644
--- a/test/gradient.test.tsx
+++ b/test/gradient.test.tsx
@@ -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