html2canvas-pro 2.3.4 → 2.3.6

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.3.4 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.3.6 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -7030,14 +7030,19 @@ var DocumentCloner = class {
 			}
 			if (clone.loading === "lazy") clone.loading = "eager";
 		}
-		if (isCustomElement(clone) && !isSVGElementNode(clone)) return this.createCustomElementClone(clone);
+		if (isCustomElement(clone) && !isSVGElementNode(clone)) return this.createCustomElementClone(node, clone);
 		return clone;
 	}
-	createCustomElementClone(node) {
+	createCustomElementClone(originalNode, clonedNode) {
 		const clone = document.createElement("div");
-		clone.className = node.className;
-		copyCSSStyles(node.style, clone);
-		if (node.shadowRoot) try {
+		clone.className = clonedNode.className;
+		copyCSSStyles(clonedNode.style, clone);
+		const attributes = clonedNode.attributes;
+		for (let i = 0; i < attributes.length; i++) {
+			const attr = attributes[i];
+			if (attr.name !== "class" && attr.name !== "style") clone.setAttribute(attr.name, attr.value);
+		}
+		if (originalNode.shadowRoot) try {
 			clone.attachShadow({ mode: "open" });
 		} catch (e) {
 			this.context.logger.error("Failed to attach shadow root to custom element clone:", e);
@@ -7438,6 +7443,10 @@ var ElementContainer = class {
 			this.originalElement = element;
 		}
 		this.bounds = parseBounds(this.context, element);
+		if (element.tagName === "FIELDSET") {
+			const legend = element.querySelector(":scope > legend");
+			if (legend) this.legendBounds = parseBounds(this.context, legend);
+		}
 		if (isDebugging(element, 4)) this.debugRender = true;
 	}
 	/**
@@ -8179,18 +8188,29 @@ const LIST_OWNERS = [
 const parseNodeTree = (context, node, parent, root) => {
 	for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
 		nextNode = childNode.nextSibling;
-		if (isTextNode(childNode) && childNode.data.length > 0) parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
-		else if (isElementNode(childNode)) if (isSlotElement(childNode) && childNode.assignedNodes) childNode.assignedNodes().forEach((assignedNode) => parseNodeTree(context, assignedNode, parent, root));
-		else {
-			const container = createContainer(context, childNode);
-			if (container.styles.isVisible()) {
-				if (createsRealStackingContext(childNode, container, root)) container.createsRealStackingContext = true;
-				else if (createsStackingContext(container.styles)) container.createsStackingContext = true;
-				if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) container.isListOwner = true;
-				parent.elements.push(container);
-				if (childNode.shadowRoot) parseNodeTree(context, childNode.shadowRoot, container, root);
-				else if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) parseNodeTree(context, childNode, container, root);
-			}
+		parseChildNode(context, childNode, parent, root);
+	}
+};
+/**
+* Parse a single node as a child of `parent`.
+*
+* Separated from the tree walk so that nodes assigned to a `<slot>` (including
+* bare text nodes, which have no child nodes) can be parsed directly. Without
+* this, slotted shadow-DOM content such as web component labels was silently
+* dropped because `parseNodeTree` only iterates `node.firstChild` (issue #226).
+*/
+const parseChildNode = (context, childNode, parent, root) => {
+	if (isTextNode(childNode) && childNode.data.length > 0) parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
+	else if (isElementNode(childNode)) if (isSlotElement(childNode) && childNode.assignedNodes) childNode.assignedNodes().forEach((assignedNode) => parseChildNode(context, assignedNode, parent, root));
+	else {
+		const container = createContainer(context, childNode);
+		if (container.styles.isVisible()) {
+			if (createsRealStackingContext(childNode, container, root)) container.createsRealStackingContext = true;
+			else if (createsStackingContext(container.styles)) container.createsStackingContext = true;
+			if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) container.isListOwner = true;
+			parent.elements.push(container);
+			if (childNode.shadowRoot) parseNodeTree(context, childNode.shadowRoot, container, root);
+			else if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) parseNodeTree(context, childNode, container, root);
 		}
 	}
 };
@@ -9063,6 +9083,7 @@ const measureBaseline = (ctx, fallback) => {
 //#endregion
 //#region src/render/canvas/text-renderer.ts
 const iOSBrokenFonts = ["-apple-system", "system-ui"];
+const TEXT_OVERFLOW_EPSILON = 1;
 /**
 * Detect CJK (Chinese, Japanese, Korean) characters in a string.
 * CJK characters use the ideographic baseline in browsers, which differs
@@ -9365,7 +9386,7 @@ var TextRenderer = class {
 		const firstTop = text.textBounds[0].bounds.top;
 		if (!text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * .5)) return false;
 		let fullText = text.textBounds.map((tb) => tb.text).join("").replace(/\s+/g, " ").trim();
-		if (this.ctx.measureText(fullText).width <= containerBounds.width) return false;
+		if (this.ctx.measureText(fullText).width <= containerBounds.width + TEXT_OVERFLOW_EPSILON) return false;
 		const bounds = new TextBounds(this.truncateTextWithEllipsis(fullText, containerBounds.width, styles.letterSpacing), text.textBounds[0].bounds);
 		for (const layer of paintOrder) if (layer === 0) this.renderTextFillWithShadows(bounds, styles, baseline);
 		else if (layer === 1) this.renderTextStrokeWithStyle(bounds, styles, baseline);
@@ -10603,10 +10624,38 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 		let side = 0;
 		for (const border of borders) {
-			if (border.style !== 0 && !isTransparent(border.color) && border.width > 0) if (border.style === 2) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2);
-			else if (border.style === 3) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3);
-			else if (border.style === 4) await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
-			else await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+			if (border.style !== 0 && !isTransparent(border.color) && border.width > 0) {
+				const renderBorderSide = async () => {
+					if (border.style === 2) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2);
+					else if (border.style === 3) await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3);
+					else if (border.style === 4) await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
+					else await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+				};
+				const legend = paint.container.legendBounds;
+				if (side === 0 && legend) {
+					const bounds = paint.container.bounds;
+					const legendLeft = legend.left - bounds.left;
+					const legendRight = legend.left + legend.width - bounds.left;
+					if (legendLeft > 0) {
+						this.ctx.save();
+						this.ctx.beginPath();
+						this.ctx.rect(bounds.left, bounds.top, legendLeft, bounds.height);
+						this.ctx.clip();
+						await renderBorderSide();
+						this.ctx.restore();
+					}
+					const rightStart = bounds.left + legendRight;
+					const rightWidth = bounds.width - legendRight;
+					if (rightWidth > 0) {
+						this.ctx.save();
+						this.ctx.beginPath();
+						this.ctx.rect(rightStart, bounds.top, rightWidth, bounds.height);
+						this.ctx.clip();
+						await renderBorderSide();
+						this.ctx.restore();
+					}
+				} else await renderBorderSide();
+			}
 			side++;
 		}
 	}