html2canvas-pro 2.3.4 → 2.3.6

package/dist/lib/dom/document-cloner.js

@@ -168,17 +168,36 @@ class DocumentCloner {
             }
         }
         if ((0, node_type_guards_1.isCustomElement)(clone) && !(0, node_type_guards_1.isSVGElementNode)(clone)) {
-            return this.createCustomElementClone(clone);
+            return this.createCustomElementClone(node, clone);
         }
         return clone;
     }
-    createCustomElementClone(node) {
+    createCustomElementClone(originalNode, clonedNode) {
         const clone = document.createElement('div');
-        clone.className = node.className;
-        (0, exports.copyCSSStyles)(node.style, clone);
-        // Clone shadow DOM if it exists
+        clone.className = clonedNode.className;
+        (0, exports.copyCSSStyles)(clonedNode.style, clone);
+        // Copy all attributes onto the fresh <div> (except class/style which are
+        // handled above). Without this, attributes such as `slot="suffix"` are
+        // dropped and slotted custom elements lose their slot assignment in the
+        // cloned shadow DOM, so their content is never rendered (issue #226).
+        // Iterate by index: `NamedNodeMap` is not guaranteed to be iterable
+        // across TypeScript DOM lib versions (TS2488 on older libs).
+        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);
+            }
+        }
+        // Clone shadow DOM if it exists. The shadow root must be detected on the
+        // ORIGINAL element: `clonedNode` comes from `cloneNode(false)`, which only
+        // preserves the shadow root when it was created with `clonable: true` (or
+        // by frameworks that set it). For other components (e.g. Shoelace / Web
+        // Awesome) the clone has no shadow root, so without this check the clone
+        // falls back to flattening the shadow content and the slotted light-DOM
+        // label content is lost.
         // Fix for Issue #108: This is critical for Web Components with slots to work correctly
-        if (node.shadowRoot) {
+        if (originalNode.shadowRoot) {
             try {
                 clone.attachShadow({ mode: 'open' });
                 // The actual shadow DOM content will be cloned in cloneChildNodes

package/dist/lib/dom/element-container.js

@@ -25,6 +25,12 @@ class ElementContainer {
             this.originalElement = element;
         }
         this.bounds = (0, bounds_1.parseBounds)(this.context, element);
+        if (element.tagName === 'FIELDSET') {
+            const legend = element.querySelector(':scope > legend');
+            if (legend) {
+                this.legendBounds = (0, bounds_1.parseBounds)(this.context, legend);
+            }
+        }
         if ((0, debugger_1.isDebugging)(element, 4 /* DebuggerType.RENDER */)) {
             this.debugRender = true;
         }

package/dist/lib/dom/node-parser.js

@@ -18,37 +18,49 @@ const LIST_OWNERS = ['OL', 'UL', 'MENU'];
 const parseNodeTree = (context, node, parent, root) => {
     for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
         nextNode = childNode.nextSibling;
-        // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
-        if ((0, node_type_guards_1.isTextNode)(childNode) && childNode.data.length > 0) {
-            parent.textNodes.push(new text_container_1.TextContainer(context, childNode, parent.styles));
+        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) => {
+    // Fixes #2238 #1624 - Fix the issue of TextNode content being overlooked in rendering due to being perceived as blank by trim().
+    if ((0, node_type_guards_1.isTextNode)(childNode) && childNode.data.length > 0) {
+        parent.textNodes.push(new text_container_1.TextContainer(context, childNode, parent.styles));
+    }
+    else if ((0, node_type_guards_1.isElementNode)(childNode)) {
+        if ((0, node_type_guards_1.isSlotElement)(childNode) && childNode.assignedNodes) {
+            // Slotted content is laid out at the slot's position: parse each
+            // assigned node (text or element) as a direct child of the slot's
+            // parent container.
+            childNode
+                .assignedNodes()
+                .forEach((assignedNode) => parseChildNode(context, assignedNode, parent, root));
         }
-        else if ((0, node_type_guards_1.isElementNode)(childNode)) {
-            if ((0, node_type_guards_1.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 (!(0, node_type_guards_1.isTextareaElement)(childNode) &&
-                        !(0, node_type_guards_1.isSVGElement)(childNode) &&
-                        !(0, node_type_guards_1.isSelectElement)(childNode)) {
-                        parseNodeTree(context, childNode, container, 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 (!(0, node_type_guards_1.isTextareaElement)(childNode) && !(0, node_type_guards_1.isSVGElement)(childNode) && !(0, node_type_guards_1.isSelectElement)(childNode)) {
+                    parseNodeTree(context, childNode, container, root);
                 }
             }
         }

package/dist/lib/render/canvas/canvas-renderer.js

@@ -282,17 +282,50 @@ class CanvasRenderer {
         let side = 0;
         for (const border of borders) {
             if (border.style !== 0 /* BORDER_STYLE.NONE */ && !(0, color_utilities_1.isTransparent)(border.color) && border.width > 0) {
-                if (border.style === 2 /* BORDER_STYLE.DASHED */) {
-                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
-                }
-                else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
-                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
-                }
-                else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
-                    await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                const renderBorderSide = async () => {
+                    if (border.style === 2 /* BORDER_STYLE.DASHED */) {
+                        await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
+                    }
+                    else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
+                        await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
+                    }
+                    else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
+                        await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                    }
+                    else {
+                        await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+                    }
+                };
+                // Browsers break a <fieldset>'s top border where its <legend>
+                // sits, instead of drawing the border through the legend (issue
+                // #227). Render the top border in two clipped segments around
+                // the legend's horizontal span.
+                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 this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+                    await renderBorderSide();
                 }
             }
             side++;

package/dist/lib/render/canvas/text-renderer.js

@@ -21,6 +21,10 @@ const text_decoration_renderer_1 = require("./text/text-decoration-renderer");
 const font_utils_1 = require("./font-utils");
 // iOS font fix - see https://github.com/niklasvh/html2canvas/pull/2645
 const iOSBrokenFonts = ['-apple-system', 'system-ui'];
+// Tolerance (px) for text-overflow: ellipsis detection. Canvas measureText can
+// report a width a fraction of a pixel wider than the browser's layout box, so
+// text that fits exactly must not be truncated (issue #226).
+const TEXT_OVERFLOW_EPSILON = 1;
 /**
  * Detect CJK (Chinese, Japanese, Korean) characters in a string.
  * CJK characters use the ideographic baseline in browsers, which differs
@@ -424,7 +428,10 @@ class TextRenderer {
             .replace(/\s+/g, ' ')
             .trim();
         const fullWidth = this.ctx.measureText(fullText).width;
-        if (fullWidth <= containerBounds.width)
+        // Small tolerance: canvas measurement can differ from the browser's text
+        // layout by a fraction of a pixel (kerning/font rounding), so text that
+        // exactly fits the container must not be falsely truncated (issue #226).
+        if (fullWidth <= containerBounds.width + TEXT_OVERFLOW_EPSILON)
             return false;
         const truncated = this.truncateTextWithEllipsis(fullText, containerBounds.width, styles.letterSpacing);
         const bounds = new text_1.TextBounds(truncated, text.textBounds[0].bounds);

package/dist/types/dom/document-cloner.d.ts

@@ -30,7 +30,7 @@ export declare class DocumentCloner {
     constructor(context: Context, element: HTMLElement, options: CloneConfigurations);
     toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement>;
     createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement;
-    createCustomElementClone(node: HTMLElement): HTMLElement;
+    createCustomElementClone(originalNode: HTMLElement, clonedNode: HTMLElement): HTMLElement;
     createStyleClone(node: HTMLStyleElement): HTMLStyleElement;
     createCanvasClone(canvas: HTMLCanvasElement): HTMLImageElement | HTMLCanvasElement;
     createVideoClone(video: HTMLVideoElement): HTMLCanvasElement;

package/dist/types/dom/element-container.d.ts

@@ -11,6 +11,12 @@ export declare class ElementContainer {
     readonly textNodes: TextContainer[];
     readonly elements: ElementContainer[];
     bounds: Bounds;
+    /**
+     * Bounds of the <legend> child of a <fieldset>, when present. Browsers break
+     * the fieldset's top border where the legend sits; the renderer uses these
+     * bounds to leave a matching gap (issue #227).
+     */
+    readonly legendBounds?: Bounds;
     createsStackingContext: boolean;
     createsRealStackingContext: boolean;
     isListOwner: boolean;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.3.4",
+  "version": "2.3.6",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",