html2canvas-pro 2.6.0 → 2.6.2

package/dist/html2canvas-pro.cjs

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.6.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.6.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -7,7 +7,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-//#region src/config.ts
+// src/config.ts
 /**
 * Html2Canvas Configuration
 *
@@ -50,8 +50,7 @@ var Html2CanvasConfig = class Html2CanvasConfig {
 		});
 	}
 };
-//#endregion
-//#region src/core/validator.ts
+// src/core/validator.ts
 /**
 * Input Validator
 *
@@ -439,8 +438,7 @@ function createDefaultValidator(config = {}) {
 		...config
 	});
 }
-//#endregion
-//#region src/core/performance-monitor.ts
+// src/core/performance-monitor.ts
 /**
 * Performance Monitor
 *
@@ -449,7 +447,8 @@ function createDefaultValidator(config = {}) {
 *
 * Usage:
 * ```typescript
-* const monitor = new PerformanceMonitor(context);
+* // Standalone (logs disabled) or with the render pipeline's context.
+* const monitor = new PerformanceMonitor(null);
 *
 * monitor.start('clone');
 * await cloneDocument();
@@ -459,13 +458,13 @@ function createDefaultValidator(config = {}) {
 * ```
 */
 var PerformanceMonitor = class {
-	context;
+	logger;
 	activeMetrics = /* @__PURE__ */ new Map();
 	completedMetrics = [];
 	enabled;
 	getTime;
-	constructor(context, enabled = true) {
-		this.context = context;
+	constructor(logger, enabled = true) {
+		this.logger = logger;
 		this.enabled = enabled;
 		this.getTime = typeof performance !== "undefined" && typeof performance.now === "function" ? () => performance.now() : () => Date.now();
 	}
@@ -477,7 +476,7 @@ var PerformanceMonitor = class {
 	*/
 	start(name, metadata) {
 		if (!this.enabled) return;
-		if (this.activeMetrics.has(name)) this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
+		if (this.activeMetrics.has(name)) this.logger?.warn(`Performance metric '${name}' already started. Overwriting.`);
 		this.activeMetrics.set(name, {
 			name,
 			startTime: this.getTime(),
@@ -494,14 +493,14 @@ var PerformanceMonitor = class {
 		if (!this.enabled) return;
 		const metric = this.activeMetrics.get(name);
 		if (!metric) {
-			this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
+			this.logger?.warn(`Performance metric '${name}' not found. Was start() called?`);
 			return;
 		}
 		metric.endTime = this.getTime();
 		metric.duration = metric.endTime - metric.startTime;
 		this.completedMetrics.push(metric);
 		this.activeMetrics.delete(name);
-		this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
+		this.logger?.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
 		return metric;
 	}
 	/**
@@ -581,11 +580,12 @@ var PerformanceMonitor = class {
 	* Log performance summary to console
 	*/
 	logSummary() {
-		if (!this.enabled || this.completedMetrics.length === 0 || !this.context) return;
+		if (!this.enabled || this.completedMetrics.length === 0 || !this.logger) return;
+		const logger = this.logger;
 		const summary = this.getSummary();
-		this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
+		logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
 		summary.breakdown.sort((a, b) => b.duration - a.duration).forEach((item) => {
-			this.context.logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
+			logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
 		});
 	}
 	/**
@@ -609,8 +609,7 @@ var PerformanceMonitor = class {
 		return Array.from(this.activeMetrics.keys());
 	}
 };
-//#endregion
-//#region src/css/layout/bounds.ts
+// src/css/layout/bounds.ts
 var Bounds = class Bounds {
 	left;
 	top;
@@ -646,8 +645,7 @@ const parseDocumentSize = (document) => {
 	if (!body || !documentElement) throw new Error(`Unable to get document size`);
 	return new Bounds(0, 0, Math.max(Math.max(body.scrollWidth, documentElement.scrollWidth), Math.max(body.offsetWidth, documentElement.offsetWidth), Math.max(body.clientWidth, documentElement.clientWidth)), Math.max(Math.max(body.scrollHeight, documentElement.scrollHeight), Math.max(body.offsetHeight, documentElement.offsetHeight), Math.max(body.clientHeight, documentElement.clientHeight)));
 };
-//#endregion
-//#region src/core/util.ts
+// src/core/util.ts
 /**
 * Indexed access where the shape/arity is guaranteed by construction (the CSS
 * grammar or a preceding length check). Throws on the impossible case instead
@@ -725,8 +723,7 @@ const stringToNumber = (codePoints) => {
 	const exp = exponent.length ? parseInt(String.fromCodePoint(...exponent), 10) : 0;
 	return sign * (int + frac * Math.pow(10, -fracd)) * Math.pow(10, expsign * exp);
 };
-//#endregion
-//#region src/css/syntax/token-singletons.ts
+// src/css/syntax/token-singletons.ts
 const LEFT_PARENTHESIS_TOKEN = { type: 2 };
 const RIGHT_PARENTHESIS_TOKEN = { type: 3 };
 const COMMA_TOKEN = { type: 4 };
@@ -748,8 +745,7 @@ const LEFT_SQUARE_BRACKET_TOKEN = { type: 28 };
 const RIGHT_SQUARE_BRACKET_TOKEN = { type: 29 };
 const WHITESPACE_TOKEN = { type: 31 };
 const EOF_TOKEN = { type: 32 };
-//#endregion
-//#region src/css/syntax/tokenizer.ts
+// src/css/syntax/tokenizer.ts
 var Tokenizer = class Tokenizer {
 	static _pool = [];
 	static MAX_POOL_SIZE = 40;
@@ -1205,8 +1201,7 @@ var Tokenizer = class Tokenizer {
 		}
 	}
 };
-//#endregion
-//#region src/css/syntax/parser.ts
+// src/css/syntax/parser.ts
 var Parser = class Parser {
 	_tokens;
 	constructor(tokens) {
@@ -1315,8 +1310,7 @@ const isEndingTokenFor = (token, type) => {
 	if (type === 28 && token.type === 29) return true;
 	return type === 2 && token.type === 3;
 };
-//#endregion
-//#region src/css/types/safe-eval.ts
+// src/css/types/safe-eval.ts
 /**
 * Safe arithmetic expression evaluator — replaces `new Function()`.
 *
@@ -1374,8 +1368,7 @@ const safeEvalArithmetic = (expr) => {
 	}
 	return stack.length === 1 ? stack[0] ?? NaN : NaN;
 };
-//#endregion
-//#region src/css/types/color-math.ts
+// src/css/types/color-math.ts
 /**
 * Color mathematics utilities
 * Extracted to break circular dependency between srgb.ts and color-utilities.ts
@@ -1396,8 +1389,7 @@ const multiplyMatrices = (A, B) => {
 		A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
 	];
 };
-//#endregion
-//#region src/css/types/color-spaces/srgb.ts
+// src/css/types/color-spaces/srgb.ts
 /**
 * SRGB related functions
 */
@@ -1506,11 +1498,9 @@ const srgbLinearFromXYZ = (args) => {
 		args[3]
 	];
 };
-//#endregion
-//#region src/css/types/length.ts
+// src/css/types/length.ts
 const isLength = (token) => token.type === 17 || token.type === 15;
-//#endregion
-//#region src/css/types/length-percentage.ts
+// src/css/types/length-percentage.ts
 const isLengthPercentage = (token) => token.type === 16 || isLength(token) || isCalcWithPercentage(token);
 /**
 * Check if a token is a CalcWithPercentage deferred token.
@@ -1634,8 +1624,7 @@ const getAbsoluteValue = (token, parent) => {
 	}
 	return token.number;
 };
-//#endregion
-//#region src/css/types/angle.ts
+// src/css/types/angle.ts
 const DEG = "deg";
 const GRAD = "grad";
 const RAD = "rad";
@@ -1688,8 +1677,7 @@ const parseNamedSide = (tokens) => {
 	return 0;
 };
 const deg = (deg) => Math.PI * deg / 180;
-//#endregion
-//#region src/css/types/color-utilities.ts
+// src/css/types/color-utilities.ts
 const isTransparent = (color) => (255 & color) === 0;
 const asString = (color) => {
 	const alpha = 255 & color;
@@ -2144,8 +2132,7 @@ const convertXyz50 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/p3.ts
+// src/css/types/color-spaces/p3.ts
 /**
 * Display-P3 related functions
 */
@@ -2263,8 +2250,7 @@ const convertP3 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/a98.ts
+// src/css/types/color-spaces/a98.ts
 /**
 * A98-RGB related functions
 */
@@ -2370,8 +2356,7 @@ const convertA98rgb = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/pro-photo.ts
+// src/css/types/color-spaces/pro-photo.ts
 /**
 * Pro Photo related functions
 */
@@ -2496,8 +2481,7 @@ const convertProPhoto = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/rec2020.ts
+// src/css/types/color-spaces/rec2020.ts
 /**
 * REC2020 related functions
 */
@@ -2618,8 +2602,7 @@ const convertRec2020 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/functions/color-mix.ts
+// src/css/types/functions/color-mix.ts
 const HUE_DEG_INDEX = {
 	lch: 2,
 	oklch: 2,
@@ -3005,8 +2988,7 @@ const colorMix = (context, args) => {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/types/color.ts
+// src/css/types/color.ts
 const color$1 = {
 	name: "color",
 	parse: (context, value) => {
@@ -3410,8 +3392,7 @@ const COLORS = {
 	YELLOW: 4294902015,
 	YELLOWGREEN: 2597139199
 };
-//#endregion
-//#region src/dom/node-type-guards.ts
+// src/dom/node-type-guards.ts
 /**
 * DOM Node Type Guards
 *
@@ -3467,8 +3448,7 @@ const VOID_OR_REPLACED_TAGS = /* @__PURE__ */ new Set([
 * SVG elements also do not support pseudo-elements.
 */
 const canHavePseudoElements = (element) => !isSVGElementNode(element) && !VOID_OR_REPLACED_TAGS.has(element.tagName);
-//#endregion
-//#region src/css/property-descriptors/list-style-type.ts
+// src/css/property-descriptors/list-style-type.ts
 const listStyleType = {
 	name: "list-style-type",
 	initialValue: "none",
@@ -3533,11 +3513,9 @@ const listStyleType = {
 		}
 	}
 };
-//#endregion
-//#region src/core/bitwise.ts
+// src/core/bitwise.ts
 const contains = (bit, value) => (bit & value) !== 0;
-//#endregion
-//#region src/css/types/functions/counter.ts
+// src/css/types/functions/counter.ts
 var CounterState = class {
 	counters = {};
 	getCounterValue(name) {
@@ -3953,8 +3931,7 @@ const createCounterText = (value, type, appendSuffix) => {
 		default: return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/display.ts
+// src/css/property-descriptors/display.ts
 const display = {
 	name: "display",
 	initialValue: "inline-block",
@@ -4003,8 +3980,7 @@ const parseDisplayValue$1 = (display) => {
 	}
 	return 0;
 };
-//#endregion
-//#region src/css/property-descriptors/float.ts
+// src/css/property-descriptors/float.ts
 const float = {
 	name: "float",
 	initialValue: "none",
@@ -4020,8 +3996,7 @@ const float = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/overflow.ts
+// src/css/property-descriptors/overflow.ts
 const overflow = {
 	name: "overflow",
 	initialValue: "visible",
@@ -4039,8 +4014,7 @@ const overflow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-color.ts
+// src/css/property-descriptors/text-decoration-color.ts
 const textDecorationColor = {
 	name: `text-decoration-color`,
 	initialValue: "transparent",
@@ -4048,8 +4022,7 @@ const textDecorationColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-line.ts
+// src/css/property-descriptors/text-decoration-line.ts
 const textDecorationLine = {
 	name: "text-decoration-line",
 	initialValue: "none",
@@ -4067,8 +4040,7 @@ const textDecorationLine = {
 		}).filter((line) => line !== 0);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/content.ts
+// src/css/property-descriptors/content.ts
 const content = {
 	name: "content",
 	initialValue: "none",
@@ -4081,8 +4053,7 @@ const content = {
 		return tokens;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/quotes.ts
+// src/css/property-descriptors/quotes.ts
 const quotes = {
 	name: "quotes",
 	initialValue: "none",
@@ -4112,8 +4083,7 @@ const getQuote = (quotes, depth, open) => {
 	if (!quote) return "";
 	return open ? quote.open : quote.close;
 };
-//#endregion
-//#region src/css/property-descriptors/counter-increment.ts
+// src/css/property-descriptors/counter-increment.ts
 /** Shared counter-ID parsing: returns next number or a fallback default. */
 const parseCounterValue = (tokens, defaultNumber) => {
 	const entries = [];
@@ -4143,8 +4113,7 @@ const counterIncrement = {
 		}));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/counter-reset.ts
+// src/css/property-descriptors/counter-reset.ts
 const counterReset = {
 	name: "counter-reset",
 	initialValue: "none",
@@ -4158,8 +4127,7 @@ const counterReset = {
 		}));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-clip.ts
+// src/css/property-descriptors/background-clip.ts
 const backgroundClip = {
 	name: "background-clip",
 	initialValue: "border-box",
@@ -4176,8 +4144,7 @@ const backgroundClip = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-color.ts
+// src/css/property-descriptors/background-color.ts
 const backgroundColor = {
 	name: `background-color`,
 	initialValue: "transparent",
@@ -4185,8 +4152,7 @@ const backgroundColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/types/functions/gradient.ts
+// src/css/types/functions/gradient.ts
 const parseColorStop = (context, args) => {
 	const color = color$1.parse(context, at(args, 0));
 	const stop = args[1];
@@ -4322,8 +4288,7 @@ const calculateRadius = (gradient, x, y, width, height) => {
 	}
 	return [rx, ry];
 };
-//#endregion
-//#region src/css/types/functions/linear-gradient.ts
+// src/css/types/functions/linear-gradient.ts
 const linearGradient = (context, tokens) => {
 	let angle$2 = deg(180);
 	const stops = [];
@@ -4347,8 +4312,7 @@ const linearGradient = (context, tokens) => {
 		type: 1
 	};
 };
-//#endregion
-//#region src/css/types/functions/-prefix-linear-gradient.ts
+// src/css/types/functions/-prefix-linear-gradient.ts
 const prefixLinearGradient = (context, tokens) => {
 	let angle$1 = deg(180);
 	const stops = [];
@@ -4377,8 +4341,7 @@ const prefixLinearGradient = (context, tokens) => {
 		type: 1
 	};
 };
-//#endregion
-//#region src/css/types/functions/-webkit-gradient.ts
+// src/css/types/functions/-webkit-gradient.ts
 const webkitGradient = (context, tokens) => {
 	const angle = deg(180);
 	const stops = [];
@@ -4440,8 +4403,7 @@ const webkitGradient = (context, tokens) => {
 		type
 	};
 };
-//#endregion
-//#region src/css/types/functions/radial-gradient.ts
+// src/css/types/functions/radial-gradient.ts
 const CLOSEST_SIDE = "closest-side";
 const FARTHEST_SIDE = "farthest-side";
 const CLOSEST_CORNER = "closest-corner";
@@ -4521,8 +4483,7 @@ const radialGradient = (context, tokens) => {
 		type: 2
 	};
 };
-//#endregion
-//#region src/css/types/functions/-prefix-radial-gradient.ts
+// src/css/types/functions/-prefix-radial-gradient.ts
 const prefixRadialGradient = (context, tokens) => {
 	let shape = 1;
 	let size = 3;
@@ -4593,16 +4554,14 @@ const prefixRadialGradient = (context, tokens) => {
 		type: 2
 	};
 };
-//#endregion
-//#region src/css/types/functions/repeating-linear-gradient.ts
+// src/css/types/functions/repeating-linear-gradient.ts
 const repeatingLinearGradient = (context, tokens) => {
 	return {
 		...linearGradient(context, tokens),
 		type: 3
 	};
 };
-//#endregion
-//#region src/css/types/functions/repeating-radial-gradient.ts
+// src/css/types/functions/repeating-radial-gradient.ts
 /**
 * repeating-radial-gradient shares the radial-gradient grammar exactly; only
 * the image type differs, which switches the renderer to periodic stops.
@@ -4613,8 +4572,7 @@ const repeatingRadialGradient = (context, tokens) => {
 		type: 4
 	};
 };
-//#endregion
-//#region src/css/types/functions/conic-gradient.ts
+// src/css/types/functions/conic-gradient.ts
 /**
 * conic-gradient( [ from <angle> ]? [ at <position> ]?, <color-stop-list> )
 *
@@ -4684,8 +4642,7 @@ const repeatingConicGradient = (context, tokens) => {
 		type: 6
 	};
 };
-//#endregion
-//#region src/css/types/functions/image-set.ts
+// src/css/types/functions/image-set.ts
 const parseResolution = (token) => {
 	if (!token) return 1;
 	if (isDimensionToken(token)) {
@@ -4719,8 +4676,7 @@ const imageSet = (context, tokens) => {
 	const chosen = at(satisfying.length > 0 ? satisfying : candidates.slice().sort((a, b) => b.resolution - a.resolution), 0);
 	return image.parse(context, chosen.imageToken);
 };
-//#endregion
-//#region src/css/types/image.ts
+// src/css/types/image.ts
 const isLinearGradient = (background) => {
 	return background.type === 1;
 };
@@ -4790,8 +4746,7 @@ const SUPPORTED_IMAGE_FUNCTIONS = {
 	"image-set": imageSet,
 	"-webkit-image-set": imageSet
 };
-//#endregion
-//#region src/css/property-descriptors/background-image.ts
+// src/css/property-descriptors/background-image.ts
 const backgroundImage = {
 	name: "background-image",
 	initialValue: "none",
@@ -4805,8 +4760,7 @@ const backgroundImage = {
 		return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map((value) => image.parse(context, value));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-origin.ts
+// src/css/property-descriptors/background-origin.ts
 const backgroundOrigin = {
 	name: "background-origin",
 	initialValue: "border-box",
@@ -4822,8 +4776,7 @@ const backgroundOrigin = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-position.ts
+// src/css/property-descriptors/background-position.ts
 const backgroundPosition = {
 	name: "background-position",
 	initialValue: "0% 0%",
@@ -4835,8 +4788,7 @@ const backgroundPosition = {
 		}).map(parseLengthPercentageTuple);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-repeat.ts
+// src/css/property-descriptors/background-repeat.ts
 const backgroundRepeat = {
 	name: "background-repeat",
 	initialValue: "repeat",
@@ -4856,8 +4808,7 @@ const parseBackgroundRepeat = (value) => {
 		default: return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-size.ts
+// src/css/property-descriptors/background-size.ts
 const backgroundSize = {
 	name: "background-size",
 	initialValue: "0",
@@ -4868,8 +4819,7 @@ const backgroundSize = {
 	}
 };
 const isBackgroundSizeInfoToken = (value) => isIdentToken(value) || isLengthPercentage(value);
-//#endregion
-//#region src/css/property-descriptors/border-color.ts
+// src/css/property-descriptors/border-color.ts
 const borderColorForSide = (side) => ({
 	name: `border-${side}-color`,
 	initialValue: "transparent",
@@ -4881,8 +4831,7 @@ const borderTopColor = borderColorForSide("top");
 const borderRightColor = borderColorForSide("right");
 const borderBottomColor = borderColorForSide("bottom");
 const borderLeftColor = borderColorForSide("left");
-//#endregion
-//#region src/css/property-descriptors/border-radius.ts
+// src/css/property-descriptors/border-radius.ts
 const borderRadiusForSide = (side) => ({
 	name: `border-${side}-radius`,
 	initialValue: "0 0",
@@ -4894,8 +4843,7 @@ const borderTopLeftRadius = borderRadiusForSide("top-left");
 const borderTopRightRadius = borderRadiusForSide("top-right");
 const borderBottomRightRadius = borderRadiusForSide("bottom-right");
 const borderBottomLeftRadius = borderRadiusForSide("bottom-left");
-//#endregion
-//#region src/css/property-descriptors/border-style.ts
+// src/css/property-descriptors/border-style.ts
 const borderStyleForSide = (side) => ({
 	name: `border-${side}-style`,
 	initialValue: "solid",
@@ -4915,8 +4863,7 @@ const borderTopStyle = borderStyleForSide("top");
 const borderRightStyle = borderStyleForSide("right");
 const borderBottomStyle = borderStyleForSide("bottom");
 const borderLeftStyle = borderStyleForSide("left");
-//#endregion
-//#region src/css/property-descriptors/border-width.ts
+// src/css/property-descriptors/border-width.ts
 const borderWidthForSide = (side) => ({
 	name: `border-${side}-width`,
 	initialValue: "0",
@@ -4931,8 +4878,7 @@ const borderTopWidth = borderWidthForSide("top");
 const borderRightWidth = borderWidthForSide("right");
 const borderBottomWidth = borderWidthForSide("bottom");
 const borderLeftWidth = borderWidthForSide("left");
-//#endregion
-//#region src/css/property-descriptors/clip-path.ts
+// src/css/property-descriptors/clip-path.ts
 const NONE = { type: 0 };
 /**
 * Parse a shape-radius token: <length-percentage> | closest-side | farthest-side.
@@ -5153,8 +5099,7 @@ const clipPath = {
 		return NONE;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/color.ts
+// src/css/property-descriptors/color.ts
 const color = {
 	name: `color`,
 	initialValue: "transparent",
@@ -5162,8 +5107,7 @@ const color = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/direction.ts
+// src/css/property-descriptors/direction.ts
 const direction = {
 	name: "direction",
 	initialValue: "ltr",
@@ -5176,8 +5120,7 @@ const direction = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-family.ts
+// src/css/property-descriptors/font-family.ts
 const fontFamily = {
 	name: `font-family`,
 	initialValue: "",
@@ -5214,8 +5157,7 @@ const fontFamily = {
 		return results.map((result, index) => quoted[index] || result.indexOf(" ") !== -1 ? `'${result.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ")}'` : result);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-size.ts
+// src/css/property-descriptors/font-size.ts
 const fontSize = {
 	name: `font-size`,
 	initialValue: "0",
@@ -5223,8 +5165,7 @@ const fontSize = {
 	type: 3,
 	format: "length"
 };
-//#endregion
-//#region src/css/property-descriptors/letter-spacing.ts
+// src/css/property-descriptors/letter-spacing.ts
 const letterSpacing = {
 	name: "letter-spacing",
 	initialValue: "0",
@@ -5237,8 +5178,7 @@ const letterSpacing = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/line-break.ts
+// src/css/property-descriptors/line-break.ts
 const lineBreak = {
 	name: "line-break",
 	initialValue: "normal",
@@ -5251,8 +5191,7 @@ const lineBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/line-height.ts
+// src/css/property-descriptors/line-height.ts
 const lineHeight = {
 	name: "line-height",
 	initialValue: "normal",
@@ -5265,8 +5204,7 @@ const computeLineHeight = (token, fontSize) => {
 	else if (isLengthPercentage(token)) return getAbsoluteValue(token, fontSize);
 	return fontSize;
 };
-//#endregion
-//#region src/css/property-descriptors/list-style-image.ts
+// src/css/property-descriptors/list-style-image.ts
 const listStyleImage = {
 	name: "list-style-image",
 	initialValue: "none",
@@ -5279,8 +5217,7 @@ const listStyleImage = {
 		return image.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/list-style-position.ts
+// src/css/property-descriptors/list-style-position.ts
 const listStylePosition = {
 	name: "list-style-position",
 	initialValue: "outside",
@@ -5293,8 +5230,7 @@ const listStylePosition = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/margin.ts
+// src/css/property-descriptors/margin.ts
 const marginForSide = (side) => ({
 	name: `margin-${side}`,
 	initialValue: "0",
@@ -5305,8 +5241,7 @@ const marginTop = marginForSide("top");
 const marginRight = marginForSide("right");
 const marginBottom = marginForSide("bottom");
 const marginLeft = marginForSide("left");
-//#endregion
-//#region src/css/property-descriptors/overflow-wrap.ts
+// src/css/property-descriptors/overflow-wrap.ts
 const overflowWrap = {
 	name: "overflow-wrap",
 	initialValue: "normal",
@@ -5319,8 +5254,7 @@ const overflowWrap = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/padding.ts
+// src/css/property-descriptors/padding.ts
 const paddingForSide = (side) => ({
 	name: `padding-${side}`,
 	initialValue: "0",
@@ -5332,8 +5266,7 @@ const paddingTop = paddingForSide("top");
 const paddingRight = paddingForSide("right");
 const paddingBottom = paddingForSide("bottom");
 const paddingLeft = paddingForSide("left");
-//#endregion
-//#region src/css/property-descriptors/text-align.ts
+// src/css/property-descriptors/text-align.ts
 const textAlign = {
 	name: "text-align",
 	initialValue: "left",
@@ -5348,8 +5281,7 @@ const textAlign = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/position.ts
+// src/css/property-descriptors/position.ts
 const position = {
 	name: "position",
 	initialValue: "static",
@@ -5365,8 +5297,7 @@ const position = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-shadow.ts
+// src/css/property-descriptors/text-shadow.ts
 const textShadow = {
 	name: "text-shadow",
 	initialValue: "none",
@@ -5396,8 +5327,7 @@ const textShadow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-transform.ts
+// src/css/property-descriptors/text-transform.ts
 const textTransform = {
 	name: "text-transform",
 	initialValue: "none",
@@ -5412,8 +5342,7 @@ const textTransform = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/transform.ts
+// src/css/property-descriptors/transform.ts
 const transform$1 = {
 	name: "transform",
 	initialValue: "none",
@@ -5468,8 +5397,7 @@ const SUPPORTED_TRANSFORM_FUNCTIONS = {
 	matrix3d,
 	rotate: rotate$1
 };
-//#endregion
-//#region src/css/property-descriptors/transform-origin.ts
+// src/css/property-descriptors/transform-origin.ts
 const DEFAULT_VALUE = {
 	type: 16,
 	number: 50,
@@ -5487,8 +5415,7 @@ const transformOrigin = {
 		return [at(origins, 0), at(origins, 1)];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/rotate.ts
+// src/css/property-descriptors/rotate.ts
 const rotate = {
 	name: "rotate",
 	initialValue: "none",
@@ -5503,8 +5430,7 @@ const rotate = {
 		return null;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/visibility.ts
+// src/css/property-descriptors/visibility.ts
 const visibility = {
 	name: "visibility",
 	initialValue: "none",
@@ -5518,8 +5444,7 @@ const visibility = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/word-break.ts
+// src/css/property-descriptors/word-break.ts
 const wordBreak = {
 	name: "word-break",
 	initialValue: "normal",
@@ -5533,8 +5458,7 @@ const wordBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/white-space.ts
+// src/css/property-descriptors/white-space.ts
 const whiteSpace = {
 	name: "white-space",
 	initialValue: "normal",
@@ -5550,8 +5474,7 @@ const whiteSpace = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/writing-mode.ts
+// src/css/property-descriptors/writing-mode.ts
 const isVerticalWritingMode = (writingMode) => writingMode !== 0;
 const isSidewaysWritingMode = (writingMode) => writingMode === 3 || writingMode === 4;
 const writingMode = {
@@ -5569,8 +5492,7 @@ const writingMode = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/z-index.ts
+// src/css/property-descriptors/z-index.ts
 const zIndex = {
 	name: "z-index",
 	initialValue: "auto",
@@ -5588,8 +5510,7 @@ const zIndex = {
 		throw new Error(`Invalid z-index number parsed`);
 	}
 };
-//#endregion
-//#region src/css/types/time.ts
+// src/css/types/time.ts
 const time = {
 	name: "time",
 	parse: (_context, value) => {
@@ -5600,8 +5521,7 @@ const time = {
 		throw new Error(`Unsupported time type`);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/opacity.ts
+// src/css/property-descriptors/opacity.ts
 const opacity = {
 	name: "opacity",
 	initialValue: "1",
@@ -5612,8 +5532,7 @@ const opacity = {
 		return 1;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-style.ts
+// src/css/property-descriptors/text-decoration-style.ts
 const textDecorationStyle = {
 	name: "text-decoration-style",
 	initialValue: "solid",
@@ -5629,8 +5548,7 @@ const textDecorationStyle = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-thickness.ts
+// src/css/property-descriptors/text-decoration-thickness.ts
 const textDecorationThickness = {
 	name: "text-decoration-thickness",
 	initialValue: "auto",
@@ -5645,8 +5563,7 @@ const textDecorationThickness = {
 		return "auto";
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-underline-offset.ts
+// src/css/property-descriptors/text-underline-offset.ts
 const textUnderlineOffset = {
 	name: "text-underline-offset",
 	initialValue: "auto",
@@ -5660,8 +5577,7 @@ const textUnderlineOffset = {
 		return "auto";
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-weight.ts
+// src/css/property-descriptors/font-weight.ts
 const fontWeight = {
 	name: "font-weight",
 	initialValue: "normal",
@@ -5676,8 +5592,7 @@ const fontWeight = {
 		return 400;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-variant.ts
+// src/css/property-descriptors/font-variant.ts
 const fontVariant = {
 	name: "font-variant",
 	initialValue: "none",
@@ -5687,8 +5602,7 @@ const fontVariant = {
 		return tokens.filter(isIdentToken).map((token) => token.value);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-style.ts
+// src/css/property-descriptors/font-style.ts
 const fontStyle = {
 	name: "font-style",
 	initialValue: "normal",
@@ -5702,8 +5616,7 @@ const fontStyle = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/duration.ts
+// src/css/property-descriptors/duration.ts
 const duration = {
 	name: "duration",
 	initialValue: "0s",
@@ -5713,8 +5626,7 @@ const duration = {
 		return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/box-shadow.ts
+// src/css/property-descriptors/box-shadow.ts
 const boxShadow = {
 	name: "box-shadow",
 	initialValue: "none",
@@ -5748,8 +5660,7 @@ const boxShadow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/paint-order.ts
+// src/css/property-descriptors/paint-order.ts
 const paintOrder = {
 	name: "paint-order",
 	initialValue: "normal",
@@ -5779,8 +5690,7 @@ const paintOrder = {
 		return layers;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-stroke-color.ts
+// src/css/property-descriptors/webkit-text-stroke-color.ts
 const webkitTextStrokeColor = {
 	name: `-webkit-text-stroke-color`,
 	initialValue: "currentcolor",
@@ -5788,8 +5698,7 @@ const webkitTextStrokeColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-stroke-width.ts
+// src/css/property-descriptors/webkit-text-stroke-width.ts
 const webkitTextStrokeWidth = {
 	name: `-webkit-text-stroke-width`,
 	initialValue: "0",
@@ -5800,8 +5709,7 @@ const webkitTextStrokeWidth = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-line-clamp.ts
+// src/css/property-descriptors/webkit-line-clamp.ts
 /**
 * -webkit-line-clamp property descriptor
 * Used with display: -webkit-box and -webkit-box-orient: vertical
@@ -5818,8 +5726,7 @@ const webkitLineClamp = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/object-fit.ts
+// src/css/property-descriptors/object-fit.ts
 const objectFit = {
 	name: "object-fit",
 	initialValue: "fill",
@@ -5840,8 +5747,7 @@ const parseDisplayValue = (display) => {
 	}
 	return 0;
 };
-//#endregion
-//#region src/css/property-descriptors/text-overflow.ts
+// src/css/property-descriptors/text-overflow.ts
 const textOverflow = {
 	name: "text-overflow",
 	initialValue: "clip",
@@ -5854,8 +5760,7 @@ const textOverflow = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/image-rendering.ts
+// src/css/property-descriptors/image-rendering.ts
 const imageRendering = {
 	name: "image-rendering",
 	initialValue: "auto",
@@ -5874,8 +5779,7 @@ const imageRendering = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/mix-blend-mode.ts
+// src/css/property-descriptors/mix-blend-mode.ts
 const MIX_BLEND_MODE$1 = {
 	NORMAL: "normal",
 	MULTIPLY: "multiply",
@@ -5904,8 +5808,7 @@ const mixBlendMode = {
 		return VALID_VALUES$1.has(token) ? token : MIX_BLEND_MODE$1.NORMAL;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/filter.ts
+// src/css/property-descriptors/filter.ts
 const filter = {
 	name: "filter",
 	initialValue: "none",
@@ -5975,8 +5878,7 @@ const renderFilterArgs = (values) => {
 	}
 	return parts.join("").trim();
 };
-//#endregion
-//#region src/css/property-descriptors/font-variant-ligatures.ts
+// src/css/property-descriptors/font-variant-ligatures.ts
 const fontVariantLigatures = {
 	name: "font-variant-ligatures",
 	initialValue: "normal",
@@ -5997,8 +5899,7 @@ const fontVariantLigatures = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/zoom.ts
+// src/css/property-descriptors/zoom.ts
 const zoom = {
 	name: "zoom",
 	initialValue: "1",
@@ -6010,8 +5911,7 @@ const zoom = {
 		return 1;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/object-position.ts
+// src/css/property-descriptors/object-position.ts
 const objectPosition = {
 	name: "object-position",
 	initialValue: "50% 50%",
@@ -6073,8 +5973,7 @@ const backgroundBlendMode = {
 		return modes.length > 0 ? modes : ["normal"];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-source.ts
+// src/css/property-descriptors/border-image-source.ts
 const borderImageSource = {
 	name: "border-image-source",
 	initialValue: "none",
@@ -6088,8 +5987,7 @@ const borderImageSource = {
 		return image.parse(context, at(filtered, 0));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-slice.ts
+// src/css/property-descriptors/border-image-slice.ts
 const fillSides$1 = (sides) => {
 	const result = [...sides];
 	if (result.length === 1) {
@@ -6138,8 +6036,7 @@ const borderImageSlice = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-repeat.ts
+// src/css/property-descriptors/border-image-repeat.ts
 const parseRepeatValue = (value) => {
 	switch (value) {
 		case "repeat": return 1;
@@ -6164,8 +6061,7 @@ const borderImageRepeat = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/box-decoration-break.ts
+// src/css/property-descriptors/box-decoration-break.ts
 const boxDecorationBreak = {
 	name: "box-decoration-break",
 	initialValue: "slice",
@@ -6178,8 +6074,7 @@ const boxDecorationBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/accent-color.ts
+// src/css/property-descriptors/accent-color.ts
 const accentColor = {
 	name: "accent-color",
 	initialValue: "auto",
@@ -6190,8 +6085,7 @@ const accentColor = {
 		return color$1.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-fill-color.ts
+// src/css/property-descriptors/webkit-text-fill-color.ts
 const webkitTextFillColor = {
 	name: "-webkit-text-fill-color",
 	initialValue: "currentcolor",
@@ -6202,8 +6096,7 @@ const webkitTextFillColor = {
 		return color$1.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/isolation.ts
+// src/css/property-descriptors/isolation.ts
 const isolation = {
 	name: "isolation",
 	initialValue: "auto",
@@ -6213,8 +6106,52 @@ const isolation = {
 		return value === "isolate" ? 1 : 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/outline.ts
+// src/css/property-descriptors/will-change.ts
+const STACKING_HINTS = /* @__PURE__ */ new Set([
+	"transform",
+	"translate",
+	"rotate",
+	"scale",
+	"opacity",
+	"filter",
+	"backdrop-filter",
+	"mix-blend-mode",
+	"isolation",
+	"clip-path",
+	"mask",
+	"mask-image",
+	"mask-border",
+	"perspective",
+	"contain",
+	"offset-path",
+	"offset-distance",
+	"offset-rotate",
+	"top",
+	"left",
+	"bottom",
+	"right",
+	"z-index"
+]);
+const willChange = {
+	name: "will-change",
+	initialValue: "auto",
+	prefix: false,
+	type: 1,
+	parse: (_context, tokens) => {
+		return tokens.some((token) => isIdentToken(token) && STACKING_HINTS.has(token.value)) ? 1 : 0;
+	}
+};
+// src/css/property-descriptors/contain.ts
+const contain = {
+	name: "contain",
+	initialValue: "none",
+	prefix: false,
+	type: 2,
+	parse: (_context, value) => {
+		return /\b(paint|strict|content)\b/.test(value) ? 1 : 0;
+	}
+};
+// src/css/property-descriptors/outline.ts
 const outlineStyle = {
 	name: "outline-style",
 	initialValue: "none",
@@ -6257,8 +6194,7 @@ const outlineOffset = {
 		return isDimensionToken(token) || isNumberToken(token) ? token.number : 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/backdrop-filter.ts
+// src/css/property-descriptors/backdrop-filter.ts
 const backdropFilter = {
 	name: "backdrop-filter",
 	initialValue: "none",
@@ -6266,8 +6202,7 @@ const backdropFilter = {
 	type: 1,
 	parse: (context, tokens) => filter.parse(context, tokens)
 };
-//#endregion
-//#region src/css/property-descriptors/mask.ts
+// src/css/property-descriptors/mask.ts
 const maskImage = {
 	name: "mask-image",
 	initialValue: "none",
@@ -6297,8 +6232,7 @@ const maskSize = {
 	type: 1,
 	parse: backgroundSize.parse
 };
-//#endregion
-//#region src/css/property-descriptors/text-emphasis.ts
+// src/css/property-descriptors/text-emphasis.ts
 const SHAPES = [
 	"dot",
 	"circle",
@@ -6373,8 +6307,7 @@ const textEmphasisPosition = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-width.ts
+// src/css/property-descriptors/border-image-width.ts
 const fillSides = (sides) => {
 	const result = [...sides];
 	if (result.length === 1) {
@@ -6471,8 +6404,7 @@ const borderImageOutset = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-box-reflect.ts
+// src/css/property-descriptors/webkit-box-reflect.ts
 /**
 * -webkit-box-reflect: <direction> <offset>? <mask-image>?
 *
@@ -6516,8 +6448,7 @@ const webkitBoxReflect = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/translate.ts
+// src/css/property-descriptors/translate.ts
 const translate = {
 	name: "translate",
 	initialValue: "none",
@@ -6530,8 +6461,7 @@ const translate = {
 		return [at(values, 0), values.length > 1 ? at(values, 1) : ZERO_LENGTH];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/scale.ts
+// src/css/property-descriptors/scale.ts
 const scale = {
 	name: "scale",
 	initialValue: "none",
@@ -6566,8 +6496,7 @@ const STYLESHEET_READY_TIMEOUT_MS = 1e4;
 * never fires, the mount is rejected instead of hanging forever.
 */
 const IFRAME_LOAD_WATCHDOG_MS = 6e4;
-//#endregion
-//#region src/css/parse.ts
+// src/css/parse.ts
 const STANDARD_PROPERTIES = [
 	[
 		"animationDuration",
@@ -7004,6 +6933,16 @@ const STANDARD_PROPERTIES = [
 		isolation,
 		"isolation"
 	],
+	[
+		"willChange",
+		willChange,
+		"will-change"
+	],
+	[
+		"contain",
+		contain,
+		"contain"
+	],
 	[
 		"outlineColor",
 		outlineColor,
@@ -7135,8 +7074,7 @@ const parse = (context, descriptor, style) => {
 	}
 	return result;
 };
-//#endregion
-//#region src/css/grouped/border-styles.ts
+// src/css/grouped/border-styles.ts
 /**
 * Read-only grouped accessor for border-related CSS properties.
 *
@@ -7213,8 +7151,7 @@ var BorderStyles = class {
 		return this.styles.boxShadow;
 	}
 };
-//#endregion
-//#region src/css/grouped/background-styles.ts
+// src/css/grouped/background-styles.ts
 /**
 * Read-only grouped accessor for background-related CSS properties.
 *
@@ -7252,8 +7189,7 @@ var BackgroundStyles = class {
 		return this.styles.backgroundBlendMode;
 	}
 };
-//#endregion
-//#region src/css/grouped/font-styles.ts
+// src/css/grouped/font-styles.ts
 /**
 * Read-only grouped accessor for font/text-related CSS properties.
 *
@@ -7348,8 +7284,7 @@ var FontStyles = class {
 		return this.styles.paintOrder;
 	}
 };
-//#endregion
-//#region src/css/grouped/layout-styles.ts
+// src/css/grouped/layout-styles.ts
 /**
 * Read-only grouped accessor for layout/display/positioning CSS properties.
 *
@@ -7477,8 +7412,7 @@ var LayoutStyles = class {
 		return this.styles.isInlineLevel();
 	}
 };
-//#endregion
-//#region src/css/index.ts
+// src/css/index.ts
 var CSSParsedDeclaration = class {
 	animationDuration;
 	backgroundClip;
@@ -7572,6 +7506,8 @@ var CSSParsedDeclaration = class {
 	accentColor;
 	webkitTextFillColor;
 	isolation;
+	willChange;
+	contain;
 	outlineColor;
 	outlineStyle;
 	outlineWidth;
@@ -7670,8 +7606,7 @@ var CSSParsedCounterDeclaration = class {
 		this.counterReset = parse(context, counterReset, declaration.counterReset);
 	}
 };
-//#endregion
-//#region src/core/debugger.ts
+// src/core/debugger.ts
 const elementDebuggerAttribute = "data-html2canvas-debug";
 const getElementDebugType = (element) => {
 	if (typeof element.getAttribute !== "function") return 0;
@@ -7687,8 +7622,7 @@ const isDebugging = (element, type) => {
 	const elementType = getElementDebugType(element);
 	return elementType === 1 || type === elementType;
 };
-//#endregion
-//#region src/dom/adopted-styles.ts
+// src/dom/adopted-styles.ts
 /**
 * Constructable stylesheet cloning (adoptedStyleSheets).
 *
@@ -7729,8 +7663,7 @@ const createAdoptedStylesElement = (styleDocument, sheets, nonce) => {
 	if (nonce) style.nonce = nonce;
 	return style;
 };
-//#endregion
-//#region src/dom/slot-cloner.ts
+// src/dom/slot-cloner.ts
 /** Exported for reuse in document-cloner.ts */
 const IGNORE_ATTRIBUTE = "data-html2canvas-ignore";
 /**
@@ -7867,8 +7800,7 @@ var SlotCloner = class {
 		if (style) target.appendChild(style);
 	}
 };
-//#endregion
-//#region src/dom/copy-css-styles.ts
+// src/dom/copy-css-styles.ts
 /**
 * Computed-style copying for cloned elements.
 *
@@ -7896,8 +7828,7 @@ const copyCSSStyles = (style, target) => {
 	if (parts.length > 0) target.style.cssText = parts.join(";") + ";";
 	return target;
 };
-//#endregion
-//#region src/dom/pseudo-content.ts
+// src/dom/pseudo-content.ts
 /**
 * Pseudo-element (::before / ::after) content resolution.
 *
@@ -7917,19 +7848,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);
 	}
 };
 /**
@@ -8003,8 +7934,7 @@ var PseudoContentResolver = class {
 		return anonymousReplacedElement;
 	}
 };
-//#endregion
-//#region src/core/abort-helper.ts
+// src/core/abort-helper.ts
 /**
 * AbortSignal helper utilities.
 */
@@ -8019,8 +7949,7 @@ var PseudoContentResolver = class {
 const throwIfAborted = (signal) => {
 	if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 };
-//#endregion
-//#region src/dom/iframe-mount.ts
+// src/dom/iframe-mount.ts
 const trustedTypePolicies = /* @__PURE__ */ new WeakMap();
 /**
 * Resolve the Trusted Types policy used for writing the clone document.
@@ -8049,9 +7978,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);
@@ -8184,6 +8124,11 @@ const stylesheetsReady = (documentClone, logger, signal, timeoutMs = STYLESHEET_
 		pending.push(new Promise((resolve) => {
 			let elapsed = 0;
 			const timer = setInterval(() => {
+				if (signal?.aborted) {
+					clearInterval(timer);
+					resolve();
+					return;
+				}
 				elapsed += 50;
 				const currentSheet = style.sheet;
 				if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= timeoutMs) {
@@ -8354,8 +8299,7 @@ const mountCloneInIFrame = (context, ownerDocument, windowSize, mount) => {
 		throw error;
 	});
 };
-//#endregion
-//#region src/dom/document-cloner.ts
+// src/dom/document-cloner.ts
 /**
 * Find the parent ShadowRoot of an element, if any
 * @param element - The element to check
@@ -8400,6 +8344,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
@@ -8419,6 +8364,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,
@@ -8554,7 +8509,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");
@@ -8588,8 +8542,7 @@ var DocumentCloner = class {
 		return false;
 	}
 };
-//#endregion
-//#region src/dom/dom-normalizer.ts
+// src/dom/dom-normalizer.ts
 /**
 * Normalize element styles for accurate rendering
 * This includes disabling animations and neutralizing transforms.
@@ -8677,8 +8630,115 @@ var DOMNormalizer = class {
 		if (originalStyles.scale !== void 0) element.style.scale = originalStyles.scale;
 	}
 };
-//#endregion
-//#region src/dom/element-container.ts
+// 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);
+		}
+	});
+}
+// src/dom/element-container.ts
 var ElementContainer = class {
 	context;
 	styles;
@@ -8691,6 +8751,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;
@@ -8715,6 +8780,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;
 	}
 	/**
@@ -8737,8 +8803,7 @@ var ElementContainer = class {
 		for (const child of this.elements) child.restoreTree();
 	}
 };
-//#endregion
-//#region src/core/features.ts
+// src/core/features.ts
 /**
 * Runtime feature detection.
 *
@@ -8824,8 +8889,7 @@ const FEATURES = {
 		return value;
 	}
 };
-//#endregion
-//#region src/css/layout/text.ts
+// src/css/layout/text.ts
 var TextBounds = class {
 	text;
 	bounds;
@@ -8900,8 +8964,7 @@ const breakText = (value, styles) => {
 	if (isVerticalWritingMode(styles.writingMode)) return segmentGraphemes(value);
 	return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value);
 };
-//#endregion
-//#region src/dom/text-container.ts
+// src/dom/text-container.ts
 var TextContainer = class {
 	text;
 	textBounds;
@@ -8924,8 +8987,7 @@ const capitalize = (m, p1, p2) => {
 	if (m.length > 0) return p1 + p2.toUpperCase();
 	return m;
 };
-//#endregion
-//#region src/dom/replaced-elements/image-element-container.ts
+// src/dom/replaced-elements/image-element-container.ts
 var ImageElementContainer = class extends ElementContainer {
 	src;
 	intrinsicWidth;
@@ -8938,8 +9000,7 @@ var ImageElementContainer = class extends ElementContainer {
 		this.context.cache.addImage(this.src);
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/canvas-element-container.ts
+// src/dom/replaced-elements/canvas-element-container.ts
 var CanvasElementContainer = class extends ElementContainer {
 	canvas;
 	intrinsicWidth;
@@ -8951,8 +9012,7 @@ var CanvasElementContainer = class extends ElementContainer {
 		this.intrinsicHeight = canvas.height;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/svg-element-container.ts
+// src/dom/replaced-elements/svg-element-container.ts
 const BOX_OFFSET_PROPERTIES = [
 	"position",
 	"inset",
@@ -9002,8 +9062,7 @@ var SVGElementContainer = class extends ElementContainer {
 		this.context.cache.addImage(this.svg);
 	}
 };
-//#endregion
-//#region src/dom/elements/li-element-container.ts
+// src/dom/elements/li-element-container.ts
 var LIElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9011,8 +9070,7 @@ var LIElementContainer = class extends ElementContainer {
 		this.value = element.value;
 	}
 };
-//#endregion
-//#region src/dom/elements/ol-element-container.ts
+// src/dom/elements/ol-element-container.ts
 var OLElementContainer = class extends ElementContainer {
 	start;
 	reversed;
@@ -9022,8 +9080,7 @@ var OLElementContainer = class extends ElementContainer {
 		this.reversed = typeof element.reversed === "boolean" && element.reversed === true;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/input-element-container.ts
+// src/dom/replaced-elements/input-element-container.ts
 const CHECKBOX_BORDER_RADIUS = [{
 	type: 15,
 	flags: 0,
@@ -9078,8 +9135,7 @@ var InputElementContainer = class extends ElementContainer {
 		}
 	}
 };
-//#endregion
-//#region src/dom/elements/select-element-container.ts
+// src/dom/elements/select-element-container.ts
 var SelectElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9088,8 +9144,7 @@ var SelectElementContainer = class extends ElementContainer {
 		this.value = option ? option.text || "" : "";
 	}
 };
-//#endregion
-//#region src/dom/elements/textarea-element-container.ts
+// src/dom/elements/textarea-element-container.ts
 var TextareaElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9097,8 +9152,7 @@ var TextareaElementContainer = class extends ElementContainer {
 		this.value = element.value;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/iframe-element-container.ts
+// src/dom/replaced-elements/iframe-element-container.ts
 var IFrameElementContainer = class extends ElementContainer {
 	src;
 	width;
@@ -9129,8 +9183,7 @@ var IFrameElementContainer = class extends ElementContainer {
 		}
 	}
 };
-//#endregion
-//#region src/dom/node-parser.ts
+// src/dom/node-parser.ts
 const LIST_OWNERS = [
 	"OL",
 	"UL",
@@ -9196,15 +9249,14 @@ const parseTree = (context, element, options = {}) => {
 	return container;
 };
 const createsRealStackingContext = (node, container, root) => {
-	return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
+	return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.willChange === 1 || container.styles.contain === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
 };
 const createsStackingContext = (styles) => {
 	if (styles.isPositioned() || styles.isFloating()) return true;
 	if (styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL) return true;
 	return contains(styles.display, 268435456) || contains(styles.display, 33554432) || contains(styles.display, 536870912) || contains(styles.display, 134217728);
 };
-//#endregion
-//#region src/render/path.ts
+// src/render/path.ts
 const equalPath = (a, b) => {
 	if (a.length === b.length) return a.some((v, i) => v === b[i]);
 	return false;
@@ -9220,8 +9272,7 @@ const transformPath = (path, deltaX, deltaY, deltaW, deltaH) => {
 		return point;
 	});
 };
-//#endregion
-//#region src/render/vector.ts
+// src/render/vector.ts
 var Vector = class Vector {
 	type;
 	x;
@@ -9235,8 +9286,7 @@ var Vector = class Vector {
 		return new Vector(this.x + deltaX, this.y + deltaY);
 	}
 };
-//#endregion
-//#region src/render/bezier-curve.ts
+// src/render/bezier-curve.ts
 const lerp = (a, b, t) => {
 	return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
 };
@@ -9270,8 +9320,7 @@ var BezierCurve = class BezierCurve {
 	}
 };
 const isBezierCurve = (path) => path.type === 1;
-//#endregion
-//#region src/render/bound-curves.ts
+// src/render/bound-curves.ts
 var BoundCurves = class {
 	topLeftBorderDoubleOuterBox;
 	topRightBorderDoubleOuterBox;
@@ -9395,8 +9444,7 @@ const calculatePaddingBoxPath = (curves) => {
 		curves.bottomLeftPaddingBox
 	];
 };
-//#endregion
-//#region src/render/effects.ts
+// src/render/effects.ts
 var TransformEffect = class {
 	offsetX;
 	offsetY;
@@ -9603,8 +9651,7 @@ const isOpacityEffect = (effect) => effect.type === 2;
 const isClipPathEffect = (effect) => effect.type === 3;
 const isBlendEffect = (effect) => effect.type === 4;
 const isFilterEffect = (effect) => effect.type === 5;
-//#endregion
-//#region src/render/stacking-context.ts
+// src/render/stacking-context.ts
 var StackingContext = class {
 	element;
 	negativeZIndex;
@@ -9927,8 +9974,7 @@ const parseStackingContexts = (container) => {
 	processListItems(paintContainer.container, listItems);
 	return root;
 };
-//#endregion
-//#region src/render/canvas/gradient-rasterizer.ts
+// src/render/canvas/gradient-rasterizer.ts
 const clampStop = (stop) => Math.min(1, Math.max(0, stop));
 /**
 * Stack the one-cycle stop list periodically across [0, 1]. Returns null for
@@ -10007,8 +10053,7 @@ const rasterizeRadialGradient = (ownerDocument, rx, ry, stops, repeating = false
 		ry
 	};
 };
-//#endregion
-//#region src/render/box-sizing.ts
+// src/render/box-sizing.ts
 const paddingBox = (element) => {
 	const bounds = element.bounds;
 	const styles = element.styles;
@@ -10023,8 +10068,7 @@ const contentBox = (element) => {
 	const paddingBottom = getAbsoluteValue(styles.paddingBottom, bounds.width);
 	return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom));
 };
-//#endregion
-//#region src/render/background.ts
+// src/render/background.ts
 const calculateBackgroundPositioningArea = (backgroundOrigin, element) => {
 	if (backgroundOrigin === 0) return element.bounds;
 	if (backgroundOrigin === 2) return contentBox(element);
@@ -10125,8 +10169,7 @@ const calculateBackgroundRepeatPath = (repeat, [x, y], [width, height], backgrou
 		];
 	}
 };
-//#endregion
-//#region src/render/canvas/filter-surface.ts
+// src/render/canvas/filter-surface.ts
 var FilterSurfaceError = class extends Error {};
 const releaseSurface = (canvas) => {
 	canvas.width = canvas.height = 0;
@@ -10230,6 +10273,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. */
@@ -10285,22 +10335,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");
@@ -10396,8 +10449,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;
@@ -10405,6 +10459,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");
@@ -10416,29 +10600,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,
@@ -10480,39 +10644,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;
@@ -10536,7 +10674,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);
@@ -10546,8 +10684,91 @@ function cropSurface(bounds, viewport, margin, scale) {
 	const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
 	return new Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
 }
-//#endregion
-//#region src/render/canvas/text/text-decoration-renderer.ts
+// src/render/matrix.ts
+/**
+* 2D affine matrix utilities for the composited-surface render path.
+*
+* Matrices use the canvas `transform(a, b, c, d, e, f)` column-vector
+* convention:
+*
+*     | a c e |       | x' |   | a·x + c·y + e |
+*     | b d f |  ×    | y' | = | b·x + d·y + f |
+*     | 0 0 1 |       |  1 |   |       1       |
+*
+* `TransformEffect` carries the same tuple order, so effects and bounds can
+* share these helpers. Composition follows the canvas post-multiply rule:
+* `multiplyMatrix(ancestor, own)` equals `ancestor` followed by `own`.
+*/
+const IDENTITY_MATRIX = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const isIdentityMatrix = (m) => m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+/**
+* Compose two transforms: the result applies `a` first, then `b`
+* (canvas post-multiply, matching successive `ctx.transform` calls).
+*/
+const multiplyMatrix = (a, b) => [
+	a[0] * b[0] + a[2] * b[1],
+	a[1] * b[0] + a[3] * b[1],
+	a[0] * b[2] + a[2] * b[3],
+	a[1] * b[2] + a[3] * b[3],
+	a[0] * b[4] + a[2] * b[5] + a[4],
+	a[1] * b[4] + a[3] * b[5] + a[5]
+];
+/** Apply a matrix to a point, returning the mapped [x, y]. */
+const applyMatrixToPoint = (m, x, y) => [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+/**
+* Map a layout-space Bounds through the matrix and return the axis-aligned
+* bounding box of the four transformed corners. Non-uniform scales and
+* rotations grow the box; this is intentionally conservative.
+*/
+const transformBoundsToAabb = (m, bounds) => {
+	const corners = [
+		applyMatrixToPoint(m, bounds.left, bounds.top),
+		applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top),
+		applyMatrixToPoint(m, bounds.left, bounds.top + bounds.height),
+		applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top + bounds.height)
+	];
+	const left = Math.min(...corners.map((p) => p[0]));
+	const right = Math.max(...corners.map((p) => p[0]));
+	const top = Math.min(...corners.map((p) => p[1]));
+	const bottom = Math.max(...corners.map((p) => p[1]));
+	return new Bounds(left, top, right - left, bottom - top);
+};
+/**
+* Invert an affine matrix. Returns null for singular matrices
+* (zero-scale transforms have no meaningful inverse).
+*/
+const invertMatrix = (m) => {
+	const det = m[0] * m[3] - m[1] * m[2];
+	if (!Number.isFinite(det) || det === 0) return null;
+	const invDet = 1 / det;
+	return [
+		m[3] * invDet,
+		-m[1] * invDet,
+		-m[2] * invDet,
+		m[0] * invDet,
+		(m[2] * m[5] - m[3] * m[4]) * invDet,
+		(m[1] * m[4] - m[0] * m[5]) * invDet
+	];
+};
+/**
+* Map a visual-space viewport back into the layout space of `m`'s inputs.
+* Used where a crop window (visual coordinates) must select content measured
+* in layout coordinates: the conservative answer is the AABB of the inverse
+* viewport corners.
+*/
+const inverseTransformBoundsToAabb = (m, bounds) => {
+	const inverse = invertMatrix(m);
+	if (!inverse) return null;
+	return transformBoundsToAabb(inverse, bounds);
+};
+// src/render/canvas/text/text-decoration-renderer.ts
 var TextDecorationRenderer = class {
 	ctx;
 	constructor(ctx) {
@@ -10635,8 +10856,7 @@ var TextDecorationRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/font-utils.ts
+// src/render/canvas/font-utils.ts
 /**
 * Font measurement utility
 *
@@ -10671,8 +10891,7 @@ const measureFontMetrics = (ctx, fallback) => {
 const measureBaseline = (ctx, fallback) => {
 	return measureFontMetrics(ctx, fallback).baseline;
 };
-//#endregion
-//#region src/render/canvas/text-renderer.ts
+// src/render/canvas/text-renderer.ts
 const TEXT_OVERFLOW_EPSILON = 1;
 /**
 * Detect CJK (Chinese, Japanese, Korean) characters in a string.
@@ -11098,8 +11317,7 @@ var TextRenderer = class {
 		}
 	}
 };
-//#endregion
-//#region src/render/canvas/canvas-path.ts
+// src/render/canvas/canvas-path.ts
 const formatCanvasPath = (ctx, paths) => {
 	paths.forEach((point, index) => {
 		const start = isBezierCurve(point) ? point.start : point;
@@ -11113,8 +11331,7 @@ const createCanvasPath = (ctx, paths) => {
 	formatCanvasPath(ctx, paths);
 	ctx.closePath();
 };
-//#endregion
-//#region src/core/lru-map.ts
+// src/core/lru-map.ts
 /**
 * Generic LRU (Least-Recently-Used) wrapper over a native `Map`.
 *
@@ -11172,8 +11389,7 @@ var LRUMap = class {
 		this._map.clear();
 	}
 };
-//#endregion
-//#region src/render/canvas/background-renderer.ts
+// src/render/canvas/background-renderer.ts
 /**
 * Background Renderer
 *
@@ -11536,8 +11752,7 @@ var BackgroundRenderer = class {
 		createCanvasPath(this.ctx, paths);
 	}
 };
-//#endregion
-//#region src/render/border.ts
+// src/render/border.ts
 const parsePathForBorder = (curves, borderSide) => {
 	switch (borderSide) {
 		case 0: return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox);
@@ -11590,8 +11805,7 @@ const createPathFromCurves = (outer1, inner1, outer2, inner2) => {
 	else path.push(inner1);
 	return path;
 };
-//#endregion
-//#region src/render/canvas/border-renderer.ts
+// src/render/canvas/border-renderer.ts
 /**
 * Border Renderer
 *
@@ -11725,8 +11939,7 @@ var BorderRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/border-image-renderer.ts
+// src/render/canvas/border-image-renderer.ts
 /**
 * Resolve border-image-width to per-side pixel widths. `auto` uses the
 * corresponding border width, numbers multiply it, lengths are absolute and
@@ -11934,8 +12147,7 @@ var BorderImageRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/effects-renderer.ts
+// src/render/canvas/effects-renderer.ts
 /**
 * Effects Renderer
 *
@@ -12083,8 +12295,7 @@ var EffectsRenderer = class {
 		return this.activeEffects.length > 0;
 	}
 };
-//#endregion
-//#region src/render/canvas/mask-renderer.ts
+// src/render/canvas/mask-renderer.ts
 /**
 * Mask Renderer
 *
@@ -12231,8 +12442,7 @@ const paintMaskLayers = async (ctx, layers, styles, area, matchImage) => {
 		} else paintGradientLayer(ctx, layer, area);
 	}
 };
-//#endregion
-//#region src/render/object-fit.ts
+// src/render/object-fit.ts
 const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit, objectPosition) => {
 	let sx = 0;
 	let sy = 0;
@@ -12318,8 +12528,7 @@ const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objec
 		dh
 	};
 };
-//#endregion
-//#region src/render/canvas/content-renderer.ts
+// src/render/canvas/content-renderer.ts
 /**
 * Render replaced elements: Image, Canvas, SVG, IFrame.
 */
@@ -12540,8 +12749,7 @@ const canvasTextAlign = (textAlign) => {
 		default: return "left";
 	}
 };
-//#endregion
-//#region src/render/canvas/box-shadow-geometry.ts
+// src/render/canvas/box-shadow-geometry.ts
 const shadowRadius = (radius, spread) => {
 	const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
 	return Math.max(0, radius + delta);
@@ -12585,8 +12793,7 @@ const spreadShadowPath = (paths, spread) => {
 		return new BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
 	});
 };
-//#endregion
-//#region src/render/canvas/box-shadow-transform.ts
+// src/render/canvas/box-shadow-transform.ts
 const shadowSpace = (matrix, width, height) => {
 	const { a, b, c, d, e, f } = matrix;
 	if (![
@@ -12629,8 +12836,7 @@ const shadowSpace = (matrix, width, height) => {
 		uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
 	};
 };
-//#endregion
-//#region src/render/canvas/box-shadow-painter.ts
+// src/render/canvas/box-shadow-painter.ts
 const complement = (ctx, rect, hole) => {
 	ctx.beginPath();
 	ctx.rect(rect.left, rect.top, rect.width, rect.height);
@@ -12758,8 +12964,7 @@ const paintBoxShadow = async (ctx, paint, shadow, options, budget) => {
 		ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/text-clip-renderer.ts
+// src/render/canvas/text-clip-renderer.ts
 var TextClipRenderer = class {
 	ctx;
 	context;
@@ -12919,8 +13124,7 @@ var TextClipRenderer = class {
 		return canvases.length ? canvases : null;
 	}
 };
-//#endregion
-//#region src/render/canvas/canvas-renderer.ts
+// src/render/canvas/canvas-renderer.ts
 var CanvasRenderer = class CanvasRenderer {
 	surfaceRoot;
 	surfaceBudget;
@@ -12998,7 +13202,9 @@ var CanvasRenderer = class CanvasRenderer {
 			const hasMask = styles.maskImage.length > 0;
 			const reflect = styles.webkitBoxReflect;
 			const hasBlend = styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL;
-			if (stack.element !== this.surfaceRoot && !this.legacySubtree && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
+			const reflectTransformed = reflect && !isIdentityMatrix(this.ancestorTransform(stack.element));
+			if (reflectTransformed) this.context.logger.warn("-webkit-box-reflect under an ancestor transform is not supported; the reflection is skipped for this subtree");
+			if (stack.element !== this.surfaceRoot && !this.legacySubtree && !reflectTransformed && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
 				if (!await this.renderCompositedStack(stack, filter, hasMask, reflect, hasBlend)) {
 					this.legacySubtree = true;
 					try {
@@ -13015,7 +13221,7 @@ var CanvasRenderer = class CanvasRenderer {
 	canComposite(paint) {
 		const supported = (container) => {
 			const styles = container.styles;
-			return !styles.isTransformed() && styles.zoom === 1 && styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
+			return styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
 		};
 		const subtree = (container) => supported(container) && container.elements.every(subtree);
 		let ancestor = paint.parent;
@@ -13025,24 +13231,82 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 		return subtree(paint.container);
 	}
+	/**
+	* Root-to-element transform accumulated from the ancestor chain's
+	* TransformEffects (including zoom), stopping at the surface root. The
+	* element's own TransformEffect is intentionally excluded: inside the
+	* offscreen surface it is still applied by the normal effects pass, and
+	* at composition time it is filtered from the recomposed effect list.
+	*/
+	ancestorTransform(paint) {
+		const chain = [];
+		let node = paint;
+		while (node && node !== this.surfaceRoot) {
+			for (const effect of node.effects) if (isTransformEffect(effect)) chain.push(effect);
+			node = node.parent;
+		}
+		if (chain.length === 0) return IDENTITY_MATRIX;
+		let matrix = IDENTITY_MATRIX;
+		for (let i = chain.length - 1; i >= 0; i--) {
+			const effect = at(chain, i);
+			const anchored = multiplyMatrix(multiplyMatrix([
+				1,
+				0,
+				0,
+				1,
+				effect.offsetX,
+				effect.offsetY
+			], effect.matrix), [
+				1,
+				0,
+				0,
+				1,
+				-effect.offsetX,
+				-effect.offsetY
+			]);
+			matrix = multiplyMatrix(matrix, anchored);
+		}
+		return matrix;
+	}
 	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 ancestorMatrix = this.ancestorTransform(stack.element);
+		const ownTransforms = stack.element.effects.filter(isTransformEffect);
+		let chainMatrix = ancestorMatrix;
+		for (const effect of ownTransforms) chainMatrix = multiplyMatrix(chainMatrix, multiplyMatrix(multiplyMatrix([
+			1,
+			0,
+			0,
+			1,
+			effect.offsetX,
+			effect.offsetY
+		], effect.matrix), [
+			1,
+			0,
+			0,
+			1,
+			-effect.offsetX,
+			-effect.offsetY
+		]));
+		const layoutBounds = surfaceBounds(container);
+		const bounds = cropSurface(isIdentityMatrix(chainMatrix) ? layoutBounds : transformBoundsToAabb(chainMatrix, layoutBounds), 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) {
-			this.context.logger.info("Filter surface budget exceeded; using the existing renderer");
+			this.context.logger.warn("Filter surface budget exceeded; mask/filter/blend effects are dropped for this subtree");
 			return false;
 		}
+		const surfaceWindow = isIdentityMatrix(ancestorMatrix) || !hasMask ? bounds : inverseTransformBoundsToAabb(ancestorMatrix, bounds) ?? bounds;
 		const options = {
 			...this.options,
 			canvas: void 0,
 			backgroundColor: null,
-			x: bounds.left,
-			y: bounds.top,
-			width: bounds.width,
-			height: bounds.height
+			x: surfaceWindow.left,
+			y: surfaceWindow.top,
+			width: surfaceWindow.width,
+			height: surfaceWindow.height
 		};
 		let source;
 		let filtered;
@@ -13050,12 +13314,18 @@ 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 - surfaceWindow.left,
+					y: container.bounds.top - surfaceWindow.top
+				}
+			});
 			const composited = filtered ?? source.canvas;
-			if (hasMask) await this.applyMask(composited, stack.element.container.styles, bounds);
+			if (hasMask) await this.applyMask(composited, stack.element.container.styles, surfaceWindow, container.bounds, ownTransforms);
 			if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 			const own = stack.element.effects;
-			const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect));
+			const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect) && !isTransformEffect(effect));
 			this.effectsRenderer.applyEffects(effects);
 			if (hasBlend) {
 				this.ctx.save();
@@ -13079,8 +13349,15 @@ var CanvasRenderer = class CanvasRenderer {
 	* Composite an alpha mask onto a finished element surface: all mask
 	* layers are painted additively into a mask surface, then kept pixels are
 	* selected with destination-in.
+	*
+	* Coordinate spaces: the source surface paints in LAYOUT space (the
+	* ancestor TransformEffects stay active on the main canvas and transform
+	* the draw-back), so the mask must be painted in layout space too —
+	* anchored to the element's border box (containerBounds) — riding ONLY
+	* the element's own transform effects, which apply inside the surface
+	* rather than at draw-back.
 	*/
-	async applyMask(surface, styles, bounds) {
+	async applyMask(surface, styles, surfaceWindow, containerBounds, ownTransforms) {
 		const ctx = surface.getContext("2d");
 		if (!ctx) return;
 		const maskCanvas = this.context.resourceDocument.createElement("canvas");
@@ -13092,14 +13369,21 @@ var CanvasRenderer = class CanvasRenderer {
 			return;
 		}
 		maskCtx.scale(this.options.scale, this.options.scale);
-		maskCtx.translate(-bounds.left, -bounds.top);
+		maskCtx.translate(-surfaceWindow.left, -surfaceWindow.top);
+		for (let i = ownTransforms.length - 1; i >= 0; i--) {
+			const effect = at(ownTransforms, i);
+			maskCtx.translate(effect.offsetX, effect.offsetY);
+			maskCtx.transform(...effect.matrix);
+			maskCtx.translate(-effect.offsetX, -effect.offsetY);
+		}
+		const layoutArea = {
+			left: containerBounds.left,
+			top: containerBounds.top,
+			width: containerBounds.width,
+			height: containerBounds.height
+		};
 		try {
-			await paintMaskLayers(maskCtx, styles.maskImage, styles, {
-				left: bounds.left,
-				top: bounds.top,
-				width: bounds.width,
-				height: bounds.height
-			}, async (url) => await this.context.cache.match(url));
+			await paintMaskLayers(maskCtx, styles.maskImage, styles, layoutArea, 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);
@@ -13243,7 +13527,7 @@ var CanvasRenderer = class CanvasRenderer {
 			y: this.options.y,
 			width: this.options.width,
 			height: this.options.height
-		}, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
+		}, (ctx, opts) => new CanvasRenderer(ctx, opts, void 0, this.surfaceBudget), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
 		renderFormElements(this.ctx, this.textRenderer, this.path.bind(this), container, styles);
 		await renderListMarker(this.ctx, this.context, this.textRenderer, paint, container, styles);
 	}
@@ -13639,8 +13923,7 @@ const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
 const hasTextBackgroundClip = (styles) => {
 	return styles.backgroundClip.some((clip) => clip === 3);
 };
-//#endregion
-//#region src/render/canvas/foreignobject-renderer.ts
+// src/render/canvas/foreignobject-renderer.ts
 var ForeignObjectRenderer = class {
 	canvas;
 	ctx;
@@ -13705,8 +13988,7 @@ const stripRootOffsets = (element) => {
 		for (const [property, value] of previous) style[property] = value;
 	};
 };
-//#endregion
-//#region src/core/logger.ts
+// src/core/logger.ts
 var Logger = class {
 	id;
 	enabled;
@@ -13743,8 +14025,7 @@ var Logger = class {
 		}
 	}
 };
-//#endregion
-//#region src/core/cache-storage.ts
+// src/core/cache-storage.ts
 var Cache = class {
 	context;
 	_options;
@@ -13989,8 +14270,7 @@ const isInlineImage = (src) => INLINE_IMG.test(src);
 const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
 const isBlobImage = (src) => src.substring(0, 4) === "blob";
 const isSVG = (src) => src.slice(-3).toLowerCase() === "svg" || INLINE_SVG.test(src);
-//#endregion
-//#region src/core/origin-checker.ts
+// src/core/origin-checker.ts
 /**
 * Origin Checker
 *
@@ -14042,8 +14322,7 @@ var OriginChecker = class {
 		return this.origin;
 	}
 };
-//#endregion
-//#region src/core/context.ts
+// src/core/context.ts
 var Context = class Context {
 	static instanceCount = 1;
 	instanceName = `#${Context.instanceCount++}`;
@@ -14090,8 +14369,7 @@ var Context = class Context {
 		this._windowBounds = this._windowBounds.add(left, top, 0, 0);
 	}
 };
-//#endregion
-//#region src/core/config-assembler.ts
+// src/core/config-assembler.ts
 /**
 * Coerce known numeric options from string (or other) values to actual numbers.
 * Mutates the opts object in place — this is intentionally a normalisation
@@ -14168,8 +14446,7 @@ const assembleRenderOptions = (opts, backgroundColor, left, top, width, height,
 	imageSmoothing: opts.imageSmoothing,
 	imageSmoothingQuality: opts.imageSmoothingQuality
 });
-//#endregion
-//#region src/core/background-parser.ts
+// src/core/background-parser.ts
 /**
 * Resolve the background colour for the rendered canvas, following CSS
 * background propagation rules:
@@ -14190,8 +14467,7 @@ const parseBackgroundColor = (context, element, backgroundColorOverride) => {
 	const defaultBackgroundColor = typeof backgroundColorOverride === "string" ? parseColor(context, backgroundColorOverride) : backgroundColorOverride === null ? 0 : 4294967295;
 	return element === ownerDocument.documentElement ? isTransparent(documentBackgroundColor) ? isTransparent(bodyBackgroundColor) ? defaultBackgroundColor : bodyBackgroundColor : documentBackgroundColor : defaultBackgroundColor;
 };
-//#endregion
-//#region src/core/render-element.ts
+// src/core/render-element.ts
 const emitProgress = (onProgress, context, phase, progress) => {
 	if (!onProgress) return;
 	try {
@@ -14220,7 +14496,7 @@ const renderElement = async (element, opts, config) => {
 	const windowBounds = new Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
 	const context = new Context(contextOptions, windowBounds, config);
 	const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
-	const perfMonitor = new PerformanceMonitor(context, performanceMonitoring);
+	const perfMonitor = new PerformanceMonitor(context.logger, performanceMonitoring);
 	perfMonitor.start("total", {
 		width: windowOptions.windowWidth,
 		height: windowOptions.windowHeight
@@ -14289,8 +14565,7 @@ const renderElement = async (element, opts, config) => {
 	emitProgress(opts.onProgress, context, "render", 100);
 	return canvas;
 };
-//#endregion
-//#region src/index.ts
+// src/index.ts
 /**
 * Renders an HTML element to a `<canvas>` element.
 *
@@ -14326,7 +14601,6 @@ const html2canvas = (element, options = {}, config) => {
 	});
 	return renderElement(element, options, finalConfig);
 };
-//#endregion
 exports.Html2CanvasConfig = Html2CanvasConfig;
 exports.PerformanceMonitor = PerformanceMonitor;
 exports.Validator = Validator;