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.

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
  )
  }