closes #163

vercel · Oct 12, 2022 · d10aca2 · d10aca2
1 parent c4e657f
commit d10aca2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/vendor/gradient-parser/index.js b/src/vendor/gradient-parser/index.js
@@ -4,6 +4,10 @@
 
 var GradientParser = GradientParser || {}
 
+// https://w3c.github.io/csswg-drafts/css-images-3/#linear-gradients
+// It may be omitted; if so, it defaults to to bottom.
+const FALLBACK_LINEAR_ORIENTATION = { type: 'directional', value: 'bottom' }
+
 GradientParser.parse = (function () {
   var tokens = {
     linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
@@ -58,12 +62,14 @@ GradientParser.parse = (function () {
       matchGradient(
         'linear-gradient',
         tokens.linearGradient,
-        matchLinearOrientation
+        matchLinearOrientation,
+        FALLBACK_LINEAR_ORIENTATION
       ) ||
       matchGradient(
         'repeating-linear-gradient',
         tokens.repeatingLinearGradient,
-        matchLinearOrientation
+        matchLinearOrientation,
+        FALLBACK_LINEAR_ORIENTATION
       ) ||
       matchGradient(
         'radial-gradient',
@@ -78,13 +84,20 @@ GradientParser.parse = (function () {
     )
   }
 
-  function matchGradient(gradientType, pattern, orientationMatcher) {
+  function matchGradient(
+    gradientType,
+    pattern,
+    orientationMatcher,
+    fallbackOrientation
+  ) {
     return matchCall(pattern, function (captures) {
       var orientation = orientationMatcher()
       if (orientation) {
         if (!scan(tokens.comma)) {
           error('Missing comma before color stops')
         }
+      } else {
+        orientation = fallbackOrientation
       }
 
       return {

diff --git a/...ient-2-m-22-mshould-support-linear-gradient-with-omitted-orientation-1-snap.png b/...ient-2-m-22-mshould-support-linear-gradient-with-omitted-orientation-1-snap.png
diff --git a/test/gradient.test.tsx b/test/gradient.test.tsx
@@ -66,6 +66,25 @@ describe('Gradient', () => {
       )
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
+
+    it('should support linear-gradient with omitted orientation', async () => {
+      const svg = await satori(
+        <div
+          style={{
+            backgroundColor: 'green',
+            backgroundImage: 'linear-gradient(red, blue)',
+            height: '100%',
+            width: '100%',
+          }}
+        ></div>,
+        {
+          width: 100,
+          height: 100,
+          fonts,
+        }
+      )
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
   })
 
   describe('radial-gradient', () => {