fix: support radial-gradient with unspecified <ending-shape> (#385)

vercel · Feb 3, 2023 · 6ae34e5 · 6ae34e5 · vercel · Feb 3, 2023
1 parent d727919
commit 6ae34e5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/vendor/gradient-parser/index.js b/src/vendor/gradient-parser/index.js
@@ -50,7 +50,6 @@ GradientParser.parse = (function () {
  if (input.length > 0) {
  error('Invalid input not EOF')
  }
-
  return ast
  }
 
@@ -168,7 +167,6 @@ GradientParser.parse = (function () {
 
  function matchRadialOrientation() {
  var radialType = matchCircle() || matchEllipse()
-
  if (radialType) {
  radialType.at = matchAtPosition()
  } else {
@@ -180,11 +178,21 @@ GradientParser.parse = (function () {
  radialType.at = positionAt
  }
  } else {
- var defaultPosition = matchPositioning()
- if (defaultPosition) {
+ // If unspecified, it defaults to ellipse.
+ var positionAt = matchAtPosition()
+ if (positionAt) {
  radialType = {
- type: 'default-radial',
- at: defaultPosition,
+ type: 'shape',
+ value: 'ellipse',
+ at: positionAt
+ }
+ } else {
+ var defaultPosition = matchPositioning()
+ if (defaultPosition) {
+ radialType = {
+ type: 'default-radial',
+ at: defaultPosition,
+ }
  }
  }
  }

diff --git a/...radient-should-support-radial-gradient-with-unspecified-ending-shape-1-snap.png b/...radient-should-support-radial-gradient-with-unspecified-ending-shape-1-snap.png
diff --git a/test/gradient.test.tsx b/test/gradient.test.tsx
@@ -142,6 +142,35 @@ describe('Gradient', () => {
  )
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
+
+ it('should support radial-gradient with unspecified <ending-shape>', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <div
+ style={{
+ backgroundColor: "rgb(225, 168, 211)",
+ height: "100%",
+ width: '100%',
+ backgroundImage: "radial-gradient(at 3% 42%, rgb(228, 105, 236) 0px, transparent 50%)",
+ }}
+ ></div>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ }
+ )
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
  })
 
  it('should support advanced usage', async () => {