feat: Complete radial-gradient support (#454)

- radial-gradient should support default value when missed according to
[reference](https://w3c.github.io/csswg-drafts/css-images/#radial-gradients)
- radial-gradient `<position>` should support unit such as `vw`,
`vh`,`em`, `rem`, `%` etc
- support `rg-extent-keyword` such as `closest-corner`,
`farthest-side`,`closest-side`, `farthest-corner`
- support explicitly set rg-size like `radial-gradient(20% 20% at top
left, yellow, blue)`

Close #453
Close #222
Close #456

you can check
[it](https://satori-playground-git-fork-jackie1210-fix-453.vercel.sh/?share=XVLLbuMwDPwVgYtFdgE30TaOsxXSHPYBtIeeWqAXX-SIsdXKkiHLeTTIv5ey66LtSeQMySEpnmDjFIKAldK73DLWhqPB69Mp2oxVqMsqCDb5xfn3STKAe61C9QVTum2MPBK6NXgY0Wj_0x43QTtL3MaZrrYjK40u7W3Auo0U2oB-pJ66Nujt8a8j0Eb9z3QhN8-ld51Vt7UsUUy8VFqaizK-FPnDo0pY6RFtwgrT4c_3jqjivX5BweaXH6DHtzkzznv0fM7tOhqrdld-mPo6h-UihwHZadz_cQfCOONsuWDZO7XVxhD-jXM-QuNiWS19qeM2Yk5zmPRijPVyJNjIUDFFyXfz5XRxNb1cmHk2vaLq6c00SwfnIktfclivZjF6aHRGnQ4W_eRXtQfXCJZyklrfoDEuYY_OG7WaUSwljS8k4Jr4Vy2IE_QTg_hNO4HhEECk0VFYdCWIrTQtJoC1e9IPxyZeUdj3HtWJW_1fF6hABN_hOYEgC4qoovw-isP5FQ)

while it can render now, but it seems diffs from result in html in
opacity? worth to dig it.

Author: Jackie1210

src/builder/background-image.ts

@@ -1,5 +1,5 @@
 import CssDimension from '../vendor/parse-css-dimension/index.js'
-import { buildXMLString } from '../utils.js'
+import { buildXMLString, lengthToNumber } from '../utils.js'
 
 import gradient from '../vendor/gradient-parser/index.js'
 import { resolveImageData } from '../handler/image.js'
@@ -167,7 +167,8 @@ export default async function backgroundImage(
     left,
     top,
   }: { id: string; width: number; height: number; left: number; top: number },
-  { image, size, position, repeat }: Background
+  { image, size, position, repeat }: Background,
+  inheritableStyle: Record<string, number | string>
 ): Promise<string[]> {
   // Default to `repeat`.
   repeat = repeat || 'repeat'
@@ -327,8 +328,16 @@ export default async function backgroundImage(
       if (!orientation.at) {
         // Defaults to center.
       } else if (orientation.at.type === 'position') {
-        cx = orientation.at.value.x.value
-        cy = orientation.at.value.y.value
+        const pos = calcRadialGradient(
+          orientation.at.value.x,
+          orientation.at.value.y,
+          xDelta,
+          yDelta,
+          inheritableStyle.fontSize as number,
+          inheritableStyle
+        )
+        cx = pos.x
+        cy = pos.y
       } else {
         throw new Error(
           'orientation.at.type not implemented: ' + orientation.at.type
@@ -346,25 +355,14 @@ export default async function backgroundImage(
 
     // We currently only support `farthest-corner`:
     // https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()#values
-    const spread: Record<string, number> = {}
-
-    // Farest corner.
-    const fx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
-    const fy = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
-    if (shape === 'circle') {
-      spread.r = Math.sqrt(fx * fx + fy * fy)
-    } else if (shape === 'ellipse') {
-      // Spec: https://drafts.csswg.org/css-images/#typedef-size
-      // Get the aspect ratio of the closest-side size.
-      const ratio = fy !== 0 ? fx / fy : 1
-
-      // fx^2/a^2 + fy^2/b^2 = 1
-      // fx^2/(b*ratio)^2 + fy^2/b^2 = 1
-      // (fx^2+fy^2*ratio^2) = (b*ratio)^2
-      // b = sqrt(fx^2+fy^2*ratio^2)/ratio
-      spread.ry = Math.sqrt(fx * fx + fy * fy * ratio * ratio) / ratio
-      spread.rx = spread.ry * ratio
-    }
+    const spread = calcRadius(
+      shape as Shape,
+      orientation.style,
+      inheritableStyle.fontSize as number,
+      { x: cx, y: cy },
+      [xDelta, yDelta],
+      inheritableStyle
+    )
 
     // TODO: check for repeat-x/repeat-y
     const defs = buildXMLString(
@@ -404,6 +402,13 @@ export default async function backgroundImage(
             fill: '#fff',
           })
         ) +
+        buildXMLString('rect', {
+          x: 0,
+          y: 0,
+          width: xDelta,
+          height: yDelta,
+          fill: stops.at(-1).color,
+        }) +
         buildXMLString(shape, {
           cx: cx,
           cy: cy,
@@ -459,3 +464,178 @@ export default async function backgroundImage(
 
   throw new Error(`Invalid background image: "${image}"`)
 }
+
+type PositionKeyWord = 'center' | 'left' | 'right' | 'top' | 'bottom'
+interface Position {
+  type: string
+  value: PositionKeyWord
+}
+
+function calcRadialGradient(
+  cx: Position,
+  cy: Position,
+  xDelta: number,
+  yDelta: number,
+  baseFontSize: number,
+  style: Record<string, string | number>
+) {
+  const pos: { x: number; y: number } = { x: xDelta / 2, y: yDelta / 2 }
+  if (cx.type === 'position-keyword') {
+    Object.assign(pos, calcPos(cx.value, xDelta, yDelta, 'x'))
+  } else {
+    pos.x = lengthToNumber(
+      `${cx.value}${cx.type}`,
+      baseFontSize,
+      xDelta,
+      style,
+      true
+    )
+  }
+
+  if (cy.type === 'position-keyword') {
+    Object.assign(pos, calcPos(cy.value, xDelta, yDelta, 'y'))
+  } else {
+    pos.y = lengthToNumber(
+      `${cy.value}${cy.type}`,
+      baseFontSize,
+      yDelta,
+      style,
+      true
+    )
+  }
+
+  return pos
+}
+
+function calcPos(
+  key: PositionKeyWord,
+  xDelta: number,
+  yDelta: number,
+  dir: 'x' | 'y'
+) {
+  switch (key) {
+    case 'center':
+      return { [dir]: dir === 'x' ? xDelta / 2 : yDelta / 2 }
+    case 'left':
+      return { x: 0 }
+    case 'top':
+      return { y: 0 }
+    case 'right':
+      return { x: xDelta }
+    case 'bottom':
+      return { y: yDelta }
+  }
+}
+
+type Shape = 'circle' | 'ellipse'
+function calcRadius(
+  shape: Shape,
+  endingShape: Array<{ type: string; value: string }>,
+  baseFontSize: number,
+  centerAxis: { x: number; y: number },
+  length: [number, number],
+  inheritableStyle: Record<string, string | number>
+) {
+  const [xDelta, yDelta] = length
+  const { x: cx, y: cy } = centerAxis
+  const spread: Record<string, number> = {}
+  let fx = 0
+  let fy = 0
+  const isExtentKeyWord = endingShape.some((v) => v.type === 'extent-keyword')
+
+  if (!isExtentKeyWord) {
+    if (endingShape.some((v) => v.value.startsWith('-'))) {
+      throw new Error(
+        'disallow setting negative values to the size of the shape. Check https://w3c.github.io/csswg-drafts/css-images/#valdef-rg-size-length-0'
+      )
+    }
+    if (shape === 'circle') {
+      return {
+        r: lengthToNumber(
+          `${endingShape[0].value}${endingShape[0].type}`,
+          baseFontSize,
+          xDelta,
+          inheritableStyle,
+          true
+        ),
+      }
+    } else {
+      return {
+        rx: lengthToNumber(
+          `${endingShape[0].value}${endingShape[0].type}`,
+          baseFontSize,
+          xDelta,
+          inheritableStyle,
+          true
+        ),
+        ry: lengthToNumber(
+          `${endingShape[1].value}${endingShape[1].type}`,
+          baseFontSize,
+          yDelta,
+          inheritableStyle,
+          true
+        ),
+      }
+    }
+  }
+
+  switch (endingShape[0].value) {
+    case 'farthest-corner':
+      fx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
+      fy = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
+      break
+    case 'closest-corner':
+      fx = Math.min(Math.abs(xDelta - cx), Math.abs(cx))
+      fy = Math.min(Math.abs(yDelta - cy), Math.abs(cy))
+      break
+    case 'farthest-side':
+      if (shape === 'circle') {
+        spread.r = Math.max(
+          Math.abs(xDelta - cx),
+          Math.abs(cx),
+          Math.abs(yDelta - cy),
+          Math.abs(cy)
+        )
+      } else {
+        spread.rx = Math.max(Math.abs(xDelta - cx), Math.abs(cx))
+        spread.ry = Math.max(Math.abs(yDelta - cy), Math.abs(cy))
+      }
+      return spread
+    case 'closest-side':
+      if (shape === 'circle') {
+        spread.r = Math.min(
+          Math.abs(xDelta - cx),
+          Math.abs(cx),
+          Math.abs(yDelta - cy),
+          Math.abs(cy)
+        )
+      } else {
+        spread.rx = Math.min(Math.abs(xDelta - cx), Math.abs(cx))
+        spread.ry = Math.min(Math.abs(yDelta - cy), Math.abs(cy))
+      }
+
+      return spread
+  }
+  if (shape === 'circle') {
+    spread.r = Math.sqrt(fx * fx + fy * fy)
+  } else {
+    // Spec: https://drafts.csswg.org/css-images/#typedef-size
+    // Get the aspect ratio of the closest-side size.
+    const ratio = fy !== 0 ? fx / fy : 1
+
+    if (fx === 0) {
+      spread.rx = 0
+      spread.ry = 0
+    } else {
+      // fx^2/a^2 + fy^2/b^2 = 1
+      // fx^2/(b*ratio)^2 + fy^2/b^2 = 1
+      // (fx^2+fy^2*ratio^2) = (b*ratio)^2
+      // b = sqrt(fx^2+fy^2*ratio^2)/ratio
+
+      spread.ry = Math.sqrt(fx * fx + fy * fy * ratio * ratio) / ratio
+      spread.rx = spread.ry * ratio
+    }
+  }
+
+  return spread
+}

src/builder/rect.ts

@@ -28,7 +28,8 @@ export default async function rect(
     src?: string
     debug?: boolean
   },
-  style: Record<string, number | string>
+  style: Record<string, number | string>,
+  inheritableStyle: Record<string, number | string>
 ) {
   if (style.display === 'none') return ''
 
@@ -75,7 +76,8 @@ export default async function rect(
       const background = (style.backgroundImage as any)[index]
       const image = await backgroundImage(
         { id: id + '_' + index, width, height, left, top },
-        background
+        background,
+        inheritableStyle
       )
       if (image) {
         // Background images that come first in the array are rendered last.

src/layout.ts

@@ -196,7 +196,8 @@ export default async function* layout(
         isInheritingTransform,
         debug,
       },
-      computedStyle
+      computedStyle,
+      newInheritableStyle
     )
   } else if (type === 'svg') {
     // When entering a <svg> node, we need to convert it to a <img> with the
@@ -214,7 +215,8 @@ export default async function* layout(
         isInheritingTransform,
         debug,
       },
-      computedStyle
+      computedStyle,
+      newInheritableStyle
     )
   } else {
     const display = style?.display
@@ -231,7 +233,8 @@ export default async function* layout(
     }
     baseRenderResult = await rect(
       { id, left, top, width, height, isInheritingTransform, debug },
-      computedStyle
+      computedStyle,
+      newInheritableStyle
     )
   }
 

src/vendor/gradient-parser/index.js

@@ -23,7 +23,7 @@ GradientParser.parse = (function () {
     positionKeywords: /^(left|center|right|top|bottom)/i,
     pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
     percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
-    emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+    emLikeValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))(r?em|vw|vh)/,
     angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
     zeroValue: /[0]/,
     startCall: /^\(/,
@@ -84,6 +84,42 @@ GradientParser.parse = (function () {
     )
   }
 
+  function getDefaultRadialGradient(orientation = {}) {
+    const res = { ...orientation }
+
+    Object.assign(res, {
+      style: (res.style || []).length > 0
+        ? res.style
+        : [{ type: 'extent-keyword', value: 'farthest-corner' }],
+      at: {
+        type: 'position',
+        value: {
+          x: {
+            type: 'position-keyword',
+            value: 'center',
+            ...(res.at?.value?.x || {})
+          },
+          y: {
+            type: 'position-keyword',
+            value: 'center',
+            ...(res.at?.value?.y || {})
+          }
+        }
+      }}
+    )
+
+    if (!orientation.value) {
+      Object.assign(res, {
+        type: 'shape',
+        value: res.style.some(v => ['%', 'extent-keyword'].includes(v.type))
+          ? 'ellipse'
+          : 'circle'
+      })
+    }
+
+    return res
+  }
+
   function matchGradient(
     gradientType,
     pattern,
@@ -102,7 +138,9 @@ GradientParser.parse = (function () {
 
       return {
         type: gradientType,
-        orientation: orientation,
+        orientation: gradientType.endsWith('radial-gradient')
+          ? orientation?.map(v => getDefaultRadialGradient(v)) ?? [getDefaultRadialGradient()]
+          : orientation,
         colorStops: matchListing(matchColorStop),
       }
     })
@@ -166,59 +204,40 @@ GradientParser.parse = (function () {
   }
 
   function matchRadialOrientation() {
-    var radialType = matchCircle() || matchEllipse()
-    if (radialType) {
-      radialType.at = matchAtPosition()
-    } else {
-      var extent = matchExtentKeyword()
-      if (extent) {
-        radialType = extent
-        var positionAt = matchAtPosition()
-        if (positionAt) {
-          radialType.at = positionAt
-        }
-      } else {
-        // If unspecified, it defaults to ellipse.
-        var positionAt = matchAtPosition()
-        if (positionAt) {
-          radialType = {
-            type: 'shape',
-            value: 'ellipse',
-            at: positionAt
-          }
-        } else {
-          var defaultPosition = matchPositioning()
-          if (defaultPosition) {
-            radialType = {
-              type: 'default-radial',
-              at: defaultPosition,
-            }
-          }
-        }
-      }
-    }
+    const pre = preMatchRadialOrientation()
+    const at = matchAtPosition()
+
+    if (!pre && !at) return
 
-    return radialType
+    return { ...pre, at }
   }
 
-  function matchCircle() {
-    var circle = match('shape', /^(circle)/i, 0)
+  function preMatchRadialOrientation() {
+    let rgEndingShape = matchCircle() || matchEllipse()
+    let rgSize = matchExtentKeyword() || matchLength() || matchDistance()
+    const extra = match('%', tokens.percentageValue, 1)
 
-    if (circle) {
-      circle.style = matchLength() || matchExtentKeyword()
+    if (rgEndingShape) {
+      return {
+        ...rgEndingShape,
+        style: [rgSize, extra].filter(v => v)
+      }
+    } else if (rgSize){
+      return {
+        style: [rgSize, extra].filter(v => v),
+        ...(matchCircle() || matchEllipse())
+      }
+    } else {
+      //
     }
+  }
 
-    return circle
+  function matchCircle() {
+    return match('shape', /^(circle)/i, 0)
   }
 
   function matchEllipse() {
-    var ellipse = match('shape', /^(ellipse)/i, 0)
-
-    if (ellipse) {
-      ellipse.style = matchDistance() || matchExtentKeyword()
-    }
-
-    return ellipse
+    return match('shape', /^(ellipse)/i, 0)
   }
 
   function matchExtentKeyword() {
@@ -337,7 +356,17 @@ GradientParser.parse = (function () {
   }
 
   function matchLength() {
-    return match('px', tokens.pixelValue, 1) || match('em', tokens.emValue, 1)
+    return match('px', tokens.pixelValue, 1) || matchRelativeLength(tokens.emLikeValue, 1)
+  }
+
+  function matchRelativeLength(pattern, captureIndex) {
+    var captures = scan(pattern)
+    if (captures) {
+      return {
+        type: captures[5],
+        value: captures[captureIndex],
+      }
+    }
   }
 
   function match(type, pattern, captureIndex) {

test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-radial-gradient-should-support-default-value-1-snap.png

@@ -95,4 +95,32 @@ describe('Error', () => {
     })
     expect(typeof svg).toBe('string')
   })
+
+  it('should not allowed to set negative value to rg-size', async () => {
+    const result = satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundImage:
+            'radial-gradient(-20% 20% at top left, yellow, blue)',
+          fontSize: 32,
+          fontWeight: 600,
+        }}
+      ></div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+
+    expect(result).rejects.toThrowError(
+      'disallow setting negative values to the size of the shape. Check https://w3c.github.io/csswg-drafts/css-images/#valdef-rg-size-length-0'
+    )
+  })
 })

test/__image_snapshots__/gradient-test-tsx-test-gradient-test-tsx-gradient-radial-gradient-should-support-explicitly-setting-rg-size-1-snap.png

@@ -172,6 +172,118 @@ describe('Gradient', () => {
       )
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
+
+    it('should support default value', async () => {
+      const svg = await satori(
+        <div
+          style={{
+            backgroundColor: 'white',
+            backgroundImage: 'radial-gradient(blue, red)',
+            backgroundSize: '100px 100px',
+            height: '100%',
+            width: '100%',
+          }}
+        ></div>,
+        {
+          width: 100,
+          height: 100,
+          fonts,
+        }
+      )
+      expect(toImage(svg, 100)).toMatchImageSnapshot()
+    })
+
+    it('should support releative unit', async () => {
+      const svgs = await Promise.all(
+        [
+          'radial-gradient(ellipse at 1em 25px,blue, red)',
+          'radial-gradient(circle at 1rem 25px,blue, red)',
+          'radial-gradient(circle at 2vw 25px,blue, red)',
+          'radial-gradient(circle at 1vh 50%,blue, red)',
+        ].map((backgroundImage) =>
+          satori(
+            <div
+              style={{
+                backgroundColor: 'white',
+                backgroundImage,
+                backgroundSize: '100px 100px',
+                height: '100%',
+                width: '100%',
+              }}
+            ></div>,
+            {
+              width: 100,
+              height: 100,
+              fonts,
+            }
+          )
+        )
+      )
+      svgs.forEach((svg) => {
+        expect(toImage(svg, 100)).toMatchImageSnapshot()
+      })
+    })
+
+    it('should support rg-size with rg-extent-keyword', async () => {
+      const svgs = await Promise.all(
+        [
+          'radial-gradient(closest-corner at 50% 50%, yellow, green)',
+          'radial-gradient(farthest-side at left bottom, red, yellow 50px, green)',
+          'radial-gradient(closest-side at 20px 30px, red, yellow, green)',
+        ].map((backgroundImage) =>
+          satori(
+            <div
+              style={{
+                backgroundColor: 'white',
+                backgroundImage,
+                backgroundSize: '100px 100px',
+                height: '100%',
+                width: '100%',
+              }}
+            ></div>,
+            {
+              width: 100,
+              height: 100,
+              fonts,
+            }
+          )
+        )
+      )
+
+      svgs.forEach((svg) => {
+        expect(toImage(svg, 100)).toMatchImageSnapshot()
+      })
+    })
+
+    it('should support explicitly setting rg-size', async () => {
+      const svgs = await Promise.all(
+        [
+          'radial-gradient(20% 20% at top left, yellow, blue)',
+          'radial-gradient(30px at top left, yellow, blue)',
+        ].map((backgroundImage) =>
+          satori(
+            <div
+              style={{
+                backgroundColor: 'white',
+                backgroundImage,
+                backgroundSize: '100px 100px',
+                height: '100%',
+                width: '100%',
+              }}
+            ></div>,
+            {
+              width: 100,
+              height: 100,
+              fonts,
+            }
+          )
+        )
+      )
+
+      svgs.forEach((svg) => {
+        expect(toImage(svg, 100)).toMatchImageSnapshot()
+      })
+    })
   })
 
   it('should support advanced usage', async () => {