html2canvas-pro 2.5.4 → 2.6.0

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.4 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.6.0 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -249,6 +249,30 @@
 			};
 		}
 		/**
+		* Validate the backgroundColor option
+		*
+		* @param backgroundColor - CSS color string or null (transparent)
+		* @returns Validation result
+		*/
+		validateBackgroundColor(backgroundColor) {
+			if (backgroundColor === null) return {
+				valid: true,
+				sanitized: null
+			};
+			if (typeof backgroundColor !== "string" || backgroundColor.length === 0) return {
+				valid: false,
+				error: "backgroundColor must be a CSS color string or null"
+			};
+			if (/[^a-zA-Z0-9%(),.#\s/-]/.test(backgroundColor)) return {
+				valid: false,
+				error: `backgroundColor contains characters that cannot appear in a CSS color: ${backgroundColor}`
+			};
+			return {
+				valid: true,
+				sanitized: backgroundColor
+			};
+		}
+		/**
 		* Validate image timeout
 		*
 		* @param timeout - Timeout in milliseconds
@@ -393,6 +417,10 @@
 				const nonceResult = this.validateCspNonce(options.cspNonce);
 				if (!nonceResult.valid) errors.push(`CSP nonce: ${nonceResult.error}`);
 			}
+			if (options.backgroundColor !== void 0) {
+				const colorResult = this.validateBackgroundColor(options.backgroundColor);
+				if (!colorResult.valid) errors.push(`backgroundColor: ${colorResult.error}`);
+			}
 			if (this.config.customValidator) {
 				const customResult = this.config.customValidator(options, "options");
 				if (!customResult.valid) errors.push(`Custom validation: ${customResult.error}`);
@@ -8069,9 +8097,9 @@
 		if (!rules) return true;
 		for (let i = 0; i < rules.length; i++) {
 			const rule = rules[i];
-			if (rule && typeof CSSImportRule !== "undefined" && rule instanceof CSSImportRule) {
-				if (!rule.styleSheet || !isSheetFullyApplied(rule.styleSheet, depth + 1)) return false;
-			}
+			if (!rule || !("styleSheet" in rule)) continue;
+			const inner = rule.styleSheet;
+			if (!inner || !isSheetFullyApplied(inner, depth + 1)) return false;
 		}
 		return true;
 	};
@@ -8113,7 +8141,7 @@
 	* remain as the settle path for plain <link> fetches.
 	* @internal – exported for testing only.
 	*/
-	const stylesheetsReady = (documentClone, logger, signal) => {
+	const stylesheetsReady = (documentClone, logger, signal, timeoutMs = STYLESHEET_READY_TIMEOUT_MS) => {
 		if (signal?.aborted) return Promise.resolve();
 		const pending = [];
 		const links = [];
@@ -8143,8 +8171,8 @@
 				const timer = setInterval(() => {
 					elapsed += 50;
 					if (link.sheet) settle();
-					else if (elapsed >= 1e4) {
-						logger?.warn(`Stylesheet ${href} did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+					else if (elapsed >= timeoutMs) {
+						logger?.warn(`Stylesheet ${href} did not finish loading within ${timeoutMs / 1e3}s; continuing with a possibly unstyled clone`);
 						settle();
 					}
 				}, 50);
@@ -8161,8 +8189,8 @@
 				const timer = setInterval(() => {
 					elapsed += 50;
 					const currentSheet = style.sheet;
-					if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= 1e4) {
-						if (elapsed >= 1e4 && !isSheetFullyApplied(currentSheet ?? null)) logger?.warn(`@import chain in an inline <style> did not finish loading within ${STYLESHEET_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+					if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= timeoutMs) {
+						if (elapsed >= timeoutMs && !isSheetFullyApplied(currentSheet ?? null)) logger?.warn(`@import chain in an inline <style> did not finish loading within ${timeoutMs / 1e3}s; continuing with a possibly unstyled clone`);
 						clearInterval(timer);
 						resolve();
 					}
@@ -9850,7 +9878,7 @@
 			if (treatAsRealStackingContext || createsStackingContext) {
 				const parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
 				const stack = new StackingContext(paintContainer);
-				if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
+				if (treatAsRealStackingContext || child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
 					const order = child.styles.zIndex.order;
 					if (order < 0) {
 						let index = 0;
@@ -12148,6 +12176,7 @@
 		ctx.fillStyle = rasterized.lastColor;
 		ctx.fillRect(area.left, area.top, area.width, area.height);
 		ctx.drawImage(rasterized.canvas, area.left + cx - rx, area.top + cy - ry, rx * 2, ry * 2);
+		releaseSurface(rasterized.canvas);
 	};
 	/** Draw one gradient layer filling the whole mask area. */
 	const paintGradientLayer = (ctx, layer, area) => {
@@ -13061,7 +13090,10 @@
 			maskCanvas.width = surface.width;
 			maskCanvas.height = surface.height;
 			const maskCtx = maskCanvas.getContext("2d");
-			if (!maskCtx) return;
+			if (!maskCtx) {
+				releaseSurface(maskCanvas);
+				return;
+			}
 			maskCtx.scale(this.options.scale, this.options.scale);
 			maskCtx.translate(-bounds.left, -bounds.top);
 			try {
@@ -13073,6 +13105,7 @@
 				}, async (url) => await this.context.cache.match(url));
 			} catch (error) {
 				this.context.logger.error(`Error rendering mask-image: ${error instanceof Error ? error.message : error}`);
+				releaseSurface(maskCanvas);
 				return;
 			}
 			ctx.save();
@@ -13082,6 +13115,7 @@
 				ctx.drawImage(maskCanvas, 0, 0);
 			} finally {
 				ctx.restore();
+				releaseSurface(maskCanvas);
 			}
 		}
 		/**
@@ -13486,6 +13520,7 @@
 				ctx.fillStyle = rasterized.lastColor;
 				ctx.fillRect(0, 0, width, height);
 				ctx.drawImage(rasterized.canvas, cx - rx, cy - ry, rx * 2, ry * 2);
+				releaseSurface(rasterized.canvas);
 				return canvas;
 			}
 			if (source.type === 5 || source.type === 6) {