html2canvas-pro 2.5.4 → 2.6.1

package/dist/html2canvas-pro.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
 */
@@ -249,6 +249,30 @@
 			};
 		}
 		/**
+		* 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
@@ -393,6 +417,10 @@
 				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}`);
@@ -7892,19 +7920,19 @@
 }`;
 	/**
 	* 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);
 		}
 	};
 	/**
@@ -8024,9 +8052,20 @@
 		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);
@@ -8069,9 +8108,9 @@
 		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;
 	};
@@ -8113,7 +8152,7 @@
 	* 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 = [];
@@ -8143,8 +8182,8 @@
 				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);
@@ -8161,8 +8200,8 @@
 				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();
 					}
@@ -8375,6 +8414,7 @@
 			}
 			this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false);
 			this.appendDocumentAdoptedStyles(element.ownerDocument);
+			this.appendPseudoHideStyles();
 		}
 		/**
 		* Re-materialise the source document's constructable stylesheets
@@ -8394,6 +8434,16 @@
 			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,
@@ -8529,7 +8579,6 @@
 				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");
@@ -8653,6 +8702,115 @@
 		}
 	};
 	//#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;
@@ -8666,6 +8824,11 @@
 		* 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;
@@ -8690,6 +8853,7 @@
 					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;
 		}
 		/**
@@ -9850,7 +10014,7 @@
 			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;
@@ -10205,6 +10369,13 @@
 				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. */
@@ -10260,22 +10431,25 @@
 			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");
@@ -10371,8 +10545,9 @@
 		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;
@@ -10380,6 +10555,136 @@
 		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");
@@ -10391,29 +10696,9 @@
 			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,
@@ -10455,39 +10740,13 @@
 		}
 		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;
@@ -10511,7 +10770,7 @@
 		}
 		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);
@@ -12148,6 +12407,7 @@
 		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) => {
@@ -13002,7 +13262,8 @@
 		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) {
@@ -13024,7 +13285,13 @@
 				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");
@@ -13061,7 +13328,10 @@
 			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 {
@@ -13073,6 +13343,7 @@
 				}, 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();
@@ -13082,6 +13353,7 @@
 				ctx.drawImage(maskCanvas, 0, 0);
 			} finally {
 				ctx.restore();
+				releaseSurface(maskCanvas);
 			}
 		}
 		/**
@@ -13486,6 +13758,7 @@
 				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) {