domotion-svg 0.2.2 → 0.3.2

package/src/render/borders.ts

@@ -8,6 +8,16 @@ import { r, esc } from "./format.js";
 import { parseColor, type RGBA } from "./colors.js";
 import type { CapturedElement } from "../capture/types.js";
 import { embedResizedDataUri } from "../capture/embed.js";
+import { parseGradient, buildLinearGradientDef, buildRadialGradientDef } from "./gradients.js";
+
+/** `border-image-repeat` per-axis keyword. */
+type BorderImageRepeat = "stretch" | "repeat" | "round" | "space";
+const BORDER_IMAGE_REPEATS = new Set<string>(["stretch", "repeat", "round", "space"]);
+
+function normalizeBorderImageRepeat(raw: string | undefined): BorderImageRepeat {
+  if (raw != null && BORDER_IMAGE_REPEATS.has(raw)) return raw as BorderImageRepeat;
+  return "stretch";
+}
 
 /** Per-corner border-radius axis-pair (h = horizontal, v = vertical).
  *  An elliptical corner has h ≠ v; a circular corner has h = v. */
@@ -97,6 +107,28 @@ export function insetCornerRadii(c: CornerRadii, top: number, right: number, bot
   return { tl, tr, br, bl, uniform };
 }
 
+/** Grow each corner radius outward by `spread` for an OUTSET box-shadow shape.
+ *  Per CSS Backgrounds 3 §6.4 and Chromium's `FloatRoundedRect::Outset`, a
+ *  corner whose source radius is zero STAYS sharp through any spread — only
+ *  pre-curved corners grow. A naive `corner + spread` produces visibly
+ *  rounded shadow corners on a sharp-cornered box (e.g. concentric outlines
+ *  built from `box-shadow: 0 0 0 Npx`). Use this for outset shadow shapes;
+ *  the dual inset case is already covered by `insetCornerRadii` shrinking to
+ *  zero when the border eats past the radius. */
+export function outsetCornerRadiiForShadow(c: CornerRadii, spread: number): CornerRadii {
+  const grow = (p: CornerRadiusPair): CornerRadiusPair => ({
+    h: p.h > 0 ? Math.max(0, p.h + spread) : 0,
+    v: p.v > 0 ? Math.max(0, p.v + spread) : 0,
+  });
+  const tl = grow(c.tl);
+  const tr = grow(c.tr);
+  const br = grow(c.br);
+  const bl = grow(c.bl);
+  const uniform = tl.h === tl.v && tl.h === tr.h && tl.h === tr.v
+    && tl.h === br.h && tl.h === br.v && tl.h === bl.h && tl.h === bl.v;
+  return { tl, tr, br, bl, uniform };
+}
+
 /** Emit an SVG path `d` attribute for a rounded rectangle with per-corner radii.
  *  Path goes clockwise from the top-left, using elliptical arc commands at each
  *  corner. Zero-radius corners collapse to a sharp 90° join. */
@@ -195,6 +227,228 @@ export function injectSvgSize(svgHtml: string, w: number, h: number): string {
  * Returns { svg, usedIds }. usedIds indicates how many clipIdx values were
  * consumed so the caller can keep its own counter in sync.
  */
+/**
+ * Render a `border-image-source` that's a CSS gradient as a proper 9-slice.
+ *
+ * Per CSS Images 3, a gradient used as `border-image-source` has the size of
+ * the border-image-area (= border-box ± `border-image-outset`). The 9-slice
+ * algorithm then applies just like for a raster source: corners stretched,
+ * edges tiled per `border-image-repeat`, optional fill center.
+ *
+ * Implementation: build a single `<linearGradient>` / `<radialGradient>` def
+ * positioned in source space `(0, 0) - (natW, natH)` where natW = boxW,
+ * natH = boxH. Each slot emits an inner `<svg x dx y dy width dw height dh
+ * viewBox="sx sy sw sh" preserveAspectRatio="none">` containing a `<rect
+ * width="natW" height="natH" fill="url(#g)" />`. The viewBox maps the source
+ * slice rect onto the destination slot; the gradient comes along because its
+ * `userSpaceOnUse` coordinates are interpreted in the viewBox space. Tiled
+ * edges (`repeat` / `round` / `space`) wrap that inner `<svg>` in a
+ * `<pattern>`. The single-def-per-element keeps SVG output small and matches
+ * how the URL path reuses one source asset.
+ */
+function renderBorderImageGradient(
+  el: CapturedElement,
+  indent: string,
+  idPrefix: string,
+  defsParts: string[],
+  clipIdx: number,
+  src: string,
+): { svg: string; usedIds: number } {
+  const grad = parseGradient(src);
+  if (grad == null) return { svg: "", usedIds: 0 };
+  if (grad.kind !== "linear" && grad.kind !== "radial") return { svg: "", usedIds: 0 };
+
+  const sliceRaw = el.styles.borderImageSlice ?? "100%";
+  const fillCenter = /\bfill\b/i.test(sliceRaw);
+  const bwTop = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+  const bwRight = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+  const bwBottom = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+  const bwLeft = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+
+  // Outsets: default 0. Same parsing as URL path.
+  const outsetTokens = (el.styles.borderImageOutset ?? "0").trim().split(/\s+/);
+  const parseOutset = (tok: string | undefined, basis: number, borderW: number): number => {
+    if (tok == null || tok === "") return 0;
+    if (/%$/.test(tok)) return (parseFloat(tok) / 100) * basis;
+    if (/(px|em|rem|pt|pc|cm|mm|in|Q)$/.test(tok)) return parseFloat(tok) || 0;
+    const n = parseFloat(tok);
+    return Number.isFinite(n) ? n * borderW : 0;
+  };
+  const ot = parseOutset(outsetTokens[0], el.height, bwTop);
+  const or_ = parseOutset(outsetTokens[1] ?? outsetTokens[0], el.width, bwRight);
+  const ob = parseOutset(outsetTokens[2] ?? outsetTokens[0], el.height, bwBottom);
+  const ol = parseOutset(outsetTokens[3] ?? outsetTokens[1] ?? outsetTokens[0], el.width, bwLeft);
+
+  // Border-image-width per side; default = element's border-width. Same as URL path.
+  const parseBorderImageLen = (tok: string | undefined, basis: number, borderW: number): number => {
+    if (tok == null || tok === "" || tok === "auto") return borderW;
+    if (/%$/.test(tok)) return (parseFloat(tok) / 100) * basis;
+    if (/(px|em|rem|pt|pc|cm|mm|in|Q)$/.test(tok)) return parseFloat(tok) || 0;
+    const n = parseFloat(tok);
+    return Number.isFinite(n) ? n * borderW : borderW;
+  };
+  const widthTokens = (el.styles.borderImageWidth ?? "").trim().split(/\s+/);
+  const wt = parseBorderImageLen(widthTokens[0], el.height, bwTop);
+  const wr = parseBorderImageLen(widthTokens[1] ?? widthTokens[0], el.width, bwRight);
+  const wb = parseBorderImageLen(widthTokens[2] ?? widthTokens[0], el.height, bwBottom);
+  const wl = parseBorderImageLen(widthTokens[3] ?? widthTokens[1] ?? widthTokens[0], el.width, bwLeft);
+
+  const boxX = el.x - ol;
+  const boxY = el.y - ot;
+  const boxW = el.width + ol + or_;
+  const boxH = el.height + ot + ob;
+  if (boxW <= 0 || boxH <= 0) return { svg: "", usedIds: 0 };
+
+  // Gradient sources have the size of the border-image-area.
+  const natW = boxW;
+  const natH = boxH;
+
+  // Slice: numbers = source pixels, percentages = of source dims, optional `fill`.
+  const sliceTokens = sliceRaw.replace(/\bfill\b/i, "").trim().split(/\s+/);
+  const sliceNums = sliceTokens.map((t) => {
+    if (/%$/.test(t)) return { pct: parseFloat(t) };
+    return { px: parseFloat(t) };
+  });
+  const resolveSlice = (tok: { pct?: number; px?: number }, basis: number): number => {
+    if (tok.pct != null) return (tok.pct / 100) * basis;
+    return tok.px ?? 0;
+  };
+  const st = resolveSlice(sliceNums[0] ?? { px: 0 }, natH);
+  const sr = resolveSlice(sliceNums[1] ?? sliceNums[0] ?? { px: 0 }, natW);
+  const sb = resolveSlice(sliceNums[2] ?? sliceNums[0] ?? { px: 0 }, natH);
+  const sl = resolveSlice(sliceNums[3] ?? sliceNums[1] ?? sliceNums[0] ?? { px: 0 }, natW);
+
+  // Repeat policy per axis.
+  const repeatTokens = (el.styles.borderImageRepeat ?? "stretch").trim().split(/\s+/);
+  const rH = normalizeBorderImageRepeat((repeatTokens[0] ?? "stretch").toLowerCase());
+  const rV = repeatTokens[1] != null && repeatTokens[1] !== "" ? normalizeBorderImageRepeat(repeatTokens[1].toLowerCase()) : rH;
+
+  // Gradient def in source space (0, 0) - (natW, natH). Positioned at the
+  // border-image-area's element-absolute origin (boxX, boxY) so the inner
+  // <svg viewBox> remap below lands the gradient on the correct destination
+  // coordinates. Each <rect> inside an inner <svg viewBox="sx sy sw sh">
+  // paints the slice region by drawing the full natW × natH rect — the
+  // viewBox + preserveAspectRatio="none" map source slice → destination slot.
+  const gid = `${idPrefix}big${clipIdx}`;
+  let usedIds = 1;
+  const gradRect = { x: boxX, y: boxY, w: natW, h: natH };
+  const def = grad.kind === "linear"
+    ? buildLinearGradientDef(grad, gid, gradRect)
+    : buildRadialGradientDef(grad, gid, gradRect);
+  defsParts.push(def);
+
+  // Slot geometry in element-absolute coords.
+  const x0 = boxX, x1 = boxX + wl, x2 = boxX + boxW - wr, x3 = boxX + boxW;
+  const y0 = boxY, y1 = boxY + wt, y2 = boxY + boxH - wb, y3 = boxY + boxH;
+  // Source regions in source pixels (NB: corner rects + edge / center rects).
+  const sxL = 0, sxR = natW - sr, sxC = sl, sxW_C = natW - sl - sr;
+  const syT = 0, syB = natH - sb, syC = st, syH_C = natH - st - sb;
+
+  const parts: string[] = [];
+
+  // Inner <svg viewBox> that paints the source slice rect (sx, sy, sw, sh)
+  // into the destination slot (dx, dy, dw, dh). The gradient is positioned
+  // in source-space coords (boxX..boxX+natW, boxY..boxY+natH); to keep it
+  // aligned through the viewBox mapping, the viewBox is offset to start at
+  // (boxX + sx, boxY + sy) — so the gradient's userSpaceOnUse coordinates
+  // line up with the source rect we're sampling. Then a single <rect>
+  // covering (boxX, boxY) - (boxX+natW, boxY+natH) lets the gradient
+  // evaluate across the full source space; the viewBox crops to the slice.
+  const innerSvgForSlot = (
+    dx: number, dy: number, dw: number, dh: number,
+    sx: number, sy: number, sw: number, sh: number,
+  ): string => {
+    return `<svg x="${r(dx)}" y="${r(dy)}" width="${r(dw)}" height="${r(dh)}" viewBox="${r(boxX + sx)} ${r(boxY + sy)} ${r(sw)} ${r(sh)}" preserveAspectRatio="none"><rect x="${r(boxX)}" y="${r(boxY)}" width="${r(natW)}" height="${r(natH)}" fill="url(#${gid})" /></svg>`;
+  };
+
+  const emitStretchedSlot = (
+    dx: number, dy: number, dw: number, dh: number,
+    sx: number, sy: number, sw: number, sh: number,
+  ): void => {
+    if (dw <= 0 || dh <= 0 || sw <= 0 || sh <= 0) return;
+    parts.push(`${indent}${innerSvgForSlot(dx, dy, dw, dh, sx, sy, sw, sh)}`);
+  };
+
+  // Tiled edges: wrap the inner <svg> in a <pattern> sized to one tile, then
+  // fill the destination rect with that pattern. round / space tile-count
+  // logic mirrors the URL path's `emitTiledSliceEdge`. For `space`, the
+  // pattern cell is the slot/N and the inner <svg> is centered inside the
+  // cell so each end has a half-gap; transparent gap is automatic because
+  // the inner <svg> is smaller than the pattern cell.
+  const emitTiledEdgeSlot = (
+    dx: number, dy: number, dw: number, dh: number,
+    sx: number, sy: number, sw: number, sh: number,
+    axis: "x" | "y", mode: "repeat" | "round" | "space",
+  ): void => {
+    if (dw <= 0 || dh <= 0 || sw <= 0 || sh <= 0) return;
+    let tileW: number, tileH: number;
+    if (axis === "x") {
+      tileH = dh;
+      tileW = sw * (dh / sh);
+      if (mode === "round") {
+        const count = Math.max(1, Math.round(dw / tileW));
+        tileW = dw / count;
+      }
+    } else {
+      tileW = dw;
+      tileH = sh * (dw / sw);
+      if (mode === "round") {
+        const count = Math.max(1, Math.round(dh / tileH));
+        tileH = dh / count;
+      }
+    }
+    let patternW = tileW, patternH = tileH;
+    let tileOffX = 0, tileOffY = 0;
+    if (mode === "space") {
+      if (axis === "x") {
+        const count = Math.floor(dw / tileW);
+        if (count <= 0) return;
+        patternW = dw / count;
+        tileOffX = (patternW - tileW) / 2;
+      } else {
+        const count = Math.floor(dh / tileH);
+        if (count <= 0) return;
+        patternH = dh / count;
+        tileOffY = (patternH - tileH) / 2;
+      }
+    }
+    const patId = `${idPrefix}bip${clipIdx + usedIds}`;
+    usedIds++;
+    const inner = innerSvgForSlot(tileOffX, tileOffY, tileW, tileH, sx, sy, sw, sh);
+    defsParts.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(dx)}" y="${r(dy)}" width="${r(patternW)}" height="${r(patternH)}">${inner}</pattern>`);
+    parts.push(`${indent}<rect x="${r(dx)}" y="${r(dy)}" width="${r(dw)}" height="${r(dh)}" fill="url(#${patId})" />`);
+  };
+
+  // 4 corners — always stretched.
+  emitStretchedSlot(x0, y0, wl, wt, sxL, syT, sl, st);   // NW
+  emitStretchedSlot(x2, y0, wr, wt, sxR, syT, sr, st);   // NE
+  emitStretchedSlot(x0, y2, wl, wb, sxL, syB, sl, sb);   // SW
+  emitStretchedSlot(x2, y2, wr, wb, sxR, syB, sr, sb);   // SE
+  // Top + Bottom edges.
+  if (rH === "stretch") {
+    emitStretchedSlot(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st);
+    emitStretchedSlot(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb);
+  } else {
+    emitTiledEdgeSlot(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st, "x", rH);
+    emitTiledEdgeSlot(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb, "x", rH);
+  }
+  // Left + Right edges.
+  if (rV === "stretch") {
+    emitStretchedSlot(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C);
+    emitStretchedSlot(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C);
+  } else {
+    emitTiledEdgeSlot(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C, "y", rV);
+    emitTiledEdgeSlot(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C, "y", rV);
+  }
+  // Center — only when `fill`.
+  if (fillCenter) {
+    emitStretchedSlot(x1, y1, x2 - x1, y2 - y1, sxC, syC, sxW_C, syH_C);
+  }
+
+  if (parts.length === 0) return { svg: "", usedIds: 0 };
+  return { svg: parts.join("\n"), usedIds };
+}
+
 export function renderBorderImage(
   el: CapturedElement,
   indent: string,
@@ -205,8 +459,25 @@ export function renderBorderImage(
   const src = el.styles.borderImageSource;
   if (src == null || src === "none" || src === "") return { svg: "", usedIds: 0 };
 
+  // DM-722: CSS gradient as `border-image-source`. The 9-slice machinery
+  // below is built around a fixed-size raster source. Per CSS Images 3, a
+  // gradient used as `border-image-source` resolves to a concrete-size image
+  // equal to the border-image-area (= border-box ± `border-image-outset`).
+  // For the common `border-image: <grad> 1` case (slice 1, stretch — the
+  // fixture's `.gradient-border` panel), emit a single "border ring" path
+  // (outer rect minus inner rect via even-odd fill rule) filled with the
+  // gradient scoped to the full border-image-area. This matches Chrome's
+  // paint because slice 1 + stretch effectively maps a continuous gradient
+  // along all four sides — exactly what painting the whole area with the
+  // gradient and clipping to the border donut produces. Slice values other
+  // than `1` or `1 fill` (with non-degenerate edge tiling) fall through
+  // unsupported for gradient sources; the rasterise-during-capture path is
+  // tracked separately for that.
   const urlMatch = /^url\((?:"|')?([^"')]+)(?:"|')?\)$/i.exec(src);
-  if (urlMatch == null) return { svg: "", usedIds: 0 };
+  if (urlMatch == null) {
+    if (!/-gradient\(/i.test(src)) return { svg: "", usedIds: 0 };
+    return renderBorderImageGradient(el, indent, idPrefix, defsParts, clipIdx, src);
+  }
   const url = urlMatch[1];
   const natW = el.styles.borderImageIntrinsicWidth ?? 0;
   const natH = el.styles.borderImageIntrinsicHeight ?? 0;
@@ -275,8 +546,8 @@ export function renderBorderImage(
 
   // Repeat policy per axis (tokens order: H V; fallback: single token applies to both).
   const repeatTokens = (el.styles.borderImageRepeat ?? "stretch").trim().split(/\s+/);
-  const rH = (repeatTokens[0] || "stretch").toLowerCase();
-  const rV = (repeatTokens[1] || rH).toLowerCase();
+  const rH = normalizeBorderImageRepeat((repeatTokens[0] ?? "stretch").toLowerCase());
+  const rV = repeatTokens[1] != null && repeatTokens[1] !== "" ? normalizeBorderImageRepeat(repeatTokens[1].toLowerCase()) : rH;
 
   // Slot geometry (in element-absolute coords).
   const x0 = boxX, x1 = boxX + wl, x2 = boxX + boxW - wr, x3 = boxX + boxW;
@@ -356,16 +627,29 @@ export function renderBorderImage(
         tileH = dhSlot / count;
       }
     }
-    // space: pad between tiles. Approximated here as a constant gap; exact
-    // placement depends on count math Chrome uses. Close-enough fallback.
+    // DM-795: `space` tiles the source N whole times with equal gaps between
+    // tiles AND half-gaps at each end (CSS Images 3 §6.1.3). Compute N =
+    // floor(slot / tile); if N === 0 the tile is too big for the slot and
+    // the spec says no border is drawn for that side, so bail. Otherwise set
+    // `patternW = dwSlot / N` so cells span the slot evenly, and offset the
+    // pattern start by half a gap. The `<image>` inside the cell needs a
+    // `<clipPath>` clipped to the slice region (0, 0, tileW, tileH) —
+    // otherwise the image extends past the slice into the gap, painting
+    // source pixels beyond the slice region instead of transparent gap.
     let patternW = tileW, patternH = tileH;
+    let patternX = dxSlot, patternY = dySlot;
     if (mode === "space") {
       if (axis === "x") {
-        const count = Math.max(1, Math.floor(dwSlot / tileW));
+        const count = Math.floor(dwSlot / tileW);
+        if (count <= 0) return;
         patternW = dwSlot / count;
+        // Per spec, half-gap at each end: shift pattern start by `(patternW − tileW) / 2`.
+        patternX = dxSlot + (patternW - tileW) / 2;
       } else {
-        const count = Math.max(1, Math.floor(dhSlot / tileH));
+        const count = Math.floor(dhSlot / tileH);
+        if (count <= 0) return;
         patternH = dhSlot / count;
+        patternY = dySlot + (patternH - tileH) / 2;
       }
     }
     const patId = `${idPrefix}bip${clipIdx + usedIds}`;
@@ -377,7 +661,17 @@ export function renderBorderImage(
     const inImgY = -sy * imgScaleY;
     const inImgW = natW * imgScaleX;
     const inImgH = natH * imgScaleY;
-    defsParts.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(dxSlot)}" y="${r(dySlot)}" width="${r(patternW)}" height="${r(patternH)}"><image href="${esc(embedResizedDataUri(url, inImgW, inImgH))}" x="${r(inImgX)}" y="${r(inImgY)}" width="${r(inImgW)}" height="${r(inImgH)}" preserveAspectRatio="none" /></pattern>`);
+    // DM-795: clip the image to the slice region so `space` mode shows
+    // transparent gaps between tiles instead of bleeding adjacent source
+    // pixels into the gap. The clipPath is scoped to the pattern cell at
+    // (0, 0) - (tileW, tileH) and references the image inside the pattern.
+    const clipBgId = `${idPrefix}bic${clipIdx + usedIds}`;
+    usedIds++;
+    const clipDef = mode === "space"
+      ? `<clipPath id="${clipBgId}"><rect x="0" y="0" width="${r(tileW)}" height="${r(tileH)}" /></clipPath>`
+      : "";
+    const imgClip = mode === "space" ? ` clip-path="url(#${clipBgId})"` : "";
+    defsParts.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(patternX)}" y="${r(patternY)}" width="${r(patternW)}" height="${r(patternH)}">${clipDef}<image href="${esc(embedResizedDataUri(url, inImgW, inImgH))}" x="${r(inImgX)}" y="${r(inImgY)}" width="${r(inImgW)}" height="${r(inImgH)}" preserveAspectRatio="none"${imgClip} /></pattern>`);
     parts.push(`${indent}<rect x="${r(dxSlot)}" y="${r(dySlot)}" width="${r(dwSlot)}" height="${r(dhSlot)}" fill="url(#${patId})" />`);
   };
 
@@ -392,24 +686,96 @@ export function renderBorderImage(
     emitStretchedSlice(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st);
     emitStretchedSlice(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb);
   } else {
-    emitTiledSliceEdge(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st, "x", rH as "repeat" | "round" | "space");
-    emitTiledSliceEdge(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb, "x", rH as "repeat" | "round" | "space");
+    emitTiledSliceEdge(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st, "x", rH);
+    emitTiledSliceEdge(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb, "x", rH);
   }
   // Left + Right edges (vertical axis).
   if (rV === "stretch") {
     emitStretchedSlice(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C);
     emitStretchedSlice(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C);
   } else {
-    emitTiledSliceEdge(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C, "y", rV as "repeat" | "round" | "space");
-    emitTiledSliceEdge(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C, "y", rV as "repeat" | "round" | "space");
+    emitTiledSliceEdge(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C, "y", rV);
+    emitTiledSliceEdge(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C, "y", rV);
   }
-  // Center (only if 'fill').
+  // Center (only if `fill`). Per CSS Backgrounds 3 §6.1.3 the middle slice
+  // is tiled in both directions when `border-image-repeat` is non-stretch,
+  // using the SAME tile sizing as the corresponding edge — horizontal axis
+  // matches the top edge derivation (tileW_natural = sxW_C × wt / st),
+  // vertical matches the left edge derivation (tileH_natural = syH_C × wl / sl).
+  // Single stretched <image> for stretch×stretch; otherwise a 2D <pattern>.
   if (fillCenter) {
+    const dwCenter = x2 - x1;
+    const dhCenter = y2 - y1;
     if (rH === "stretch" && rV === "stretch") {
-      emitStretchedSlice(x1, y1, x2 - x1, y2 - y1, sxC, syC, sxW_C, syH_C);
-    } else {
-      // Center repeat is uncommon; fall back to stretch for simplicity.
-      emitStretchedSlice(x1, y1, x2 - x1, y2 - y1, sxC, syC, sxW_C, syH_C);
+      emitStretchedSlice(x1, y1, dwCenter, dhCenter, sxC, syC, sxW_C, syH_C);
+    } else if (dwCenter > 0 && dhCenter > 0 && sxW_C > 0 && syH_C > 0 && st > 0 && sl > 0) {
+      // Per-axis tile size.
+      const tileWNatural = sxW_C * (wt / st);
+      const tileHNatural = syH_C * (wl / sl);
+      let tileW: number, tileH: number;
+      let patternW: number, patternH: number;
+      let tileOffX = 0, tileOffY = 0;
+      // Horizontal.
+      if (rH === "stretch") {
+        tileW = dwCenter;
+        patternW = dwCenter;
+      } else if (rH === "round") {
+        const count = Math.max(1, Math.round(dwCenter / tileWNatural));
+        tileW = dwCenter / count;
+        patternW = tileW;
+      } else if (rH === "space") {
+        const count = Math.floor(dwCenter / tileWNatural);
+        if (count <= 0) { tileW = 0; patternW = 0; } else {
+          tileW = tileWNatural;
+          patternW = dwCenter / count;
+          tileOffX = (patternW - tileW) / 2;
+        }
+      } else { // "repeat"
+        tileW = tileWNatural;
+        patternW = tileWNatural;
+      }
+      // Vertical.
+      if (rV === "stretch") {
+        tileH = dhCenter;
+        patternH = dhCenter;
+      } else if (rV === "round") {
+        const count = Math.max(1, Math.round(dhCenter / tileHNatural));
+        tileH = dhCenter / count;
+        patternH = tileH;
+      } else if (rV === "space") {
+        const count = Math.floor(dhCenter / tileHNatural);
+        if (count <= 0) { tileH = 0; patternH = 0; } else {
+          tileH = tileHNatural;
+          patternH = dhCenter / count;
+          tileOffY = (patternH - tileH) / 2;
+        }
+      } else {
+        tileH = tileHNatural;
+        patternH = tileHNatural;
+      }
+      if (tileW > 0 && tileH > 0 && patternW > 0 && patternH > 0) {
+        const imgScaleX = tileW / sxW_C;
+        const imgScaleY = tileH / syH_C;
+        const inImgX = -sxC * imgScaleX + tileOffX;
+        const inImgY = -syC * imgScaleY + tileOffY;
+        const inImgW = natW * imgScaleX;
+        const inImgH = natH * imgScaleY;
+        const patId = `${idPrefix}bipc${clipIdx + usedIds}`;
+        usedIds++;
+        // For `space` mode, clip the image to the visible tile region so
+        // gaps stay transparent (mirrors the edge-tile fix from DM-795).
+        const needsClip = rH === "space" || rV === "space";
+        let clipDef = "";
+        let imgClip = "";
+        if (needsClip) {
+          const clipBgId = `${idPrefix}bicc${clipIdx + usedIds}`;
+          usedIds++;
+          clipDef = `<clipPath id="${clipBgId}"><rect x="${r(tileOffX)}" y="${r(tileOffY)}" width="${r(tileW)}" height="${r(tileH)}" /></clipPath>`;
+          imgClip = ` clip-path="url(#${clipBgId})"`;
+        }
+        defsParts.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(x1)}" y="${r(y1)}" width="${r(patternW)}" height="${r(patternH)}">${clipDef}<image href="${esc(embedResizedDataUri(url, inImgW, inImgH))}" x="${r(inImgX)}" y="${r(inImgY)}" width="${r(inImgW)}" height="${r(inImgH)}" preserveAspectRatio="none"${imgClip} /></pattern>`);
+        parts.push(`${indent}<rect x="${r(x1)}" y="${r(y1)}" width="${r(dwCenter)}" height="${r(dhCenter)}" fill="url(#${patId})" />`);
+      }
     }
   }