fix: repeating-linear-gradient effect with correct cycle

Author: Jackie1210

src/builder/gradient/linear.ts

@@ -56,7 +56,7 @@ export function buildLinearGradient(
     : points
 
   const stops = normalizeStops(
-    length,
+    repeating ? resolveRepeatingCycle(parsed.stops, length) : length,
     parsed.stops,
     inheritableStyle,
     repeating,
@@ -103,6 +103,16 @@ export function buildLinearGradient(
   return [patternId, defs]
 }
 
+function resolveRepeatingCycle(stops: ColorStop[], length: number) {
+  const last = stops[stops.length - 1]
+  const { offset } = last
+  if (!offset) return length
+
+  if (offset.unit === '%') return (Number(offset.value) / 100) * length
+
+  return Number(offset.value)
+}
+
 function resolveXYFromDirection(dir: string) {
   let x1 = 0,
     y1 = 0,

test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-repeating-linear-gradient-should-compute-correct-cycle-1-snap.png

@@ -555,5 +555,33 @@ describe('Gradient', () => {
       )
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
+
+    it('should compute correct cycle', async () => {
+      const svgs = await Promise.all(
+        [
+          `repeating-linear-gradient(45deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px)`,
+          `repeating-linear-gradient(45deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10%)`,
+        ].map((backgroundImage) =>
+          satori(
+            <div
+              style={{
+                backgroundColor: 'white',
+                backgroundImage,
+                width: '100px',
+                height: '100px',
+              }}
+            ></div>,
+            {
+              width: 100,
+              height: 100,
+              fonts,
+            }
+          )
+        )
+      )
+      svgs.forEach((svg) => {
+        expect(toImage(svg, 100)).toMatchImageSnapshot()
+      })
+    })
   })
 })