html2canvas-pro 1.6.5 → 1.6.7

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.6.5 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.6.7 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -4494,6 +4494,30 @@
         }
     };
 
+    /**
+     * -webkit-line-clamp property descriptor
+     * Used with display: -webkit-box and -webkit-box-orient: vertical
+     * to limit text to a specific number of lines
+     */
+    const webkitLineClamp = {
+        name: '-webkit-line-clamp',
+        initialValue: 'none',
+        prefix: true,
+        type: 0 /* PropertyDescriptorParsingType.VALUE */,
+        parse: (_context, token) => {
+            // 'none' means no line clamping
+            if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
+                return 0;
+            }
+            // Number value specifies the number of lines
+            if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+                return Math.max(0, Math.floor(token.number));
+            }
+            // Default to 0 (no clamping)
+            return 0;
+        }
+    };
+
     const objectFit = {
         name: 'objectFit',
         initialValue: 'fill',
@@ -4607,6 +4631,7 @@
             this.visibility = parse(context, visibility, declaration.visibility);
             this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
             this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
+            this.webkitLineClamp = parse(context, webkitLineClamp, declaration.webkitLineClamp);
             this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
             this.zIndex = parse(context, zIndex, declaration.zIndex);
             this.objectFit = parse(context, objectFit, declaration.objectFit);
@@ -6363,20 +6388,161 @@
                 }
             }
         }
-        cloneChildNodes(node, clone, copyStyles) {
-            // Clone shadow DOM content if it exists
-            if (node.shadowRoot && clone.shadowRoot) {
-                for (let child = node.shadowRoot.firstChild; child; child = child.nextSibling) {
-                    // Clone all shadow DOM children including <slot> elements
-                    // The browser will automatically handle slot assignment
-                    clone.shadowRoot.appendChild(this.cloneNode(child, copyStyles));
+        /**
+         * Check if a child node should be cloned based on filtering rules
+         * Filters out: scripts, ignored elements, and optionally styles
+         */
+        shouldCloneChild(child) {
+            return (!isElementNode(child) ||
+                (!isScriptElement(child) &&
+                    !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                    (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child))));
+        }
+        /**
+         * Check if a style element should be cloned based on copyStyles option
+         */
+        shouldCloneStyleElement(child) {
+            return !this.options.copyStyles || !isElementNode(child) || !isStyleElement(child);
+        }
+        /**
+         * Safely append a cloned child to a target, applying all filtering rules
+         */
+        safeAppendClonedChild(target, child, copyStyles) {
+            if (this.shouldCloneChild(child) && this.shouldCloneStyleElement(child)) {
+                target.appendChild(this.cloneNode(child, copyStyles));
+            }
+        }
+        /**
+         * Clone assigned nodes from a slot element to the target
+         */
+        cloneAssignedNodes(assignedNodes, target, copyStyles) {
+            assignedNodes.forEach((node) => {
+                this.safeAppendClonedChild(target, node, copyStyles);
+            });
+        }
+        /**
+         * Clone fallback content from a slot element when no nodes are assigned
+         */
+        cloneSlotFallbackContent(slot, target, copyStyles) {
+            for (let child = slot.firstChild; child; child = child.nextSibling) {
+                this.safeAppendClonedChild(target, child, copyStyles);
+            }
+        }
+        /**
+         * Handle cloning of a slot element, including assigned nodes or fallback content
+         */
+        cloneSlotElement(slot, targetShadowRoot, copyStyles) {
+            if (!isSlotElement(slot)) {
+                return;
+            }
+            const slotElement = slot;
+            // Defensive check: ensure assignedNodes method exists
+            if (typeof slotElement.assignedNodes !== 'function') {
+                this.context.logger.warn('HTMLSlotElement.assignedNodes is not available', slot);
+                this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+                return;
+            }
+            const assignedNodes = slotElement.assignedNodes();
+            // Defensive check: ensure assignedNodes returns an array
+            if (!assignedNodes || !Array.isArray(assignedNodes)) {
+                this.context.logger.warn('assignedNodes() did not return a valid array', slot);
+                this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+                return;
+            }
+            if (assignedNodes.length > 0) {
+                // Clone assigned nodes
+                this.cloneAssignedNodes(assignedNodes, targetShadowRoot, copyStyles);
+            }
+            else {
+                // Clone fallback content
+                this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+            }
+        }
+        /**
+         * Clone shadow DOM children to the target shadow root
+         */
+        cloneShadowDOMChildren(shadowRoot, targetShadowRoot, copyStyles) {
+            for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
+                if (isElementNode(child) && isSlotElement(child)) {
+                    // Handle slot elements specially
+                    this.cloneSlotElement(child, targetShadowRoot, copyStyles);
+                }
+                else {
+                    // Clone regular elements
+                    this.safeAppendClonedChild(targetShadowRoot, child, copyStyles);
                 }
             }
-            // Clone light DOM content (always, even if shadow DOM exists)
+        }
+        /**
+         * Clone light DOM children to the target element
+         */
+        cloneLightDOMChildren(node, clone, copyStyles) {
             for (let child = node.firstChild; child; child = child.nextSibling) {
                 this.appendChildNode(clone, child, copyStyles);
             }
         }
+        /**
+         * Clone slot element as light DOM when shadow root creation failed
+         */
+        cloneSlotElementAsLightDOM(slot, clone, copyStyles) {
+            if (!isSlotElement(slot)) {
+                return;
+            }
+            const slotElement = slot;
+            if (typeof slotElement.assignedNodes !== 'function') {
+                // Fallback: clone slot's children
+                for (let child = slot.firstChild; child; child = child.nextSibling) {
+                    this.appendChildNode(clone, child, copyStyles);
+                }
+                return;
+            }
+            const assignedNodes = slotElement.assignedNodes();
+            if (assignedNodes && Array.isArray(assignedNodes) && assignedNodes.length > 0) {
+                // Clone assigned nodes as light DOM
+                assignedNodes.forEach((node) => this.appendChildNode(clone, node, copyStyles));
+            }
+            else {
+                // Clone fallback content as light DOM
+                for (let child = slot.firstChild; child; child = child.nextSibling) {
+                    this.appendChildNode(clone, child, copyStyles);
+                }
+            }
+        }
+        /**
+         * Clone shadow DOM content as light DOM when shadow root creation failed
+         * This is a fallback mechanism to ensure content is not lost
+         */
+        cloneShadowDOMAsLightDOM(shadowRoot, clone, copyStyles) {
+            for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
+                if (isElementNode(child) && isSlotElement(child)) {
+                    this.cloneSlotElementAsLightDOM(child, clone, copyStyles);
+                }
+                else {
+                    this.appendChildNode(clone, child, copyStyles);
+                }
+            }
+        }
+        /**
+         * Clone child nodes from source element to clone element
+         * Handles shadow DOM, slots, and light DOM appropriately
+         */
+        cloneChildNodes(node, clone, copyStyles) {
+            if (node.shadowRoot && clone.shadowRoot) {
+                // Both original and clone have shadow roots - clone shadow DOM content
+                this.cloneShadowDOMChildren(node.shadowRoot, clone.shadowRoot, copyStyles);
+                // Also clone light DOM (slot content sources)
+                this.cloneLightDOMChildren(node, clone, copyStyles);
+            }
+            else if (node.shadowRoot && !clone.shadowRoot) {
+                // Original has shadow root but clone doesn't (creation failed)
+                // Fallback: clone shadow DOM content as light DOM to preserve content
+                this.cloneShadowDOMAsLightDOM(node.shadowRoot, clone, copyStyles);
+            }
+            else {
+                // No shadow DOM - just clone light DOM children
+                this.cloneLightDOMChildren(node, clone, copyStyles);
+            }
+        }
         cloneNode(node, copyStyles) {
             if (isTextNode(node)) {
                 return document.createTextNode(node.data);
@@ -7644,6 +7810,28 @@
                 }, text.bounds.left);
             }
         }
+        /**
+         * Helper method to render text with paint order support
+         * Reduces code duplication in line-clamp and normal rendering
+         */
+        renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
+            paintOrderLayers.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case 0 /* PAINT_ORDER_LAYER.FILL */:
+                        this.ctx.fillStyle = asString(styles.color);
+                        this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                        break;
+                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                        if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                            this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                        }
+                        break;
+                }
+            });
+        }
         renderTextDecoration(bounds, styles) {
             this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
             // Calculate decoration line thickness
@@ -7793,24 +7981,120 @@
             this.ctx.textAlign = 'left';
             this.ctx.textBaseline = 'alphabetic';
             const paintOrder = styles.paintOrder;
+            // Calculate line height for text layout detection (used by both line-clamp and ellipsis)
+            const lineHeight = styles.fontSize.number * 1.5;
+            // Check if we need to apply -webkit-line-clamp
+            // This limits text to a specific number of lines with ellipsis
+            const shouldApplyLineClamp = styles.webkitLineClamp > 0 &&
+                (styles.display & 2 /* DISPLAY.BLOCK */) !== 0 &&
+                styles.overflowY === 1 /* OVERFLOW.HIDDEN */ &&
+                text.textBounds.length > 0;
+            if (shouldApplyLineClamp) {
+                // Group text bounds by lines based on their Y position
+                const lines = [];
+                let currentLine = [];
+                let currentLineTop = text.textBounds[0].bounds.top;
+                text.textBounds.forEach((tb) => {
+                    // If this text bound is on a different line, start a new line
+                    if (Math.abs(tb.bounds.top - currentLineTop) >= lineHeight * 0.5) {
+                        if (currentLine.length > 0) {
+                            lines.push(currentLine);
+                        }
+                        currentLine = [tb];
+                        currentLineTop = tb.bounds.top;
+                    }
+                    else {
+                        currentLine.push(tb);
+                    }
+                });
+                // Don't forget the last line
+                if (currentLine.length > 0) {
+                    lines.push(currentLine);
+                }
+                // Only render up to webkitLineClamp lines
+                const maxLines = styles.webkitLineClamp;
+                if (lines.length > maxLines) {
+                    // Render only the first (maxLines - 1) complete lines
+                    for (let i = 0; i < maxLines - 1; i++) {
+                        lines[i].forEach((textBound) => {
+                            this.renderTextBoundWithPaintOrder(textBound, styles, paintOrder);
+                        });
+                    }
+                    // For the last line, truncate with ellipsis
+                    const lastLine = lines[maxLines - 1];
+                    if (lastLine && lastLine.length > 0 && containerBounds) {
+                        const lastLineText = lastLine.map((tb) => tb.text).join('');
+                        const firstBound = lastLine[0];
+                        const availableWidth = containerBounds.width - (firstBound.bounds.left - containerBounds.left);
+                        const truncatedText = this.truncateTextWithEllipsis(lastLineText, availableWidth, styles.letterSpacing);
+                        paintOrder.forEach((paintOrderLayer) => {
+                            switch (paintOrderLayer) {
+                                case 0 /* PAINT_ORDER_LAYER.FILL */:
+                                    this.ctx.fillStyle = asString(styles.color);
+                                    if (styles.letterSpacing === 0) {
+                                        this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                                    }
+                                    else {
+                                        const letters = segmentGraphemes(truncatedText);
+                                        letters.reduce((left, letter) => {
+                                            this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                            return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                                        }, firstBound.bounds.left);
+                                    }
+                                    break;
+                                case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                                    if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
+                                        this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                                        this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                                        if (styles.letterSpacing === 0) {
+                                            this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                                        }
+                                        else {
+                                            const letters = segmentGraphemes(truncatedText);
+                                            letters.reduce((left, letter) => {
+                                                this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                                return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                                            }, firstBound.bounds.left);
+                                        }
+                                    }
+                                    break;
+                            }
+                        });
+                    }
+                    return; // Don't render anything else
+                }
+                // If lines.length <= maxLines, fall through to normal rendering
+            }
             // Check if we need to apply text-overflow: ellipsis
-            const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ && containerBounds && styles.overflowX === 1 /* OVERFLOW.HIDDEN */;
+            // Issue #203: Only apply ellipsis for single-line text overflow
+            // Multi-line text truncation (like -webkit-line-clamp) should not be affected
+            const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ &&
+                containerBounds &&
+                styles.overflowX === 1 /* OVERFLOW.HIDDEN */ &&
+                text.textBounds.length > 0;
             // Calculate total text width if ellipsis might be needed
             let needsEllipsis = false;
             let truncatedText = '';
-            if (shouldApplyEllipsis && text.textBounds.length > 0) {
-                // Measure the full text content
-                // Note: text.textBounds may contain whitespace characters from HTML formatting
-                // We need to collapse them like the browser does for white-space: nowrap
-                let fullText = text.textBounds.map((tb) => tb.text).join('');
-                // Collapse whitespace: replace sequences of whitespace (including newlines) with single spaces
-                // and trim leading/trailing whitespace
-                fullText = fullText.replace(/\s+/g, ' ').trim();
-                const fullTextWidth = this.ctx.measureText(fullText).width;
-                const availableWidth = containerBounds.width;
-                if (fullTextWidth > availableWidth) {
-                    needsEllipsis = true;
-                    truncatedText = this.truncateTextWithEllipsis(fullText, availableWidth, styles.letterSpacing);
+            if (shouldApplyEllipsis) {
+                // Check if all text bounds are on approximately the same line (single-line scenario)
+                // For multi-line text (like -webkit-line-clamp), textBounds will have different Y positions
+                const firstTop = text.textBounds[0].bounds.top;
+                const isSingleLine = text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * 0.5);
+                if (isSingleLine) {
+                    // Measure the full text content
+                    // Note: text.textBounds may contain whitespace characters from HTML formatting
+                    // We need to collapse them like the browser does for white-space: nowrap
+                    let fullText = text.textBounds.map((tb) => tb.text).join('');
+                    // Collapse whitespace: replace sequences of whitespace (including newlines) with single spaces
+                    // and trim leading/trailing whitespace
+                    fullText = fullText.replace(/\s+/g, ' ').trim();
+                    const fullTextWidth = this.ctx.measureText(fullText).width;
+                    const availableWidth = containerBounds.width;
+                    if (fullTextWidth > availableWidth) {
+                        needsEllipsis = true;
+                        truncatedText = this.truncateTextWithEllipsis(fullText, availableWidth, styles.letterSpacing);
+                    }
                 }
             }
             // If ellipsis is needed, render the truncated text once