html2canvas-pro 1.5.13 → 1.6.0

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.5.13 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.6.0 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -118,7 +118,19 @@
             return new Bounds(clientRect.left + context.windowBounds.left, clientRect.top + context.windowBounds.top, clientRect.width, clientRect.height);
         };
         Bounds.fromDOMRectList = function (context, domRectList) {
-            var domRect = Array.from(domRectList).find(function (rect) { return rect.width !== 0; });
+            var rects = Array.from(domRectList);
+            // First try to find a rect with non-zero width
+            var domRect = rects.find(function (rect) { return rect.width !== 0; });
+            // If not found, try to find a rect with non-zero height
+            // This handles cases like inline-flex with single child where width might be 0
+            if (!domRect) {
+                domRect = rects.find(function (rect) { return rect.height !== 0; });
+            }
+            // If still not found but rects exist, use the first rect
+            // Position info (left, top) might still be valid even if dimensions are 0
+            if (!domRect && rects.length > 0) {
+                domRect = rects[0];
+            }
             return domRect
                 ? new Bounds(domRect.left + context.windowBounds.left, domRect.top + context.windowBounds.top, domRect.width, domRect.height)
                 : Bounds.EMPTY;
@@ -1610,6 +1622,94 @@
     var isLengthPercentage = function (token) {
         return token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || isLength(token);
     };
+    /**
+     * Check if a token is a calc() function
+     */
+    var isCalcFunction = function (token) {
+        return token.type === 18 /* TokenType.FUNCTION */ && token.name === 'calc';
+    };
+    /**
+     * Evaluate a calc() expression and convert to LengthPercentage token
+     * Supports basic arithmetic: +, -, *, /
+     * Note: Percentages in calc() are converted based on a context value
+     */
+    var evaluateCalcToLengthPercentage = function (calcToken, contextValue) {
+        if (contextValue === void 0) { contextValue = 0; }
+        // Build expression string from tokens
+        var buildExpression = function (values) {
+            var expression = '';
+            for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {
+                var value = values_1[_i];
+                if (value.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
+                    continue;
+                }
+                if (value.type === 18 /* TokenType.FUNCTION */) {
+                    if (value.name === 'calc') {
+                        var nested = buildExpression(value.values);
+                        if (nested === null)
+                            return null;
+                        expression += "(".concat(nested, ")");
+                    }
+                    else {
+                        return null;
+                    }
+                }
+                else if (value.type === 17 /* TokenType.NUMBER_TOKEN */) {
+                    expression += value.number.toString();
+                }
+                else if (value.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+                    // Convert units to px
+                    if (value.unit === 'px') {
+                        expression += value.number.toString();
+                    }
+                    else if (value.unit === 'rem' || value.unit === 'em') {
+                        expression += (value.number * 16).toString();
+                    }
+                    else {
+                        expression += value.number.toString();
+                    }
+                }
+                else if (value.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
+                    // Convert percentage to absolute value based on context
+                    expression += ((value.number / 100) * contextValue).toString();
+                }
+                else if (value.type === 6 /* TokenType.DELIM_TOKEN */) {
+                    var op = value.value;
+                    if (op === '+' || op === '-' || op === '*' || op === '/') {
+                        expression += " ".concat(op, " ");
+                    }
+                    else if (op === '(') {
+                        expression += '(';
+                    }
+                    else if (op === ')') {
+                        expression += ')';
+                    }
+                }
+            }
+            return expression;
+        };
+        try {
+            var expression = buildExpression(calcToken.values);
+            if (expression === null || expression.trim() === '') {
+                return null;
+            }
+            // Evaluate the expression
+            // Note: Using Function constructor (similar to color.ts line 185)
+            var result = new Function('return ' + expression)();
+            if (typeof result === 'number' && !isNaN(result)) {
+                // Return as a number token in px
+                return {
+                    type: 17 /* TokenType.NUMBER_TOKEN */,
+                    number: result,
+                    flags: FLAG_INTEGER
+                };
+            }
+        }
+        catch (e) {
+            return null;
+        }
+        return null;
+    };
     var parseLengthPercentageTuple = function (tokens) {
         return tokens.length > 1 ? [tokens[0], tokens[1]] : [tokens[0]];
     };
@@ -3350,7 +3450,20 @@
         prefix: false,
         parse: function (_context, tokens) {
             return parseFunctionArgs(tokens)
-                .map(function (values) { return values.filter(isLengthPercentage); })
+                .map(function (values) {
+                // Convert calc() to length-percentage tokens, keep other length-percentage as is
+                return values
+                    .map(function (value) {
+                    if (isCalcFunction(value)) {
+                        // For calc() at parse time, we can't know the container size
+                        // So we evaluate with 0 context which will work for px-only calc()
+                        // Percentage-based calc() will need special handling
+                        return evaluateCalcToLengthPercentage(value, 0);
+                    }
+                    return isLengthPercentage(value) ? value : null;
+                })
+                    .filter(function (v) { return v !== null; });
+            })
                 .map(parseLengthPercentageTuple);
         }
     };
@@ -5706,7 +5819,19 @@
             container.styles.isTransformed() ||
             (isBodyElement(node) && root.styles.isTransparent()));
     };
-    var createsStackingContext = function (styles) { return styles.isPositioned() || styles.isFloating(); };
+    var createsStackingContext = function (styles) {
+        // Positioned and floating elements create stacking contexts
+        if (styles.isPositioned() || styles.isFloating()) {
+            return true;
+        }
+        // Fix for Issue #137: Inline-level containers (inline-flex, inline-block, etc.)
+        // should create stacking contexts to prevent their children from being added
+        // to the parent's stacking context, which causes rendering order issues
+        return (contains(styles.display, 268435456 /* DISPLAY.INLINE_FLEX */) ||
+            contains(styles.display, 33554432 /* DISPLAY.INLINE_BLOCK */) ||
+            contains(styles.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
+            contains(styles.display, 134217728 /* DISPLAY.INLINE_TABLE */));
+    };
     var isTextNode = function (node) { return node.nodeType === Node.TEXT_NODE; };
     var isElementNode = function (node) { return node.nodeType === Node.ELEMENT_NODE; };
     var isHTMLElementNode = function (node) {
@@ -7069,8 +7194,9 @@
                 this.effects.push(new OpacityEffect(this.container.styles.opacity));
             }
             if (this.container.styles.rotate !== null) {
-                var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
-                var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+                var origin_1 = this.container.styles.transformOrigin;
+                var offsetX = this.container.bounds.left + getAbsoluteValue(origin_1[0], this.container.bounds.width);
+                var offsetY = this.container.bounds.top + getAbsoluteValue(origin_1[1], this.container.bounds.height);
                 // Apply rotate property if present
                 var angle = this.container.styles.rotate;
                 var rad = (angle * Math.PI) / 180;
@@ -7080,8 +7206,9 @@
                 this.effects.push(new TransformEffect(offsetX, offsetY, rotateMatrix));
             }
             if (this.container.styles.transform !== null) {
-                var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number;
-                var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number;
+                var origin_2 = this.container.styles.transformOrigin;
+                var offsetX = this.container.bounds.left + getAbsoluteValue(origin_2[0], this.container.bounds.width);
+                var offsetY = this.container.bounds.top + getAbsoluteValue(origin_2[1], this.container.bounds.height);
                 var matrix = this.container.styles.transform;
                 this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
             }
@@ -7652,15 +7779,9 @@
         CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) {
             var _this = this;
             if (letterSpacing === 0) {
-                // Fixed an issue with characters moving up in non-Firefox.
-                // https://github.com/niklasvh/html2canvas/issues/2107#issuecomment-692462900
-                if (navigator.userAgent.indexOf('Firefox') === -1) {
-                    this.ctx.textBaseline = 'ideographic';
-                    this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
-                }
-                else {
-                    this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
-                }
+                // Use alphabetic baseline for consistent text positioning across browsers
+                // Issue #129: text.bounds.top + text.bounds.height causes text to render too low
+                this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
             }
             else {
                 var letters = segmentGraphemes(text.text);
@@ -7743,7 +7864,19 @@
                                         _this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                         _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                                        _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+                                        // Issue #110: Use baseline (fontSize) for consistent positioning with fill
+                                        // Previously used text.bounds.height which caused stroke to render too low
+                                        var baseline_1 = styles.fontSize.number;
+                                        if (styles.letterSpacing === 0) {
+                                            _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline_1);
+                                        }
+                                        else {
+                                            var letters = segmentGraphemes(text.text);
+                                            letters.reduce(function (left, letter) {
+                                                _this.ctx.strokeText(letter, left, text.bounds.top + baseline_1);
+                                                return left + _this.ctx.measureText(letter).width;
+                                            }, text.bounds.left);
+                                        }
                                     }
                                     _this.ctx.strokeStyle = '';
                                     _this.ctx.lineWidth = 0;