buninu-browser 0.0.2

package/lib/paint/display-list.js

@@ -0,0 +1,359 @@
+/**
+ * Converts layout output into an immutable, serializable display list.
+ *
+ * Paint order follows CSS 2 Appendix E for in-flow, non-positioned content:
+ * block and inline box decorations in tree order (outer box-shadow,
+ * background color, gradient layers bottom-up, per-side borders), then inline content
+ * (text and replaced images). `background-clip: text` moves an element's
+ * gradient onto its text instead of its box. Positioned boxes form paint
+ * layers painted after in-flow content in (z-index, tree order); negative
+ * z-index layers paint beneath it.
+ *
+ * Coordinates are document CSS pixels; scrolling, device scale, and culling
+ * belong to the rasterizer.
+ *
+ * Image resources are referenced by index into the non-enumerable `images`
+ * array so `JSON.stringify(displayList)` stays a plain debug/reftest dump.
+ */
+import { gradientLayers, resolveGradient } from "./gradient.js";
+
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+
+/**
+ * @param layout the layout result
+ * @param tree the render tree it was laid out from; without it, visibility,
+ *   opacity and overflow clipping of ancestors are not applied.
+ */
+export function buildDisplayList(layout, tree = null) {
+  const items = [];
+  const images = [];
+  const effects = paintEffects(layout, tree);
+  // Text styled with background-clip:text takes its gradient from the owning box.
+  const textGradients = new Map();
+  for (const box of layout.boxes) {
+    const style = box.style;
+    if (style?.backgroundClip !== "text" || textGradients.has(style)) continue;
+    const gradient = gradientLayers(style.backgroundImage)
+      .map((source) => resolveGradient(source, box, style.fontSize))
+      .filter(Boolean)
+      .at(-1);
+    if (gradient) textGradients.set(style, gradient);
+  }
+
+  // Layers are identified by their creation order; the root layer is order 0.
+  // Stacking contexts form a tree (CSS 2 Appendix E): a context paints its
+  // negative-z children, its own content, then its z >= 0 children (z-index
+  // auto counts as 0), each group in z then tree order.
+  const layers = new Map([[0, { z: 0, order: 0, context: true, parent: null }]]);
+  const boxesByLayer = new Map();
+  const fragmentsByLayer = new Map();
+  const add = (map, entry) => {
+    const order = entry.layer?.order ?? 0;
+    if (entry.layer) layers.set(order, entry.layer);
+    let list = map.get(order);
+    if (!list) map.set(order, list = []);
+    list.push(entry);
+  };
+  for (const box of layout.boxes) add(boxesByLayer, box);
+  for (const fragment of layout.fragments) add(fragmentsByLayer, fragment);
+  const children = new Map();
+  for (const layer of layers.values()) {
+    if (layer.order === 0) continue;
+    const parent = layer.parent?.order ?? 0;
+    let list = children.get(parent);
+    if (!list) children.set(parent, list = []);
+    list.push(layer);
+  }
+  const paintLayerContent = (layer) => {
+    for (const box of boxesByLayer.get(layer.order) ?? []) paintBox(box);
+    for (const fragment of fragmentsByLayer.get(layer.order) ?? []) paintFragment(fragment);
+  };
+  const paintContext = (context) => {
+    const members = (children.get(context.order) ?? []).sort((left, right) => left.z - right.z || left.order - right.order);
+    for (const layer of members) if (layer.z < 0) paintMember(layer);
+    paintLayerContent(context);
+    for (const layer of members) if (layer.z >= 0) paintMember(layer);
+  };
+  const paintMember = (layer) => (layer.context ? paintContext(layer) : paintLayerContent(layer));
+  paintContext(layers.get(0));
+
+  function paintBox(box) {
+    const style = box.style;
+    if (!style) return;
+    const effect = effects(box.nodeId, "box");
+    if (!effect) return;
+    const start = items.length;
+    const rect = { x: box.x, y: box.y, width: box.width, height: box.height };
+    const radii = cornerRadii(style, rect);
+    for (const shadow of style.boxShadow ?? []) {
+      if (shadow.inset || shadow.color === TRANSPARENT) continue;
+      const shadowRect = {
+        x: rect.x + shadow.x - shadow.spread,
+        y: rect.y + shadow.y - shadow.spread,
+        width: rect.width + shadow.spread * 2,
+        height: rect.height + shadow.spread * 2,
+      };
+      items.push({
+        op: "drawShadow",
+        nodeId: box.nodeId,
+        rect: shadowRect,
+        radii: radii.x > 0 || radii.y > 0
+          ? { x: Math.max(0, radii.x + shadow.spread), y: Math.max(0, radii.y + shadow.spread) }
+          : radii,
+        blur: shadow.blur,
+        color: shadow.color,
+        // The shadow is clipped out of the casting box's own border box.
+        clip: rect,
+        clipRadii: radii,
+        bounds: inflate(shadowRect, shadow.blur),
+      });
+    }
+    const gradients = gradientLayers(style.backgroundImage)
+      .map((source) => resolveGradient(source, rect, style.fontSize))
+      .filter(Boolean);
+    if (style.backgroundClip !== "text") {
+      if (style.backgroundColor && style.backgroundColor !== TRANSPARENT) {
+        items.push({ op: "fillRect", nodeId: box.nodeId, rect, radii, color: style.backgroundColor, bounds: rect });
+      }
+      for (const gradient of gradients.reverse()) {
+        items.push({ op: "fillRect", nodeId: box.nodeId, rect, radii, gradient, bounds: rect });
+      }
+    }
+    const widths = style.borderWidths ?? [0, 0, 0, 0];
+    const visible = widths.some((width, index) => width > 0 && style.borderColors[index] !== TRANSPARENT);
+    if (visible) {
+      items.push({
+        op: "border",
+        nodeId: box.nodeId,
+        rect,
+        radii,
+        widths: [...widths],
+        colors: [...style.borderColors],
+        styles: [...style.borderStyles],
+        bounds: rect,
+      });
+    }
+    applyEffect(items, start, effect);
+  }
+
+  function paintFragment(fragment) {
+    for (const run of fragment.runs) {
+      if (run.type === "atomic") continue;
+      const effect = effects(run.nodeId, run.type === "image" ? "box" : "text");
+      if (!effect) continue;
+      const start = items.length;
+      paintRun(fragment, run);
+      applyEffect(items, start, effect);
+    }
+  }
+
+  function paintRun(fragment, run) {
+    {
+      const y = run.y ?? fragment.y;
+      if (run.type === "image" && run.svg) {
+        const rect = { x: run.x, y, width: run.width, height: run.height };
+        if (run.svg.shapes.length) items.push({ op: "drawSvg", nodeId: run.nodeId, rect, svg: run.svg, bounds: rect });
+        return;
+      }
+      if (run.type === "image") {
+        if (run.video) {
+          const rect = { x: run.x, y, width: run.width, height: run.height };
+          images.push(run.resource);
+          items.push({ op: "drawVideo", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
+          return;
+        }
+        if (!run.resource?.image) return;
+        const rect = { x: run.x, y, width: run.width, height: run.height };
+        images.push(run.resource);
+        items.push({
+          op: "drawImage", nodeId: run.nodeId, image: images.length - 1, rect, radii: cornerRadii(run.style, rect), bounds: rect,
+        });
+        return;
+      }
+      if (!run.text.trim()) return;
+      const gradient = textGradients.get(run.style) ?? null;
+      if (!gradient && run.style?.color === TRANSPARENT) return;
+      items.push({
+        op: "drawText",
+        nodeId: run.nodeId,
+        text: run.text,
+        x: run.x,
+        y,
+        font: {
+          family: run.style?.fontFamily ?? ["sans-serif"],
+          size: run.style?.fontSize ?? 16,
+          weight: run.style?.fontWeight ?? 400,
+        },
+        color: run.style?.color ?? "rgba(0, 0, 0, 1)",
+        ...(run.style?.textDecorations ? { decoration: run.style.textDecorations } : {}),
+        ...(gradient ? { gradient } : {}),
+        bounds: { x: run.x, y: fragment.y, width: run.width, height: fragment.height },
+      });
+    }
+  }
+
+  // Items clipped away entirely paint nothing.
+  const kept = items.filter((item) => !item.clipRect || (item.bounds.width > 0 && item.bounds.height > 0));
+  const displayList = {
+    generation: layout.generation,
+    width: layout.width,
+    height: layout.height,
+    items: Object.freeze(kept.map(deepFreeze)),
+  };
+  Object.defineProperty(displayList, "images", { value: Object.freeze(images), enumerable: false });
+  return Object.freeze(displayList);
+}
+
+/**
+ * Painting effects of ancestors (CSS Visual Effects / Overflow): visibility,
+ * group opacity (approximated per item), and clipping by overflow, clip and
+ * clip-path rectangles. Returns effects(nodeId, "box" | "text") → null when
+ * the item is not painted, else { opacity, clipRect }.
+ */
+function paintEffects(layout, tree) {
+  const none = { opacity: 1, clipRect: null, fixed: false };
+  if (!tree?.root) return () => none;
+  const parents = new Map();
+  (function walk(node) {
+    for (const child of node.children ?? []) {
+      parents.set(child.id, node);
+      walk(child);
+    }
+  })(tree.root);
+  const boxes = new Map();
+  for (const box of layout.boxes) if (!box.inline && !boxes.has(box.nodeId)) boxes.set(box.nodeId, box);
+  const cache = new Map();
+
+  // The clip an element applies to its descendants (and, for clip/clip-path, to itself).
+  const overflowClip = (node) => {
+    const style = node.style;
+    const box = boxes.get(node.id);
+    if (!style || !box || node === tree.root) return null;
+    if (style.overflowX !== "clip" && style.overflowY !== "clip") return null;
+    const [top, right, bottom, left] = style.borderWidths ?? [0, 0, 0, 0];
+    return { x: box.x + left, y: box.y + top, width: box.width - left - right, height: box.height - top - bottom };
+  };
+  const shapeClip = (node) => {
+    const style = node.style;
+    const box = boxes.get(node.id);
+    if (!style || !box) return null;
+    let rect = null;
+    if (style.clipPath?.empty) rect = { x: box.x, y: box.y, width: 0, height: 0 };
+    else if (style.clipPath?.inset) {
+      const [top, right, bottom, left] = style.clipPath.inset.map((edge, index) =>
+        edge?.unit === "%" ? edge.value / 100 * (index % 2 ? box.width : box.height) : edge);
+      rect = { x: box.x + left, y: box.y + top, width: box.width - left - right, height: box.height - top - bottom };
+    }
+    if (style.clip && (style.position === "absolute" || style.position === "fixed")) {
+      const [top, right, bottom, left] = style.clip;
+      const x0 = left === "auto" ? box.x : box.x + left;
+      const y0 = top === "auto" ? box.y : box.y + top;
+      const x1 = right === "auto" ? box.x + box.width : box.x + right;
+      const y1 = bottom === "auto" ? box.y + box.height : box.y + bottom;
+      rect = intersectRects(rect, { x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+    }
+    return rect;
+  };
+
+  return (nodeId, kind) => {
+    const key = `${kind}:${nodeId}`;
+    if (cache.has(key)) return cache.get(key);
+    const self = tree.nodesById?.get(nodeId);
+    // Text belongs to its parent element for visibility and clipping.
+    const owner = kind === "text" ? parents.get(nodeId) : self;
+    let result = none;
+    if (!owner?.style || owner.style.visibility !== "hidden") {
+      let opacity = 1;
+      let clipRect = null;
+      let fixed = false;
+      // Overflow clipping skips ancestors that are not in the containing-block
+      // chain of an absolutely positioned box; fixed boxes escape entirely.
+      let escaping = null;
+      for (let node = owner; node; node = parents.get(node.id)) {
+        const style = node.style;
+        if (!style) continue;
+        if (style.position === "fixed") fixed = true;
+        opacity *= style.opacity ?? 1;
+        clipRect = intersectRects(clipRect, shapeClip(node));
+        const ownContent = kind === "text" || node !== owner;
+        if (ownContent && escaping !== "fixed") {
+          const positioned = style.position && style.position !== "static";
+          if (!escaping || positioned) {
+            clipRect = intersectRects(clipRect, overflowClip(node));
+            escaping = null;
+          }
+        }
+        if (style.position === "fixed") escaping = "fixed";
+        else if (style.position === "absolute" && escaping !== "fixed") escaping = "absolute";
+      }
+      result = opacity <= 0 ? null : { opacity, clipRect, fixed };
+    } else {
+      result = null;
+    }
+    cache.set(key, result);
+    return result;
+  };
+}
+
+function intersectRects(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) };
+}
+
+function applyEffect(items, start, effect) {
+  if (effect.opacity === 1 && !effect.clipRect && !effect.fixed) return;
+  for (let index = start; index < items.length; index++) {
+    const item = items[index];
+    if (effect.fixed) item.fixed = true;
+    if (effect.opacity < 1) item.opacity = effect.opacity;
+    if (effect.clipRect) {
+      item.clipRect = effect.clipRect;
+      item.bounds = intersectRects(item.bounds, effect.clipRect);
+    }
+  }
+}
+
+/** Returns display items whose bounds intersect the given document-space rect. */
+export function visibleItems(displayList, rect, fixedOffset = { x: 0, y: 0 }) {
+  return displayList.items.filter(({ bounds, fixed }) => {
+    const x = bounds.x + (fixed ? fixedOffset.x : 0);
+    const y = bounds.y + (fixed ? fixedOffset.y : 0);
+    return x < rect.x + rect.width && x + bounds.width > rect.x
+      && y < rect.y + rect.height && y + bounds.height > rect.y;
+  });
+}
+
+/**
+ * Resolves border-radius to one elliptical radius for every corner.
+ * Percentages refer to the border box's width (x) and height (y); radii that
+ * would overlap are scaled down together (CSS Backgrounds 3 §5.5).
+ */
+function cornerRadii(style, rect) {
+  const value = style?.borderRadius;
+  let x = 0;
+  let y = 0;
+  if (value?.unit === "%") {
+    x = rect.width * value.value / 100;
+    y = rect.height * value.value / 100;
+  } else if (value > 0) {
+    x = y = value;
+  }
+  const scale = Math.min(1, x > 0 ? rect.width / (2 * x) : 1, y > 0 ? rect.height / (2 * y) : 1);
+  return { x: x * scale, y: y * scale };
+}
+
+function inflate(rect, amount) {
+  return { x: rect.x - amount, y: rect.y - amount, width: rect.width + amount * 2, height: rect.height + amount * 2 };
+}
+
+function deepFreeze(value) {
+  for (const child of Object.values(value)) {
+    if (child && typeof child === "object") deepFreeze(child);
+  }
+  return Object.freeze(value);
+}

package/lib/paint/frame.js

@@ -0,0 +1,88 @@
+/**
+ * Compositor frames: a raster tile of the page plus where it sits, and the
+ * two operations the compositor needs without CanvasKit: cutting the
+ * viewport out of a tile and encoding it (with Bun.Image).
+ *
+ * A tile covers a rectangle of the page in CSS pixels (x, y, width, height)
+ * rasterized at `scale` device pixels per CSS pixel; `pixels` is RGBA
+ * (unpremultiplied), `pixelWidth` x `pixelHeight`.
+ */
+/**
+ * The viewport's device pixels at a scroll position. Parts of the viewport
+ * the tile does not cover show the page background, as Chrome's compositor
+ * shows a checkerboard until the missing tiles are rasterized.
+ * @returns {{ pixels: Uint8Array, width: number, height: number }}
+ */
+export function cropViewport(tile, scrollX, scrollY, viewportWidth, viewportHeight) {
+  const scale = tile.scale;
+  const width = Math.max(1, Math.round(Math.floor(viewportWidth) * scale));
+  const height = Math.max(1, Math.round(Math.floor(viewportHeight) * scale));
+  const pixels = new Uint8Array(width * height * 4);
+  const [red, green, blue, alpha] = tile.background ?? [255, 255, 255, 255];
+  const fill = new Uint8Array([red, green, blue, alpha]);
+  const offsetX = Math.round((scrollX - tile.x) * scale);
+  const offsetY = Math.round((scrollY - tile.y) * scale);
+  const fromX = Math.max(0, -offsetX);
+  const toX = Math.min(width, tile.pixelWidth - offsetX);
+  const rowFill = new Uint8Array(width * 4);
+  for (let index = 0; index < width; index++) rowFill.set(fill, index * 4);
+  for (let row = 0; row < height; row++) {
+    const sourceRow = row + offsetY;
+    const target = row * width * 4;
+    if (sourceRow < 0 || sourceRow >= tile.pixelHeight || toX <= fromX) {
+      pixels.set(rowFill, target);
+      continue;
+    }
+    if (fromX > 0 || toX < width) pixels.set(rowFill, target);
+    const source = (sourceRow * tile.pixelWidth + fromX + offsetX) * 4;
+    pixels.set(tile.pixels.subarray(source, source + (toX - fromX) * 4), target + fromX * 4);
+  }
+  return { pixels, width, height };
+}
+
+const IMAGE_FORMATS = new Set(["png", "jpeg", "webp"]);
+
+/**
+ * Encodes RGBA pixels with Bun.Image. Bun.Image does not read raw pixels, so
+ * they are wrapped in an uncompressed BMP first (header only, no copying of
+ * rows or channels).
+ * @param {{ format?: "png" | "jpeg" | "webp", quality?: number }} options
+ */
+export async function encodeImage(pixels, width, height, { format = "png", quality = 80 } = {}) {
+  const image = new Bun.Image(rgbaBitmap(pixels, width, height));
+  const kind = IMAGE_FORMATS.has(format) ? format : "png";
+  const level = Math.min(100, Math.max(0, Number.isFinite(quality) ? quality : 80));
+  return kind === "png" ? image.png().bytes() : image[kind]({ quality: level }).bytes();
+}
+
+/** A 32-bit BMP (BITMAPV4HEADER, BI_BITFIELDS in RGBA byte order, top-down rows) around RGBA pixels. */
+export function rgbaBitmap(pixels, width, height) {
+  const headerSize = 14 + 108;
+  const bitmap = new Uint8Array(headerSize + pixels.byteLength);
+  const view = new DataView(bitmap.buffer);
+  view.setUint8(0, 0x42);
+  view.setUint8(1, 0x4d);
+  view.setUint32(2, bitmap.byteLength, true);
+  view.setUint32(10, headerSize, true);
+  view.setUint32(14, 108, true);
+  view.setInt32(18, width, true);
+  view.setInt32(22, -height, true);
+  view.setUint16(26, 1, true);
+  view.setUint16(28, 32, true);
+  view.setUint32(30, 3, true);
+  view.setUint32(34, pixels.byteLength, true);
+  view.setUint32(54, 0x000000ff, true);
+  view.setUint32(58, 0x0000ff00, true);
+  view.setUint32(62, 0x00ff0000, true);
+  view.setUint32(66, 0xff000000, true);
+  view.setUint32(70, 0x73524742, true);
+  bitmap.set(pixels, headerSize);
+  return bitmap;
+}
+
+/** RGBA bytes for a CSS color string such as "rgba(255, 255, 255, 1)". */
+export function backgroundBytes(color) {
+  const match = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(String(color));
+  if (!match) return [255, 255, 255, 255];
+  return [Number(match[1]), Number(match[2]), Number(match[3]), Math.round(Number(match[4] ?? 1) * 255)];
+}

package/lib/paint/gradient.js

@@ -0,0 +1,207 @@
+/**
+ * Resolves CSS gradient images against a background positioning area.
+ *
+ * Geometry follows CSS Images 3: the linear gradient line length for angle A
+ * in a W×H box is |W·sinA| + |H·cosA|, "to <corner>" angles make the 50%
+ * line pass through the other two corners, and radial sizes default to
+ * farthest-corner. Results are plain data for the display list; the
+ * rasterizer turns them into CanvasKit shaders.
+ */
+const SIDES = Object.freeze({ top: [0, -1], bottom: [0, 1], left: [-1, 0], right: [1, 0] });
+
+/** Splits a `background`/`background-image` value into gradient layers, topmost first. */
+export function gradientLayers(value) {
+  if (!value) return [];
+  return splitTopLevel(String(value), ",")
+    .map((layer) => layer.trim())
+    .filter((layer) => /^(?:repeating-)?(?:linear|radial)-gradient\(/i.test(layer));
+}
+
+export function resolveGradient(source, rect, fontSize = 16) {
+  const match = /^(repeating-)?(linear|radial)-gradient\((.*)\)$/is.exec(source.trim());
+  if (!match) return null;
+  const args = splitTopLevel(match[3], ",").map((part) => part.trim()).filter(Boolean);
+  if (!args.length) return null;
+  return match[2].toLowerCase() === "linear"
+    ? linearGradient(args, rect, fontSize, Boolean(match[1]))
+    : radialGradient(args, rect, fontSize, Boolean(match[1]));
+}
+
+function linearGradient(args, rect, fontSize, repeating) {
+  let angle = Math.PI;
+  const first = args[0].toLowerCase();
+  const parsedAngle = parseAngle(first);
+  if (parsedAngle != null) {
+    angle = parsedAngle;
+    args = args.slice(1);
+  } else if (first.startsWith("to ")) {
+    let dx = 0;
+    let dy = 0;
+    for (const word of first.slice(3).trim().split(/\s+/)) {
+      const side = SIDES[word];
+      if (!side) return null;
+      dx += side[0];
+      dy += side[1];
+    }
+    // Corners: perpendicular to the diagonal that joins the other two corners.
+    angle = dx && dy ? Math.atan2(dx * rect.height, -dy * rect.width) : Math.atan2(dx, -dy);
+    args = args.slice(1);
+  }
+  const sin = Math.sin(angle);
+  const cos = Math.cos(angle);
+  const length = Math.abs(rect.width * sin) + Math.abs(rect.height * cos);
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const stops = colorStops(args, length, fontSize);
+  if (!stops) return null;
+  return {
+    type: "linear",
+    x0: centerX - sin * length / 2,
+    y0: centerY + cos * length / 2,
+    x1: centerX + sin * length / 2,
+    y1: centerY - cos * length / 2,
+    stops,
+    repeating,
+  };
+}
+
+function radialGradient(args, rect, fontSize, repeating) {
+  let shape = "ellipse";
+  let size = "farthest-corner";
+  let explicit = null;
+  let position = ["50%", "50%"];
+  const first = args[0].toLowerCase();
+  const isColor = (text) => Bun.color(text.split(/\s+/)[0], "rgba") != null;
+  if (!isColor(first)) {
+    const [shapePart, positionPart] = first.split(/\s*\bat\b\s*/);
+    const words = shapePart.trim() ? shapePart.trim().split(/\s+/) : [];
+    const lengths = [];
+    for (const word of words) {
+      if (word === "circle" || word === "ellipse") shape = word;
+      else if (/^(?:closest|farthest)-(?:side|corner)$/.test(word)) size = word;
+      else lengths.push(word);
+    }
+    if (lengths.length) {
+      if (lengths.length === 1) shape = "circle";
+      explicit = lengths.map((length, index) =>
+        resolveLength(length, index === 0 ? rect.width : rect.height, fontSize));
+      if (explicit.some((value) => !Number.isFinite(value))) return null;
+    }
+    if (positionPart) position = positionTokens(positionPart);
+    args = args.slice(1);
+  }
+  const cx = rect.x + resolvePosition(position[0], rect.width, fontSize, "x");
+  const cy = rect.y + resolvePosition(position[1], rect.height, fontSize, "y");
+  let rx;
+  let ry;
+  if (explicit) {
+    [rx, ry = rx] = explicit;
+  } else {
+    const distancesX = [Math.abs(cx - rect.x), Math.abs(rect.x + rect.width - cx)];
+    const distancesY = [Math.abs(cy - rect.y), Math.abs(rect.y + rect.height - cy)];
+    const pickSide = size.startsWith("closest") ? Math.min : Math.max;
+    const sideX = pickSide(...distancesX);
+    const sideY = pickSide(...distancesY);
+    if (shape === "circle") {
+      rx = size.endsWith("side") ? pickSide(sideX, sideY) : Math.hypot(sideX, sideY);
+      ry = rx;
+    } else if (size.endsWith("side")) {
+      [rx, ry] = [sideX, sideY];
+    } else {
+      // Corner sizes keep the side sizes' aspect ratio and pass through the corner.
+      [rx, ry] = [sideX * Math.SQRT2, sideY * Math.SQRT2];
+    }
+  }
+  if (!(rx > 0) || !(ry > 0)) return null;
+  const stops = colorStops(args, rx, fontSize);
+  if (!stops) return null;
+  return { type: "radial", cx, cy, rx, ry, stops, repeating };
+}
+
+/** Resolves color stops to offsets in [0, 1] along a gradient ray of `length` px. */
+function colorStops(args, length, fontSize) {
+  const stops = [];
+  for (const arg of args) {
+    const parts = splitTopLevel(arg, " ").filter(Boolean);
+    const color = Bun.color(parts[0], "rgba");
+    if (!color) return null;
+    const positions = parts.slice(1).map((part) => resolveLength(part, length, fontSize) / length);
+    if (positions.some((value) => !Number.isFinite(value))) return null;
+    if (!positions.length) stops.push({ color, offset: null });
+    for (const offset of positions) stops.push({ color, offset });
+  }
+  if (stops.length < 2) {
+    if (stops.length === 1) stops.push({ ...stops[0] });
+    else return null;
+  }
+  // CSS Images 3 §3.4.3: default the ends, keep positions monotonic, then
+  // spread unpositioned stops evenly between their positioned neighbours.
+  stops[0].offset ??= 0;
+  stops.at(-1).offset ??= 1;
+  let previous = stops[0].offset;
+  for (const stop of stops) {
+    if (stop.offset != null) previous = stop.offset = Math.max(stop.offset, previous);
+  }
+  for (let index = 1; index < stops.length; index++) {
+    if (stops[index].offset != null) continue;
+    let next = index;
+    while (stops[next].offset == null) next++;
+    const start = stops[index - 1].offset;
+    const step = (stops[next].offset - start) / (next - index + 1);
+    for (let fill = index; fill < next; fill++) stops[fill].offset = start + step * (fill - index + 1);
+  }
+  return stops.map((stop) => ({ color: stop.color, offset: stop.offset }));
+}
+
+function parseAngle(text) {
+  const match = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|grad|rad|turn)$/.exec(text);
+  if (!match) return null;
+  const value = Number(match[1]);
+  return { deg: value * Math.PI / 180, grad: value * Math.PI / 200, rad: value, turn: value * Math.PI * 2 }[match[2]];
+}
+
+function positionTokens(text) {
+  const words = text.trim().split(/\s+/);
+  if (words.length === 1) {
+    const word = words[0];
+    return ["top", "bottom"].includes(word) ? ["50%", word] : [word, "50%"];
+  }
+  // Keywords may appear in either order ("top left").
+  if (["top", "bottom"].includes(words[0]) || ["left", "right"].includes(words[1])) return [words[1], words[0]];
+  return [words[0], words[1]];
+}
+
+function resolvePosition(token, extent, fontSize, axis) {
+  const keyword = { left: 0, top: 0, center: 50, right: 100, bottom: 100 }[token];
+  if (keyword != null) return extent * keyword / 100;
+  const value = resolveLength(token, extent, fontSize);
+  return Number.isFinite(value) ? value : extent / 2;
+}
+
+function resolveLength(text, reference, fontSize) {
+  const match = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%|em|rem)?$/.exec(String(text).trim());
+  if (!match) return NaN;
+  const value = Number(match[1]);
+  if (match[2] === "%") return reference * value / 100;
+  if (match[2] === "em") return value * fontSize;
+  if (match[2] === "rem") return value * 16;
+  if (!match[2] && value !== 0) return NaN;
+  return value;
+}
+
+function splitTopLevel(source, separator) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let index = 0; index < source.length; index++) {
+    const character = source[index];
+    if (character === "(") depth++;
+    else if (character === ")") depth--;
+    else if (depth === 0 && (separator === " " ? /\s/.test(character) : character === separator)) {
+      parts.push(source.slice(start, index));
+      start = index + 1;
+    }
+  }
+  parts.push(source.slice(start));
+  return parts.map((part) => part.trim()).filter((part) => part !== "");
+}