html2canvas-pro 2.5.2 → 2.5.3

package/README.md

@@ -38,7 +38,7 @@ html2canvas-pro is a fork of [niklasvh/html2canvas](https://github.com/niklasvh/
 - `conic-gradient()`, `repeating-conic-gradient()` and `repeating-radial-gradient()` — complete gradient family
 - `text-emphasis` (CJK emphasis marks), `-webkit-box-reflect`, `image-set()`, `border-image-outset` / `border-image-width`
 - `accent-color`, `outline`, `-webkit-text-fill-color`, `isolation`
-- `filter` compositing for eligible layers — `blur()` / `drop-shadow()` rendered on a dedicated surface with correct layer `opacity` (see [filter support notes](docs/filter-support.md))
+- `filter` chain compositing for eligible layers — the full standard filter function set rendered on a dedicated surface with correct layer `opacity` (see [filter support notes](docs/filter-support.md))
 - Faithful `box-shadow` rendering, including inset shadows, blur scaling, and shadows through transformed ancestors
 - `image-rendering` CSS property plus `imageSmoothing` / `imageSmoothingQuality` options for pixel-perfect output
 - Border image, counters & quotes, `direction`, `line-height`, `transform-origin`, and more — see the full [feature list](docs/features.md)
@@ -187,7 +187,7 @@ The project uses [pnpm](https://pnpm.io) (the version is pinned via the `package
 corepack pnpm install
 corepack pnpm build          # tsc + Rolldown bundles (CJS/ESM/UMD)
 corepack pnpm unittest       # Vitest unit tests
-corepack pnpm test           # lint + unit tests + browser (Karma) tests
+corepack pnpm test           # lint + unit tests + browser reftests (Playwright)
 corepack pnpm docs:dev       # VitePress dev server
 corepack pnpm docs:api       # Generate the TypeDoc API reference
 ```

package/dist/html2canvas-pro.cjs

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.2 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.5.3 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -8037,6 +8037,54 @@ const imageReady = (img) => {
 const imagesReady = (document) => {
 	return Promise.all([].slice.call(document.images, 0).map(imageReady));
 };
+/**
+* Wait until every external stylesheet link of the clone has been applied or
+* definitively failed, or the readiness budget expires.
+*
+* The clone is mounted by adoptNode() into an already-closed document
+* (close() must precede adoptNode for Chrome uppercase class-name matching,
+* see the mount sequence below), so the cloned <link rel="stylesheet">
+* elements are inserted after the document finished loading: they neither
+* delay the iframe load event nor change readyState, and the iframeLoader
+* readiness poll cannot observe them. On a cold cache the first capture
+* could then measure the clone before its external CSS arrived and render
+* an unstyled layout (issue #245). Inline <style> clones apply
+* synchronously and document-level adopted stylesheets are serialised at
+* clone time, so neither needs this wait.
+* @internal – exported for testing only.
+*/
+const stylesheetsReady = (documentClone, logger, signal) => {
+	if (signal?.aborted) return Promise.resolve();
+	const pending = [];
+	const links = documentClone.getElementsByTagName("link");
+	for (let i = 0; i < links.length; i++) {
+		const link = links[i];
+		if (!link || link.sheet) continue;
+		const rel = (link.getAttribute("rel") ?? "").trim().toLowerCase().split(/\s+/);
+		if (!rel.includes("stylesheet") || rel.includes("alternate") || link.disabled || !link.getAttribute("href")) continue;
+		pending.push(new Promise((resolve) => {
+			let timer;
+			const settle = () => {
+				link.removeEventListener("load", settle);
+				link.removeEventListener("error", settle);
+				signal?.removeEventListener("abort", onAbort);
+				clearTimeout(timer);
+				resolve();
+			};
+			const onAbort = () => settle();
+			timer = setTimeout(() => {
+				logger?.warn(`Stylesheet ${link.href} did not finish loading within ${CLONE_READY_TIMEOUT_MS / 1e3}s; continuing with a possibly unstyled clone`);
+				settle();
+			}, CLONE_READY_TIMEOUT_MS);
+			link.addEventListener("load", settle);
+			link.addEventListener("error", settle);
+			signal?.addEventListener("abort", onAbort, { once: true });
+			if (link.sheet) settle();
+		}));
+	}
+	if (pending.length === 0) return Promise.resolve();
+	return Promise.all(pending).then(() => void 0);
+};
 const iframeLoader = (iframe, logger, signal) => {
 	return new Promise((resolve, reject) => {
 		const cloneWindow = iframe.contentWindow;
@@ -8079,6 +8127,15 @@ const iframeLoader = (iframe, logger, signal) => {
 	});
 };
 /**
+* Reduce a doctype component to characters that are inert inside a
+* <!DOCTYPE ...> declaration. Doctype content is parsed as a declaration
+* token, never as HTML markup, but the fields originate from the captured
+* document — stripping markup delimiters and control characters here makes
+* that property locally verifiable (and keeps the sanitizer guarantee even
+* if a future serializer ever embeds the result elsewhere).
+*/
+const sanitizeDoctypePart = (value) => value.replace(/[<>&"'`\\]|[\u0000-\u001f\u007f]/g, "");
+/**
 * Serialise a document type declaration to an HTML string.
 * @internal – exported for testing only, not part of the public API.
 */
@@ -8086,12 +8143,12 @@ const serializeDoctype = (doctype) => {
 	let str = "";
 	if (doctype) {
 		str += "<!DOCTYPE ";
-		if (doctype.name) str += doctype.name;
-		if (doctype.internalSubset) str += " " + doctype.internalSubset.replace(/"/g, "&quot;").replace(/>/g, "&gt;");
+		if (doctype.name) str += sanitizeDoctypePart(doctype.name);
+		if (doctype.internalSubset) str += " " + sanitizeDoctypePart(doctype.internalSubset);
 		if (doctype.publicId) {
-			str += " PUBLIC \"" + doctype.publicId.replace(/"/g, "&quot;") + "\"";
-			if (doctype.systemId) str += " \"" + doctype.systemId.replace(/"/g, "&quot;") + "\"";
-		} else if (doctype.systemId) str += " SYSTEM \"" + doctype.systemId.replace(/"/g, "&quot;") + "\"";
+			str += " PUBLIC \"" + sanitizeDoctypePart(doctype.publicId) + "\"";
+			if (doctype.systemId) str += " \"" + sanitizeDoctypePart(doctype.systemId) + "\"";
+		} else if (doctype.systemId) str += " SYSTEM \"" + sanitizeDoctypePart(doctype.systemId) + "\"";
 		str += ">";
 	}
 	return str;
@@ -8127,6 +8184,8 @@ const mountCloneInIFrame = (context, ownerDocument, windowSize, mount) => {
 		const referenceElement = mount.clonedReferenceElement;
 		if (typeof referenceElement === "undefined") throw new Error(`Error finding the ${mount.referenceElementName} in the cloned document`);
 		throwIfAborted(mount.signal);
+		await stylesheetWait;
+		throwIfAborted(mount.signal);
 		if (documentClone.fonts && documentClone.fonts.ready) await documentClone.fonts.ready;
 		throwIfAborted(mount.signal);
 		if (/(AppleWebKit)/g.test(navigator.userAgent)) {
@@ -8177,6 +8236,7 @@ const mountCloneInIFrame = (context, ownerDocument, windowSize, mount) => {
 	const adoptedNode = documentClone.adoptNode(mount.documentElement);
 	addBase(adoptedNode, baseUri);
 	documentClone.replaceChild(adoptedNode, documentClone.documentElement);
+	const stylesheetWait = stylesheetsReady(documentClone, context.logger, mount.signal);
 	return iframeLoad;
 };
 //#endregion