domotion-svg 0.2.2 → 0.3.2

package/dist/render/borders.js

@@ -6,6 +6,13 @@
 import { r, esc } from "./format.js";
 import { parseColor } from "./colors.js";
 import { embedResizedDataUri } from "../capture/embed.js";
+import { parseGradient, buildLinearGradientDef, buildRadialGradientDef } from "./gradients.js";
+const BORDER_IMAGE_REPEATS = new Set(["stretch", "repeat", "round", "space"]);
+function normalizeBorderImageRepeat(raw) {
+    if (raw != null && BORDER_IMAGE_REPEATS.has(raw))
+        return raw;
+    return "stretch";
+}
 /** Parse a captured "h v" axis-pair (e.g. "30px 30px" or "50px 20px"). */
 function _parsePair(v) {
     if (!v)
@@ -73,6 +80,27 @@ export function insetCornerRadii(c, top, right, bottom, left) {
         && tl.h === br.h && tl.h === br.v && tl.h === bl.h && tl.h === bl.v;
     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, spread) {
+    const grow = (p) => ({
+        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. */
@@ -168,13 +196,239 @@ export function injectSvgSize(svgHtml, w, h) {
  * 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, indent, idPrefix, defsParts, clipIdx, src) {
+    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, basis, borderW) => {
+        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, basis, borderW) => {
+        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, basis) => {
+        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 = [];
+    // 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, dy, dw, dh, sx, sy, sw, sh) => {
+        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, dy, dw, dh, sx, sy, sw, sh) => {
+        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, dy, dw, dh, sx, sy, sw, sh, axis, mode) => {
+        if (dw <= 0 || dh <= 0 || sw <= 0 || sh <= 0)
+            return;
+        let tileW, tileH;
+        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, indent, idPrefix, defsParts, clipIdx) {
     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;
@@ -246,8 +500,8 @@ export function renderBorderImage(el, indent, idPrefix, defsParts, clipIdx) {
     const boxH = el.height + ot + ob;
     // 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;
     const y0 = boxY, y1 = boxY + wt, y2 = boxY + boxH - wb, y3 = boxY + boxH;
@@ -304,17 +558,32 @@ export function renderBorderImage(el, indent, idPrefix, defsParts, clipIdx) {
                 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}`;
@@ -326,7 +595,17 @@ export function renderBorderImage(el, indent, idPrefix, defsParts, clipIdx) {
         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})" />`);
     };
     // Corners: always stretched (CSS spec).
@@ -352,14 +631,100 @@ export function renderBorderImage(el, indent, idPrefix, defsParts, clipIdx) {
         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);
+            emitStretchedSlice(x1, y1, dwCenter, dhCenter, 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);
+        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, tileH;
+            let patternW, patternH;
+            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})" />`);
+            }
         }
     }
     return { svg: parts.join("\n"), usedIds };

package/dist/render/element-tree-to-svg.d.ts

@@ -93,18 +93,6 @@ export declare function rewriteFragmentMaskDef(outerHTML: string, outputId: stri
  * DM-493.
  */
 export declare function positionFragmentMaskDef(rewrittenOuterHTML: string, elX: number, elY: number, elW: number, elH: number): string;
-/**
- * Translate a CSS mask-image value + mask-* siblings into an SVG <mask>.
- * Handles single-layer gradients and url() sources. Position/size/repeat are
- * applied via an internal <pattern> for url sources; gradients use direct
- * gradient fills sized to the element box.
- *
- * SVG <mask> uses luminance by default (bright pixels visible). CSS mask-mode
- * 'alpha' makes the alpha channel control visibility. We set mask-type on the
- * <mask> element accordingly. Note: Chromium may render mask-mode:'match-source'
- * differently depending on the source; we pick alpha for gradients and url()
- * (common case) and respect explicit mask-mode when given.
- */
 export declare function buildMaskDef(id: string, maskImage: string, elX: number, elY: number, w: number, h: number, maskMode: string, sizeCss: string, posCss: string, repeatCss: string, compositeCss: string, 
 /** DM-494: lookup table for `mask-image: element(#id)` references. Optional —
  *  callers without element() refs can omit it. The renderer's main caller
@@ -129,4 +117,15 @@ elementRasters?: ReadonlyMap<string, MaskRasterRef>): {
  * map to xMin/xMid/xMax + yMin/yMid/yMax. Percentages are bucketed to thirds
  * since SVG has no finer-grained alignment.
  */
+/**
+ * DM-819: rewrite an SVG-source data URI so its top-level `<svg>` declares
+ * `width=consumerW height=consumerH preserveAspectRatio="<par>"`. Chrome
+ * ignores the outer `<image>`'s `preserveAspectRatio` when the source is
+ * SVG (paints at the SVG's own intrinsic size), but it does honor the
+ * embedded SVG's own preserveAspectRatio. Baking the alignment into the
+ * inner SVG lets `object-fit: cover` on an `<img>` referencing an SVG file
+ * actually slice. Returns the input unchanged for raster sources or when
+ * the inner SVG can't be parsed.
+ */
+export declare function rewriteSvgDataUriPreserveAspectRatio(dataUri: string, w: number, h: number, par: string): string;
 export declare function preserveAspectRatioFor(fit: string | undefined, pos: string | undefined): string;