html2canvas-pro 2.5.4 → 2.6.1

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.4 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.6.1 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -242,6 +242,30 @@ var Validator = class {
 		};
 	}
 	/**
+	* Validate the backgroundColor option
+	*
+	* @param backgroundColor - CSS color string or null (transparent)
+	* @returns Validation result
+	*/
+	validateBackgroundColor(backgroundColor) {
+		if (backgroundColor === null) return {
+			valid: true,
+			sanitized: null
+		};
+		if (typeof backgroundColor !== "string" || backgroundColor.length === 0) return {
+			valid: false,
+			error: "backgroundColor must be a CSS color string or null"
+		};
+		if (/[^a-zA-Z0-9%(),.#\s/-]/.test(backgroundColor)) return {
+			valid: false,
+			error: `backgroundColor contains characters that cannot appear in a CSS color: ${backgroundColor}`
+		};
+		return {
+			valid: true,
+			sanitized: backgroundColor
+		};
+	}
+	/**
 	* Validate image timeout
 	*
 	* @param timeout - Timeout in milliseconds
@@ -386,6 +410,10 @@ var Validator = class {
 			const nonceResult = this.validateCspNonce(options.cspNonce);
 			if (!nonceResult.valid) errors.push(`CSP nonce: ${nonceResult.error}`);
 		}
+		if (options.backgroundColor !== void 0) {
+			const colorResult = this.validateBackgroundColor(options.backgroundColor);
+			if (!colorResult.valid) errors.push(`backgroundColor: ${colorResult.error}`);
+		}
 		if (this.config.customValidator) {
 			const customResult = this.config.customValidator(options, "options");
 			if (!customResult.valid) errors.push(`Custom validation: ${customResult.error}`);
@@ -7885,19 +7913,19 @@ const PSEUDO_HIDE_ELEMENT_STYLE = `{
 }`;
 /**
 * Inject the stylesheet that hides pseudo-element surrogate containers.
-* Called on the cloned <body> so the surrogates themselves never render.
+* Added to the cloned <head> so the surrogates themselves never render.
 */
-const createPseudoHideStyles = (body, cspNonce) => {
-	createStyles(body, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
+const createPseudoHideStyles = (parent, cspNonce) => {
+	createStyles(parent, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
          .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`, cspNonce);
 };
-const createStyles = (body, styles, cspNonce) => {
-	const document = body.ownerDocument;
+const createStyles = (parent, styles, cspNonce) => {
+	const document = parent.ownerDocument;
 	if (document) {
 		const style = document.createElement("style");
 		style.textContent = styles;
 		if (cspNonce) style.nonce = cspNonce;
-		body.appendChild(style);
+		parent.appendChild(style);
 	}
 };
 /**
@@ -8017,9 +8045,20 @@ const createIFrameContainer = (ownerDocument, bounds, customContainer) => {
 	cloneIframeContainer.style.position = "fixed";
 	cloneIframeContainer.style.left = "-10000px";
 	cloneIframeContainer.style.top = "0px";
-	cloneIframeContainer.style.border = "0";
 	cloneIframeContainer.width = bounds.width.toString();
 	cloneIframeContainer.height = bounds.height.toString();
+	const contentBox = [
+		["width", `${bounds.width}px`],
+		["height", `${bounds.height}px`],
+		["min-width", "0px"],
+		["max-width", "none"],
+		["min-height", "0px"],
+		["max-height", "none"],
+		["box-sizing", "content-box"],
+		["padding", "0px"],
+		["border", "0"]
+	];
+	for (const [property, value] of contentBox) cloneIframeContainer.style.setProperty(property, value, "important");
 	cloneIframeContainer.scrolling = "no";
 	cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, "true");
 	(customContainer || ownerDocument.body).appendChild(cloneIframeContainer);
@@ -8062,9 +8101,9 @@ const isSheetFullyApplied = (sheet, depth = 0) => {
 	if (!rules) return true;
 	for (let i = 0; i < rules.length; i++) {
 		const rule = rules[i];
-		if (rule && typeof CSSImportRule !== "undefined" && rule instanceof CSSImportRule) {
-			if (!rule.styleSheet || !isSheetFullyApplied(rule.styleSheet, depth + 1)) return false;
-		}
+		if (!rule || !("styleSheet" in rule)) continue;
+		const inner = rule.styleSheet;
+		if (!inner || !isSheetFullyApplied(inner, depth + 1)) return false;
 	}
 	return true;
 };
@@ -8106,7 +8145,7 @@ const collectLinks = (root, out) => {
 * remain as the settle path for plain <link> fetches.
 * @internal – exported for testing only.
 */
-const stylesheetsReady = (documentClone, logger, signal) => {
+const stylesheetsReady = (documentClone, logger, signal, timeoutMs = STYLESHEET_READY_TIMEOUT_MS) => {
 	if (signal?.aborted) return Promise.resolve();
 	const pending = [];
 	const links = [];
@@ -8136,8 +8175,8 @@ const stylesheetsReady = (documentClone, logger, signal) => {
 			const timer = setInterval(() => {
 				elapsed += 50;
 				if (link.sheet) settle();
-				else if (elapsed >= 1e4) {
-					logger?.warn(`Stylesheet ${href} did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+				else if (elapsed >= timeoutMs) {
+					logger?.warn(`Stylesheet ${href} did not finish loading within ${timeoutMs / 1e3}s; continuing with a possibly unstyled clone`);
 					settle();
 				}
 			}, 50);
@@ -8154,8 +8193,8 @@ const stylesheetsReady = (documentClone, logger, signal) => {
 			const timer = setInterval(() => {
 				elapsed += 50;
 				const currentSheet = style.sheet;
-				if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= 1e4) {
-					if (elapsed >= 1e4 && !isSheetFullyApplied(currentSheet ?? null)) logger?.warn(`@import chain in an inline <style> did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+				if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= timeoutMs) {
+					if (elapsed >= timeoutMs && !isSheetFullyApplied(currentSheet ?? null)) logger?.warn(`@import chain in an inline <style> did not finish loading within ${timeoutMs / 1e3}s; continuing with a possibly unstyled clone`);
 					clearInterval(timer);
 					resolve();
 				}
@@ -8368,6 +8407,7 @@ var DocumentCloner = class {
 		}
 		this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false);
 		this.appendDocumentAdoptedStyles(element.ownerDocument);
+		this.appendPseudoHideStyles();
 	}
 	/**
 	* Re-materialise the source document's constructable stylesheets
@@ -8387,6 +8427,16 @@ var DocumentCloner = class {
 		const style = createAdoptedStylesElement(this.documentElement.ownerDocument ?? ownerDocument, sheets, this.options.cspNonce);
 		if (style) head.appendChild(style);
 	}
+	/**
+	* Add the rules that hide the source ::before / ::after (the clone draws
+	* them as surrogate elements) to the clone's <head>. Inside <body> the
+	* <style> would be one of its children, and `body > :first-child`,
+	* `:nth-child()` and sibling selectors would match the wrong elements.
+	*/
+	appendPseudoHideStyles() {
+		const head = this.documentElement.getElementsByTagName("head").item(0);
+		createPseudoHideStyles(head ?? this.documentElement, this.options.cspNonce);
+	}
 	toIFrame(ownerDocument, windowSize) {
 		return mountCloneInIFrame(this.context, ownerDocument, windowSize, {
 			documentElement: this.documentElement,
@@ -8522,7 +8572,6 @@ var DocumentCloner = class {
 			const style = window.getComputedStyle(node);
 			const checkPseudoElements = canHavePseudoElements(node);
 			if (this.referenceElement === node && isHTMLElementNode(clone)) this.clonedReferenceElement = clone;
-			if (isBodyElement(clone)) createPseudoHideStyles(clone, this.options.cspNonce);
 			const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
 			if (checkPseudoElements) {
 				const styleBefore = window.getComputedStyle(node, ":before");
@@ -8646,6 +8695,115 @@ var DOMNormalizer = class {
 	}
 };
 //#endregion
+//#region src/dom/filter-reference.ts
+const SVG_NS$1 = "http://www.w3.org/2000/svg";
+const XLINK_NS = "http://www.w3.org/1999/xlink";
+const REGION_DEFAULTS = {
+	x: "-10%",
+	y: "-10%",
+	width: "120%",
+	height: "120%"
+};
+const PRESENTATION_PROPERTIES = [
+	"color-interpolation-filters",
+	"flood-color",
+	"flood-opacity",
+	"lighting-color"
+];
+const REFERENCE_RE = /^(["']?)(#[^"'\s()]+)\1$/;
+const URL_RE = /url\(\s*([^)]*?)\s*\)/g;
+/** The `#id` of a same-document url() body (`"#id"`, `'#id'` or `#id`), or null. */
+const parseFilterReference = (body) => {
+	const match = REFERENCE_RE.exec(body.trim());
+	return match ? match[2] : null;
+};
+/**
+* Resolve every same-document url() reference of a computed filter value.
+* References that cannot be expressed in the serialized SVG are left out, so
+* the compositor rejects the chain and the subtree keeps the legacy renderer.
+*/
+function resolveFilterReferences(element, filter, box) {
+	if (!filter || filter.indexOf("url(") === -1) return void 0;
+	const references = /* @__PURE__ */ new Map();
+	const seen = /* @__PURE__ */ new Set();
+	for (const match of filter.matchAll(URL_RE)) {
+		const ref = parseFilterReference(match[1]);
+		if (!ref || seen.has(ref)) continue;
+		seen.add(ref);
+		const reference = resolveFilterReference(element.ownerDocument, ref, box);
+		if (reference) references.set(ref, reference);
+	}
+	return references;
+}
+function resolveFilterReference(document, ref, box) {
+	const source = document.getElementById(ref.slice(1));
+	if (!source || source.namespaceURI !== SVG_NS$1 || source.localName !== "filter") return null;
+	if (!isSelfContained(source)) return null;
+	const region = filterRegion(source, box);
+	if (!region) return null;
+	const copy = source.cloneNode(true);
+	inlinePresentation(source, copy);
+	copy.removeAttribute("id");
+	copy.setAttribute("filterUnits", "userSpaceOnUse");
+	Object.keys(region).forEach((name) => copy.setAttribute(name, String(region[name])));
+	const outset = Math.max(0, -region.x, -region.y, region.x + region.width - box.width, region.y + region.height - box.height);
+	return {
+		element: copy,
+		region,
+		outset: Math.ceil(outset)
+	};
+}
+const hasHref = (node) => node.hasAttribute("href") || node.hasAttributeNS(XLINK_NS, "href");
+function isSelfContained(source) {
+	if (source.getAttribute("primitiveUnits") === "objectBoundingBox" || hasHref(source)) return false;
+	for (const primitive of Array.from(source.querySelectorAll("*"))) {
+		if (primitive.localName === "feImage" || hasHref(primitive)) return false;
+		for (const name of [
+			"x",
+			"y",
+			"width",
+			"height"
+		]) if ((primitive.getAttribute(name) ?? "").indexOf("%") !== -1) return false;
+	}
+	return true;
+}
+function filterRegion(source, box) {
+	const boundingBox = source.getAttribute("filterUnits") !== "userSpaceOnUse";
+	const read = (name, size) => {
+		const raw = (source.getAttribute(name) ?? (boundingBox ? REGION_DEFAULTS[name] : "")).trim();
+		if (raw === "") return null;
+		const percentage = raw.endsWith("%");
+		const value = Number(percentage ? raw.slice(0, -1) : raw.replace(/px$/, ""));
+		if (!Number.isFinite(value)) return null;
+		if (boundingBox) return (percentage ? value / 100 : value) * size;
+		return percentage ? null : value;
+	};
+	const x = read("x", box.width);
+	const y = read("y", box.height);
+	const width = read("width", box.width);
+	const height = read("height", box.height);
+	if (x === null || y === null || width === null || height === null || width <= 0 || height <= 0) return null;
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+function inlinePresentation(source, copy) {
+	const view = source.ownerDocument.defaultView;
+	if (!view) return;
+	const sources = [source, ...Array.from(source.querySelectorAll("*"))];
+	const copies = [copy, ...Array.from(copy.querySelectorAll("*"))];
+	sources.forEach((node, index) => {
+		const style = view.getComputedStyle(node);
+		for (const property of PRESENTATION_PROPERTIES) {
+			const value = style.getPropertyValue(property);
+			if (value) copies[index]?.setAttribute(property, value);
+		}
+	});
+}
+//#endregion
 //#region src/dom/element-container.ts
 var ElementContainer = class {
 	context;
@@ -8659,6 +8817,11 @@ var ElementContainer = class {
 	* bounds to leave a matching gap (issue #227).
 	*/
 	legendBounds;
+	/**
+	* Same-document `filter: url(#id)` references, resolved while the cloned
+	* DOM is available. The surface compositor renders them in an SVG pass.
+	*/
+	filterReferences;
 	createsStackingContext = false;
 	createsRealStackingContext = false;
 	isListOwner = false;
@@ -8683,6 +8846,7 @@ var ElementContainer = class {
 				this.bounds = new Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
 			}
 		}
+		this.filterReferences = resolveFilterReferences(element, this.styles.filter, this.bounds);
 		if (isDebugging(element, 4)) this.debugRender = true;
 	}
 	/**
@@ -9843,7 +10007,7 @@ const parseStackTree = (parent, stackingContext, realStackingContext, listItems)
 		if (treatAsRealStackingContext || createsStackingContext) {
 			const parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
 			const stack = new StackingContext(paintContainer);
-			if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
+			if (treatAsRealStackingContext || child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
 				const order = child.styles.zIndex.order;
 				if (order < 0) {
 					let index = 0;
@@ -10198,6 +10362,13 @@ const parseFilterFunction = (name, body) => {
 			value: Number.parseFloat(numeric) * (percentage ? 1 / 100 : 1)
 		};
 	}
+	if (name === "url") {
+		const ref = parseFilterReference(body);
+		return ref ? {
+			kind: "url",
+			ref
+		} : null;
+	}
 	return null;
 };
 /** Split on whitespace outside parentheses so rgba(...) colours stay one token. */
@@ -10253,22 +10424,25 @@ const nativeFilterString = (filter, scale) => filter.functions.map((fn) => {
 		case "blur": return `blur(${fn.value * scale}px)`;
 		case "drop-shadow": return `drop-shadow(${fn.x * scale}px ${fn.y * scale}px ${fn.blur * scale}px ${fn.color})`;
 		case "unitless": return fn.name === "hue-rotate" ? `hue-rotate(${fn.value}deg)` : `${fn.name}(${fn.value})`;
+		case "url": return `url("${fn.ref}")`;
 	}
 }).join(" ");
 /**
 * Outset (in CSS pixels) a surface must grow so blur/shadow spillover is not
 * cropped. Unitless functions never spread beyond the bounds. Consecutive
-* blurs compound, so their radii sum.
+* blurs compound, so their radii sum. A url() reference can paint up to its
+* filter region, which may extend beyond the border box.
 */
-function filterOutset(filter) {
+function filterOutset(filter, references) {
 	let blurSum = 0;
 	let maxShadowOffset = 0;
+	let referenceOutset = 0;
 	for (const fn of filter.functions) if (fn.kind === "blur") blurSum += fn.value;
 	else if (fn.kind === "drop-shadow") {
 		blurSum += fn.blur;
 		maxShadowOffset = Math.max(maxShadowOffset, Math.abs(fn.x), Math.abs(fn.y));
-	}
-	return Math.ceil(3 * blurSum + maxShadowOffset);
+	} else if (fn.kind === "url") referenceOutset += references?.get(fn.ref)?.outset ?? 0;
+	return Math.ceil(3 * blurSum + maxShadowOffset + referenceOutset);
 }
 function canvasLike(source) {
 	const canvas = (source.ownerDocument ?? document).createElement("canvas");
@@ -10364,8 +10538,9 @@ const isSvgExpressible = (filter) => {
 	if (blurs > 0 && shadows > 0) return filter.functions.findIndex((fn) => fn.kind === "blur") < filter.functions.findIndex((fn) => fn.kind === "drop-shadow");
 	return true;
 };
-async function renderFilterSurface(source, filter, opacity, scale, signal) {
+async function renderFilterSurface(source, filter, opacity, scale, signal, references) {
 	throwIfAborted(signal);
+	if (filter.functions.some((fn) => fn.kind === "url")) return renderReferencedFilterSurface(source, filter, opacity, scale, signal, references);
 	if (filter.functions.length > 0 && supportsNativeFilters(source.ownerDocument ?? document)) {
 		const output = tryNativeFilterSurface(source, filter, opacity, scale, signal);
 		if (output) return output;
@@ -10373,6 +10548,136 @@ async function renderFilterSurface(source, filter, opacity, scale, signal) {
 	if (!isSvgExpressible(filter)) throw new FilterSurfaceError("Filter chain requires native canvas filters");
 	return renderSvgFilterSurface(source, filter, opacity, scale, signal);
 }
+/**
+* Split a chain at its url() references: each reference is one SVG pass, and
+* the standard functions between them run through the usual backends. Every
+* step filters the previous step's complete output at alpha 1, then CSS
+* opacity is applied once, as for any other chain.
+*/
+async function renderReferencedFilterSurface(source, filter, opacity, scale, signal, context) {
+	const steps = [];
+	for (const fn of filter.functions) {
+		if (fn.kind === "url") {
+			const reference = context?.references?.get(fn.ref);
+			if (!reference) throw new FilterSurfaceError(`Filter reference ${fn.ref} cannot be resolved`);
+			steps.push(reference);
+			continue;
+		}
+		const last = steps[steps.length - 1];
+		if (Array.isArray(last)) last.push(fn);
+		else steps.push([fn]);
+	}
+	const origin = context?.origin ?? {
+		x: 0,
+		y: 0
+	};
+	const last = steps[steps.length - 1];
+	const opacityApplied = Array.isArray(last);
+	let current = source;
+	try {
+		for (const step of steps) {
+			const next = Array.isArray(step) ? await renderFilterSurface(current, { functions: step }, step === last ? opacity : 1, scale, signal) : await renderReferenceSurface(current, step, origin, scale, signal);
+			if (current !== source) releaseSurface(current);
+			current = next;
+		}
+		if (opacityApplied || opacity === 1) {
+			const output = current;
+			current = source;
+			return output;
+		}
+		return drawWithOpacity(current, opacity);
+	} finally {
+		if (current !== source) releaseSurface(current);
+	}
+}
+function drawWithOpacity(source, opacity) {
+	const output = canvasLike(source);
+	const context = output.getContext("2d");
+	if (!context) {
+		releaseSurface(output);
+		throw new FilterSurfaceError("Filter surface canvas is unavailable");
+	}
+	context.globalAlpha = opacity;
+	try {
+		context.drawImage(source, 0, 0);
+		return output;
+	} catch {
+		releaseSurface(output);
+		throw new FilterSurfaceError("Filter surface image cannot be drawn");
+	}
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(owner, tag, attributes = {}) {
+	const node = owner.createElementNS(SVG_NS, tag);
+	Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
+	return node;
+}
+function serializeSurface(source) {
+	try {
+		const url = source.toDataURL("image/png");
+		if (url === "data:,") throw new Error("Canvas size is unsupported");
+		return url;
+	} catch {
+		throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
+	}
+}
+/** Decode a filtered SVG image and draw it onto a surface-sized canvas. */
+async function drawSvgSurface(svg, source, opacity, signal) {
+	const imageWindow = (source.ownerDocument ?? document).defaultView;
+	const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
+	let output;
+	try {
+		image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+		await decodeSurface(image, signal);
+		throwIfAborted(signal);
+		output = canvasLike(source);
+		const context = output.getContext("2d");
+		if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
+		context.globalAlpha = opacity;
+		context.drawImage(image, 0, 0);
+		return output;
+	} catch (error) {
+		if (output) releaseSurface(output);
+		if (signal?.aborted) throwIfAborted(signal);
+		throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
+	} finally {
+		image.removeAttribute("src");
+	}
+}
+/**
+* Apply a referenced SVG filter to the complete surface. The viewBox is in CSS
+* pixels, so the filter's user units scale with the capture, and the image is
+* placed so user space starts at the element's border box, as it does for the
+* live element. Canvas filters cannot express either: their lengths are in
+* device pixels and their bounding box is the whole canvas.
+*/
+async function renderReferenceSurface(source, reference, origin, scale, signal) {
+	throwIfAborted(signal);
+	const owner = source.ownerDocument ?? document;
+	const width = source.width / scale;
+	const height = source.height / scale;
+	const svg = createSvgElement(owner, "svg", {
+		width: source.width,
+		height: source.height,
+		viewBox: `0 0 ${width} ${height}`
+	});
+	const defs = createSvgElement(owner, "defs");
+	const filterElement = owner.importNode(reference.element, true);
+	filterElement.setAttribute("id", "composited-reference");
+	defs.appendChild(filterElement);
+	svg.appendChild(defs);
+	const group = createSvgElement(owner, "g", { transform: `translate(${origin.x} ${origin.y})` });
+	group.appendChild(createSvgElement(owner, "image", {
+		x: -origin.x,
+		y: -origin.y,
+		width,
+		height,
+		href: serializeSurface(source),
+		filter: "url(#composited-reference)"
+	}));
+	svg.appendChild(group);
+	return drawSvgSurface(svg, source, 1, signal);
+}
 async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 	throwIfAborted(signal);
 	const blur = filter.functions.find((fn) => fn.kind === "blur");
@@ -10384,29 +10689,9 @@ async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 		blur: shadow.blur,
 		color: shadow.color
 	} : void 0;
-	if (!blurValue && !shadowValue) {
-		const output = canvasLike(source);
-		const context = output.getContext("2d");
-		if (!context) {
-			releaseSurface(output);
-			throw new FilterSurfaceError("Filter surface canvas is unavailable");
-		}
-		context.globalAlpha = opacity;
-		try {
-			context.drawImage(source, 0, 0);
-			return output;
-		} catch {
-			releaseSurface(output);
-			throw new FilterSurfaceError("Filter surface image cannot be drawn");
-		}
-	}
-	const namespace = "http://www.w3.org/2000/svg";
+	if (!blurValue && !shadowValue) return drawWithOpacity(source, opacity);
 	const svgDocument = source.ownerDocument ?? document;
-	const element = (tag, attributes = {}) => {
-		const node = svgDocument.createElementNS(namespace, tag);
-		Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
-		return node;
-	};
+	const element = (tag, attributes = {}) => createSvgElement(svgDocument, tag, attributes);
 	const svg = element("svg", {
 		width: source.width,
 		height: source.height,
@@ -10448,39 +10733,13 @@ async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 	}
 	defs.appendChild(filterElement);
 	svg.appendChild(defs);
-	let sourceUrl;
-	try {
-		sourceUrl = source.toDataURL("image/png");
-		if (sourceUrl === "data:,") throw new Error("Canvas size is unsupported");
-	} catch {
-		throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
-	}
 	svg.appendChild(element("image", {
 		width: source.width,
 		height: source.height,
-		href: sourceUrl,
+		href: serializeSurface(source),
 		filter: "url(#composited-filter)"
 	}));
-	const imageWindow = svgDocument.defaultView;
-	const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
-	let output;
-	try {
-		image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-		await decodeSurface(image, signal);
-		throwIfAborted(signal);
-		output = canvasLike(source);
-		const context = output.getContext("2d");
-		if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
-		context.globalAlpha = opacity;
-		context.drawImage(image, 0, 0);
-		return output;
-	} catch (error) {
-		if (output) releaseSurface(output);
-		if (signal?.aborted) throwIfAborted(signal);
-		throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
-	} finally {
-		image.removeAttribute("src");
-	}
+	return drawSvgSurface(svg, source, opacity, signal);
 }
 function reserveSurface(budget, width, height) {
 	const pixels = width * height * 4;
@@ -10504,7 +10763,7 @@ function surfaceBounds(container) {
 	}
 	for (const child of container.elements) if (child.styles.isVisible()) bounds = union(bounds, surfaceBounds(child));
 	const filter = parseFilterChain(styles.filter);
-	return expand(bounds, filter ? filterOutset(filter) : 0);
+	return expand(bounds, filter ? filterOutset(filter, container.filterReferences) : 0);
 }
 function cropSurface(bounds, viewport, margin, scale) {
 	const area = expand(viewport, margin);
@@ -12141,6 +12400,7 @@ const paintRadialLayer = (ctx, layer, area) => {
 	ctx.fillStyle = rasterized.lastColor;
 	ctx.fillRect(area.left, area.top, area.width, area.height);
 	ctx.drawImage(rasterized.canvas, area.left + cx - rx, area.top + cy - ry, rx * 2, ry * 2);
+	releaseSurface(rasterized.canvas);
 };
 /** Draw one gradient layer filling the whole mask area. */
 const paintGradientLayer = (ctx, layer, area) => {
@@ -12995,7 +13255,8 @@ var CanvasRenderer = class CanvasRenderer {
 	async renderCompositedStack(stack, filter, hasMask, reflect, hasBlend = false) {
 		const signal = this.options.signal;
 		if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-		const bounds = cropSurface(surfaceBounds(stack.element.container), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter) : 0, this.options.scale);
+		const container = stack.element.container;
+		const bounds = cropSurface(surfaceBounds(container), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter, container.filterReferences) : 0, this.options.scale);
 		if (!bounds.width || !bounds.height) return true;
 		const reserved = reserveSurface(this.surfaceBudget, Math.ceil(bounds.width * this.options.scale), Math.ceil(bounds.height * this.options.scale));
 		if (!reserved) {
@@ -13017,7 +13278,13 @@ var CanvasRenderer = class CanvasRenderer {
 			source = new CanvasRenderer(this.context, options, stack.element, this.surfaceBudget);
 			await source.renderStackContent(stack);
 			source.effectsRenderer.applyEffects([]);
-			if (filter) filtered = await renderFilterSurface(source.canvas, filter, stack.element.container.styles.opacity, options.scale, signal);
+			if (filter) filtered = await renderFilterSurface(source.canvas, filter, container.styles.opacity, options.scale, signal, {
+				references: container.filterReferences,
+				origin: {
+					x: container.bounds.left - bounds.left,
+					y: container.bounds.top - bounds.top
+				}
+			});
 			const composited = filtered ?? source.canvas;
 			if (hasMask) await this.applyMask(composited, stack.element.container.styles, bounds);
 			if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
@@ -13054,7 +13321,10 @@ var CanvasRenderer = class CanvasRenderer {
 		maskCanvas.width = surface.width;
 		maskCanvas.height = surface.height;
 		const maskCtx = maskCanvas.getContext("2d");
-		if (!maskCtx) return;
+		if (!maskCtx) {
+			releaseSurface(maskCanvas);
+			return;
+		}
 		maskCtx.scale(this.options.scale, this.options.scale);
 		maskCtx.translate(-bounds.left, -bounds.top);
 		try {
@@ -13066,6 +13336,7 @@ var CanvasRenderer = class CanvasRenderer {
 			}, async (url) => await this.context.cache.match(url));
 		} catch (error) {
 			this.context.logger.error(`Error rendering mask-image: ${error instanceof Error ? error.message : error}`);
+			releaseSurface(maskCanvas);
 			return;
 		}
 		ctx.save();
@@ -13075,6 +13346,7 @@ var CanvasRenderer = class CanvasRenderer {
 			ctx.drawImage(maskCanvas, 0, 0);
 		} finally {
 			ctx.restore();
+			releaseSurface(maskCanvas);
 		}
 	}
 	/**
@@ -13479,6 +13751,7 @@ var CanvasRenderer = class CanvasRenderer {
 			ctx.fillStyle = rasterized.lastColor;
 			ctx.fillRect(0, 0, width, height);
 			ctx.drawImage(rasterized.canvas, cx - rx, cy - ry, rx * 2, ry * 2);
+			releaseSurface(rasterized.canvas);
 			return canvas;
 		}
 		if (source.type === 5 || source.type === 6) {