html2canvas-pro 2.3.5 → 2.3.7

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,21 @@ 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) {
+                const legendBounds = (0, bounds_1.parseBounds)(this.context, legend);
+                this.legendBounds = legendBounds;
+                // A <fieldset>'s legend is centered on its top border line and
+                // overflows ABOVE it. Chrome's getBoundingClientRect() for the
+                // fieldset includes that overflow, so bounds.top is too high and
+                // the border would be drawn above the legend. Shift the bounds so
+                // the top border sits at the legend's vertical center, matching
+                // how the browser renders fieldset + legend (issue #227).
+                const borderBoxTop = legendBounds.top + legendBounds.height / 2 - this.styles.borderTopWidth / 2;
+                this.bounds = new bounds_1.Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
+            }
+        }
         if ((0, debugger_1.isDebugging)(element, 4 /* DebuggerType.RENDER */)) {
             this.debugRender = true;
         }

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.5",
+  "version": "2.3.7",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",