html2canvas-pro 2.1.0 → 2.2.0

package/src/dom/document-cloner.ts

@@ -1,929 +0,0 @@
-import { Bounds } from '../css/layout/bounds';
-import {
-    isBodyElement,
-    isCanvasElement,
-    isCustomElement,
-    isElementNode,
-    isHTMLElementNode,
-    isIFrameElement,
-    isImageElement,
-    isScriptElement,
-    isSelectElement,
-    isSlotElement,
-    isStyleElement,
-    isSVGElementNode,
-    isTextareaElement,
-    isTextNode,
-    isVideoElement
-} from './node-parser';
-import { canHavePseudoElements } from './node-type-guards';
-import { isIdentToken, nonFunctionArgSeparator } from '../css/syntax/parser';
-import { TokenType } from '../css/syntax/tokenizer';
-import { CounterState, createCounterText } from '../css/types/functions/counter';
-import { LIST_STYLE_TYPE, listStyleType } from '../css/property-descriptors/list-style-type';
-import { CSSParsedCounterDeclaration, CSSParsedPseudoDeclaration } from '../css/index';
-import { getQuote } from '../css/property-descriptors/quotes';
-import { Context } from '../core/context';
-import { DebuggerType, isDebugging } from '../core/debugger';
-
-export interface CloneOptions {
-    ignoreElements?: (element: Element) => boolean;
-    onclone?: (document: Document, element: HTMLElement) => void;
-    allowTaint?: boolean;
-    iframeContainer?: HTMLElement | ShadowRoot;
-}
-
-export interface WindowOptions {
-    scrollX: number;
-    scrollY: number;
-    windowWidth: number;
-    windowHeight: number;
-}
-
-export type CloneConfigurations = CloneOptions & {
-    inlineImages: boolean;
-    copyStyles: boolean;
-    cspNonce?: string;
-};
-
-const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
-
-/**
- * Trusted Types factory (getPolicy / createPolicy) for document.write in strict CSP environments.
- * Used in toIFrame() when writing initial HTML to the cloned document.
- */
-type TrustedTypesFactory = {
-    getPolicy?: (name: string) => unknown;
-    createPolicy: (name: string, config: object) => unknown;
-};
-
-/**
- * Find the parent ShadowRoot of an element, if any
- * @param element - The element to check
- * @returns The parent ShadowRoot or null
- */
-const findParentShadowRoot = (element: Element): ShadowRoot | null => {
-    let current: Node | null = element;
-    while (current) {
-        // Check if we've reached a shadow root boundary
-        if (current.parentNode && (current.parentNode as ShadowRoot).host) {
-            return current.parentNode as ShadowRoot;
-        }
-        // Use getRootNode to check if we're in a shadow root
-        const root = current.getRootNode();
-        if (root && root !== current.ownerDocument && (root as ShadowRoot).host) {
-            return root as ShadowRoot;
-        }
-        current = current.parentNode;
-    }
-    return null;
-};
-
-export class DocumentCloner {
-    private readonly scrolledElements: [Element, number, number][];
-    private readonly referenceElement: HTMLElement;
-    clonedReferenceElement?: HTMLElement;
-    private readonly documentElement: HTMLElement;
-    private readonly counters: CounterState;
-    private quoteDepth: number;
-
-    constructor(
-        private readonly context: Context,
-        element: HTMLElement,
-        private readonly options: CloneConfigurations
-    ) {
-        this.scrolledElements = [];
-        this.referenceElement = element;
-        this.counters = new CounterState();
-        this.quoteDepth = 0;
-        if (!element.ownerDocument) {
-            throw new Error('Cloned element does not have an owner document');
-        }
-
-        // Auto-detect Shadow Root if not explicitly provided
-        if (!this.options.iframeContainer) {
-            const shadowRoot = findParentShadowRoot(element);
-            if (shadowRoot) {
-                this.options.iframeContainer = shadowRoot;
-            }
-        }
-
-        this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false) as HTMLElement;
-    }
-
-    toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement> {
-        const iframe: HTMLIFrameElement = createIFrameContainer(
-            ownerDocument,
-            windowSize,
-            this.options.iframeContainer
-        );
-
-        if (!iframe.contentWindow) {
-            throw new Error('Unable to find iframe window');
-        }
-
-        const scrollX = (ownerDocument.defaultView as Window).pageXOffset;
-        const scrollY = (ownerDocument.defaultView as Window).pageYOffset;
-
-        const cloneWindow = iframe.contentWindow;
-        const documentClone: Document = cloneWindow.document;
-
-        /* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
-         if window url is about:blank, we can assign the url to current by writing onto the document
-         */
-
-        const iframeLoad = iframeLoader(iframe).then(async () => {
-            this.scrolledElements.forEach(restoreNodeScroll);
-            if (cloneWindow) {
-                cloneWindow.scrollTo(windowSize.left, windowSize.top);
-                if (
-                    /AppleWebKit/g.test(navigator.userAgent) &&
-                    (cloneWindow.scrollY !== windowSize.top || cloneWindow.scrollX !== windowSize.left)
-                ) {
-                    this.context.logger.warn('Unable to restore scroll position for cloned document');
-                    this.context.windowBounds = this.context.windowBounds.add(
-                        cloneWindow.scrollX - windowSize.left,
-                        cloneWindow.scrollY - windowSize.top,
-                        0,
-                        0
-                    );
-                }
-            }
-
-            const onclone = this.options.onclone;
-
-            const referenceElement = this.clonedReferenceElement;
-
-            if (typeof referenceElement === 'undefined') {
-                throw new Error(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
-            }
-
-            if (documentClone.fonts && documentClone.fonts.ready) {
-                await documentClone.fonts.ready;
-            }
-
-            if (/(AppleWebKit)/g.test(navigator.userAgent)) {
-                await imagesReady(documentClone);
-            }
-
-            if (typeof onclone === 'function') {
-                return Promise.resolve()
-                    .then(() => onclone(documentClone, referenceElement))
-                    .then(() => iframe);
-            }
-
-            return iframe;
-        });
-        /**
-         * The base URI used for resolving relative URLs (e.g. background-image) in the clone.
-         * Must come from the source document: the iframe document is about:blank, so
-         * documentClone.baseURI would break getComputedStyle() for relative background URLs.
-         */
-        const baseUri = ownerDocument.baseURI;
-        documentClone.open();
-        const rawHTML = serializeDoctype(document.doctype) + '<html></html>';
-        try {
-            // Fixing "This document requires 'TrustedHTML' assignment. The action has been blocked." error.
-            // Reuse existing policy when present (e.g. second html2canvas call) to avoid createPolicy duplicate-name throw.
-            const ownerWindow = this.referenceElement.ownerDocument?.defaultView;
-            const trustedTypesFactory =
-                ownerWindow && (ownerWindow as Window & { trustedTypes?: TrustedTypesFactory }).trustedTypes;
-            let policy = trustedTypesFactory?.getPolicy?.('html2canvas-pro');
-            if (!policy && trustedTypesFactory) {
-                policy = trustedTypesFactory.createPolicy('html2canvas-pro', {
-                    createHTML: (string: string) => string
-                });
-            }
-            if (policy) {
-                documentClone.write((policy as { createHTML: (s: string) => string }).createHTML(rawHTML) as string);
-            } else {
-                documentClone.write(rawHTML);
-            }
-        } catch (_e) {
-            documentClone.write(rawHTML);
-        }
-        // Chrome scrolls the parent document for some reason after the write to the cloned window???
-        restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
-        /**
-         * IMPORTANT: documentClone.close() MUST be called BEFORE adoptNode().
-         *
-         * In Chrome, calling adoptNode() while the document is still "open"
-         * (between document.open() and document.close()) causes CSS rules with
-         * uppercase characters in class names (e.g. ".MyClass") to not match
-         * correctly. Chrome's CSS engine only enters a fully-resolved matching
-         * mode once the document is closed.
-         *
-         * Correct order: open() → write() → close() → adoptNode() → replaceChild()
-         *
-         * Timing: close() queues the iframe 'load' event; because JS is single-threaded,
-         * the synchronous adoptNode() and replaceChild() below complete before that
-         * event is dispatched. iframeLoader's setInterval will therefore see the body
-         * already populated on its first tick.
-         */
-        documentClone.close();
-        const adoptedNode = documentClone.adoptNode(this.documentElement);
-        addBase(adoptedNode, baseUri);
-        documentClone.replaceChild(adoptedNode, documentClone.documentElement);
-
-        return iframeLoad;
-    }
-
-    createElementClone<T extends HTMLElement | SVGElement>(node: T): HTMLElement | SVGElement {
-        if (isDebugging(node, DebuggerType.CLONE)) {
-            debugger;
-        }
-        if (isCanvasElement(node)) {
-            return this.createCanvasClone(node);
-        }
-        if (isVideoElement(node)) {
-            return this.createVideoClone(node);
-        }
-        if (isStyleElement(node)) {
-            return this.createStyleClone(node);
-        }
-
-        const clone = node.cloneNode(false) as T;
-        if (isImageElement(clone)) {
-            if (isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) {
-                clone.src = node.currentSrc;
-                clone.srcset = '';
-            }
-
-            if (clone.loading === 'lazy') {
-                clone.loading = 'eager';
-            }
-        }
-
-        if (isCustomElement(clone) && !isSVGElementNode(clone)) {
-            return this.createCustomElementClone(clone as HTMLElement);
-        }
-
-        return clone;
-    }
-
-    createCustomElementClone(node: HTMLElement): HTMLElement {
-        const clone = document.createElement('div');
-        clone.className = node.className;
-        copyCSSStyles(node.style, clone);
-
-        // Clone shadow DOM if it exists
-        // Fix for Issue #108: This is critical for Web Components with slots to work correctly
-        if (node.shadowRoot) {
-            try {
-                clone.attachShadow({ mode: 'open' });
-                // The actual shadow DOM content will be cloned in cloneChildNodes
-            } catch (e) {
-                // Some elements cannot have shadow roots attached
-                // This can happen if the element doesn't support shadow DOM
-                this.context.logger.error('Failed to attach shadow root to custom element clone:', e);
-            }
-        }
-
-        return clone;
-    }
-
-    createStyleClone(node: HTMLStyleElement): HTMLStyleElement {
-        try {
-            const sheet = node.sheet as CSSStyleSheet | undefined;
-            if (sheet && sheet.cssRules) {
-                const css: string = [].slice.call(sheet.cssRules, 0).reduce((css: string, rule: CSSRule) => {
-                    if (rule && typeof rule.cssText === 'string') {
-                        return css + rule.cssText;
-                    }
-                    return css;
-                }, '');
-                const style = node.cloneNode(false) as HTMLStyleElement;
-                style.textContent = css;
-                if (this.options.cspNonce) {
-                    style.nonce = this.options.cspNonce;
-                }
-                return style;
-            }
-        } catch (e) {
-            // accessing node.sheet.cssRules throws a DOMException
-            this.context.logger.error('Unable to access cssRules property', e);
-            if (e.name !== 'SecurityError') {
-                throw e;
-            }
-        }
-        const cloned = node.cloneNode(false) as HTMLStyleElement;
-        if (this.options.cspNonce) {
-            cloned.nonce = this.options.cspNonce;
-        }
-        return cloned;
-    }
-
-    createCanvasClone(canvas: HTMLCanvasElement): HTMLImageElement | HTMLCanvasElement {
-        if (this.options.inlineImages && canvas.ownerDocument) {
-            const img = canvas.ownerDocument.createElement('img');
-            try {
-                img.src = canvas.toDataURL();
-                return img;
-            } catch (e) {
-                this.context.logger.info(`Unable to inline canvas contents, canvas is tainted`, canvas);
-            }
-        }
-
-        const clonedCanvas = canvas.cloneNode(false) as HTMLCanvasElement;
-
-        try {
-            clonedCanvas.width = canvas.width;
-            clonedCanvas.height = canvas.height;
-            const ctx = canvas.getContext('2d');
-            const clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D;
-            if (clonedCtx) {
-                if (!this.options.allowTaint && ctx) {
-                    clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
-                } else {
-                    const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
-                    if (gl) {
-                        const attribs = gl.getContextAttributes();
-                        if (attribs?.preserveDrawingBuffer === false) {
-                            this.context.logger.warn(
-                                'Unable to clone WebGL context as it has preserveDrawingBuffer=false',
-                                canvas
-                            );
-                        }
-                    }
-
-                    clonedCtx.drawImage(canvas, 0, 0);
-                }
-            }
-            return clonedCanvas;
-        } catch (e) {
-            this.context.logger.info(`Unable to clone canvas as it is tainted`, canvas);
-        }
-
-        return clonedCanvas;
-    }
-
-    createVideoClone(video: HTMLVideoElement): HTMLCanvasElement {
-        const canvas = video.ownerDocument.createElement('canvas');
-
-        canvas.width = video.offsetWidth;
-        canvas.height = video.offsetHeight;
-        const ctx = canvas.getContext('2d');
-
-        try {
-            if (ctx) {
-                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                if (!this.options.allowTaint) {
-                    ctx.getImageData(0, 0, canvas.width, canvas.height);
-                }
-            }
-            return canvas;
-        } catch (e) {
-            this.context.logger.info(`Unable to clone video as it is tainted`, video);
-        }
-
-        const blankCanvas = video.ownerDocument.createElement('canvas');
-
-        blankCanvas.width = video.offsetWidth;
-        blankCanvas.height = video.offsetHeight;
-        return blankCanvas;
-    }
-
-    appendChildNode(clone: HTMLElement | SVGElement, child: Node, copyStyles: boolean): void {
-        this.safeAppendClonedChild(clone, child, copyStyles);
-    }
-
-    /**
-     * Check if a child node should be cloned based on filtering rules
-     * Filters out: scripts, ignored elements, and optionally styles
-     */
-    private shouldCloneChild(child: Node): boolean {
-        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
-     */
-    private shouldCloneStyleElement(child: Node): boolean {
-        return !this.options.copyStyles || !isElementNode(child) || !isStyleElement(child);
-    }
-
-    /**
-     * Safely append a cloned child to a target, applying all filtering rules
-     */
-    private safeAppendClonedChild(
-        target: ShadowRoot | HTMLElement | SVGElement,
-        child: Node,
-        copyStyles: boolean
-    ): void {
-        if (this.shouldCloneChild(child) && this.shouldCloneStyleElement(child)) {
-            target.appendChild(this.cloneNode(child, copyStyles));
-        }
-    }
-
-    /**
-     * Clone assigned nodes from a slot element to the target
-     */
-    private cloneAssignedNodes(assignedNodes: Node[], target: ShadowRoot, copyStyles: boolean): void {
-        assignedNodes.forEach((node) => {
-            this.safeAppendClonedChild(target, node, copyStyles);
-        });
-    }
-
-    /**
-     * Clone fallback content from a slot element when no nodes are assigned
-     */
-    private cloneSlotFallbackContent(slot: Element, target: ShadowRoot, copyStyles: boolean): void {
-        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
-     */
-    private cloneSlotElement(slot: Element, targetShadowRoot: ShadowRoot, copyStyles: boolean): void {
-        if (!isSlotElement(slot)) {
-            return;
-        }
-
-        const slotElement = slot as HTMLSlotElement;
-
-        // 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
-     */
-    private cloneShadowDOMChildren(shadowRoot: ShadowRoot, targetShadowRoot: ShadowRoot, copyStyles: boolean): void {
-        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 children to the target element
-     */
-    private cloneLightDOMChildren(node: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void {
-        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
-     */
-    private cloneSlotElementAsLightDOM(slot: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void {
-        if (!isSlotElement(slot)) {
-            return;
-        }
-
-        const slotElement = slot as HTMLSlotElement;
-
-        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
-     */
-    private cloneShadowDOMAsLightDOM(
-        shadowRoot: ShadowRoot,
-        clone: HTMLElement | SVGElement,
-        copyStyles: boolean
-    ): void {
-        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: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void {
-        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: Node, copyStyles: boolean): Node {
-        if (isTextNode(node)) {
-            return document.createTextNode(node.data);
-        }
-
-        if (!node.ownerDocument) {
-            return node.cloneNode(false);
-        }
-
-        const window = node.ownerDocument.defaultView;
-
-        if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
-            const clone = this.createElementClone(node);
-            clone.style.transitionProperty = 'none';
-
-            const style = window.getComputedStyle(node);
-
-            // Per CSS spec, replaced elements, void elements, and SVG elements
-            // cannot have ::before / ::after pseudo-elements — skip these queries.
-            const checkPseudoElements = canHavePseudoElements(node);
-
-            if (this.referenceElement === node && isHTMLElementNode(clone)) {
-                this.clonedReferenceElement = clone;
-            }
-            if (isBodyElement(clone)) {
-                createPseudoHideStyles(clone, this.options.cspNonce);
-            }
-
-            const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
-
-            if (checkPseudoElements) {
-                const styleBefore = window.getComputedStyle(node, ':before');
-                const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
-                if (before) {
-                    clone.insertBefore(before, clone.firstChild);
-                }
-
-                const styleAfter = window.getComputedStyle(node, ':after');
-                const after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER);
-                if (after) {
-                    clone.appendChild(after);
-                }
-            }
-
-            if (isCustomElement(node)) {
-                copyStyles = true;
-            }
-
-            if (!isVideoElement(node)) {
-                this.cloneChildNodes(node, clone, copyStyles);
-            }
-
-            this.counters.pop(counters);
-
-            if (
-                (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) ||
-                copyStyles
-            ) {
-                copyCSSStyles(style, clone);
-            }
-
-            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
-                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
-            }
-
-            if (
-                (isTextareaElement(node) || isSelectElement(node)) &&
-                (isTextareaElement(clone) || isSelectElement(clone))
-            ) {
-                clone.value = node.value;
-            }
-
-            return clone;
-        }
-
-        return node.cloneNode(false);
-    }
-
-    resolvePseudoContent(
-        node: Element,
-        clone: Element,
-        style: CSSStyleDeclaration,
-        pseudoElt: PseudoElementType
-    ): HTMLElement | void {
-        if (!style) {
-            return;
-        }
-
-        const value = style.content;
-        const document = clone.ownerDocument;
-        if (!document || !value || value === 'none' || value === '-moz-alt-content' || style.display === 'none') {
-            return;
-        }
-
-        this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
-        const declaration = new CSSParsedPseudoDeclaration(this.context, style);
-
-        const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
-        copyCSSStyles(style, anonymousReplacedElement);
-
-        declaration.content.forEach((token) => {
-            if (token.type === TokenType.STRING_TOKEN) {
-                anonymousReplacedElement.appendChild(document.createTextNode(token.value));
-            } else if (token.type === TokenType.URL_TOKEN) {
-                const img = document.createElement('img');
-                img.src = token.value;
-                img.style.opacity = '1';
-                anonymousReplacedElement.appendChild(img);
-            } else if (token.type === TokenType.FUNCTION) {
-                if (token.name === 'attr') {
-                    const attr = token.values.filter(isIdentToken);
-                    if (attr.length) {
-                        anonymousReplacedElement.appendChild(
-                            document.createTextNode(node.getAttribute(attr[0].value) || '')
-                        );
-                    }
-                } else if (token.name === 'counter') {
-                    const [counter, counterStyle] = token.values.filter(nonFunctionArgSeparator);
-                    if (counter && isIdentToken(counter)) {
-                        const counterState = this.counters.getCounterValue(counter.value);
-                        const counterType =
-                            counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(this.context, counterStyle.value)
-                                : LIST_STYLE_TYPE.DECIMAL;
-
-                        anonymousReplacedElement.appendChild(
-                            document.createTextNode(createCounterText(counterState, counterType, false))
-                        );
-                    }
-                } else if (token.name === 'counters') {
-                    const [counter, delim, counterStyle] = token.values.filter(nonFunctionArgSeparator);
-                    if (counter && isIdentToken(counter)) {
-                        const counterStates = this.counters.getCounterValues(counter.value);
-                        const counterType =
-                            counterStyle && isIdentToken(counterStyle)
-                                ? listStyleType.parse(this.context, counterStyle.value)
-                                : LIST_STYLE_TYPE.DECIMAL;
-                        const separator = delim && delim.type === TokenType.STRING_TOKEN ? delim.value : '';
-                        const text = counterStates
-                            .map((value) => createCounterText(value, counterType, false))
-                            .join(separator);
-
-                        anonymousReplacedElement.appendChild(document.createTextNode(text));
-                    }
-                } else {
-                    //   console.log('FUNCTION_TOKEN', token);
-                }
-            } else if (token.type === TokenType.IDENT_TOKEN) {
-                switch (token.value) {
-                    case 'open-quote':
-                        anonymousReplacedElement.appendChild(
-                            document.createTextNode(getQuote(declaration.quotes, this.quoteDepth++, true))
-                        );
-                        break;
-                    case 'close-quote':
-                        anonymousReplacedElement.appendChild(
-                            document.createTextNode(getQuote(declaration.quotes, --this.quoteDepth, false))
-                        );
-                        break;
-                    default:
-                        // safari doesn't parse string tokens correctly because of lack of quotes
-                        anonymousReplacedElement.appendChild(document.createTextNode(token.value));
-                }
-            }
-        });
-
-        anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
-        const newClassName =
-            pseudoElt === PseudoElementType.BEFORE
-                ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
-                : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
-
-        if (isSVGElementNode(clone)) {
-            clone.className.baseValue += newClassName;
-        } else {
-            clone.className += newClassName;
-        }
-
-        return anonymousReplacedElement;
-    }
-
-    static destroy(container: HTMLIFrameElement): boolean {
-        if (container.parentNode) {
-            container.parentNode.removeChild(container);
-            return true;
-        }
-        return false;
-    }
-}
-
-enum PseudoElementType {
-    BEFORE,
-    AFTER
-}
-
-const createIFrameContainer = (
-    ownerDocument: Document,
-    bounds: Bounds,
-    customContainer?: HTMLElement | ShadowRoot
-): HTMLIFrameElement => {
-    const cloneIframeContainer = ownerDocument.createElement('iframe');
-
-    cloneIframeContainer.className = 'html2canvas-container';
-    cloneIframeContainer.style.visibility = 'hidden';
-    cloneIframeContainer.style.position = 'fixed';
-    cloneIframeContainer.style.left = '-10000px';
-    cloneIframeContainer.style.top = '0px';
-    cloneIframeContainer.style.border = '0';
-    cloneIframeContainer.width = bounds.width.toString();
-    cloneIframeContainer.height = bounds.height.toString();
-    cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it
-    cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true');
-
-    // Use custom container if provided, otherwise use body
-    const container = customContainer || ownerDocument.body;
-    container.appendChild(cloneIframeContainer);
-
-    return cloneIframeContainer;
-};
-
-const imageReady = (img: HTMLImageElement): Promise<Event | void | string> => {
-    return new Promise((resolve) => {
-        if (img.complete) {
-            resolve();
-            return;
-        }
-        if (!img.src) {
-            resolve();
-            return;
-        }
-        img.onload = resolve;
-        img.onerror = resolve;
-    });
-};
-
-const imagesReady = (document: HTMLDocument): Promise<unknown[]> => {
-    return Promise.all([].slice.call(document.images, 0).map(imageReady));
-};
-
-const iframeLoader = (iframe: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
-    return new Promise((resolve, reject) => {
-        const cloneWindow = iframe.contentWindow;
-
-        if (!cloneWindow) {
-            return reject(`No window assigned for iframe`);
-        }
-
-        const documentClone = cloneWindow.document;
-
-        cloneWindow.onload = iframe.onload = () => {
-            cloneWindow.onload = iframe.onload = null;
-            const interval = setInterval(() => {
-                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
-                    clearInterval(interval);
-                    resolve(iframe);
-                }
-            }, 50);
-        };
-    });
-};
-
-const ignoredStyleProperties = [
-    'all', // #2476
-    'd', // #2483
-    'content' // Safari shows pseudoelements if content is set
-];
-
-export const copyCSSStyles = <T extends HTMLElement | SVGElement>(style: CSSStyleDeclaration, target: T): T => {
-    const parts: string[] = [];
-    for (let i = style.length - 1; i >= 0; i--) {
-        const property = style.item(i);
-        // fix: Chrome_138 ignore custom properties
-        if (ignoredStyleProperties.indexOf(property) === -1 && !property.startsWith('--')) {
-            const value = style.getPropertyValue(property);
-            if (value) {
-                const priority = style.getPropertyPriority(property);
-                parts.push(priority ? `${property}:${value} !${priority}` : `${property}:${value}`);
-            }
-        }
-    }
-    if (parts.length > 0) {
-        target.style.cssText = parts.join(';') + ';';
-    }
-    return target;
-};
-
-const serializeDoctype = (doctype?: DocumentType | null): string => {
-    let str = '';
-    if (doctype) {
-        str += '<!DOCTYPE ';
-        if (doctype.name) {
-            str += doctype.name;
-        }
-        if (doctype.internalSubset) {
-            str += ' ' + doctype.internalSubset.replace(/"/g, '&quot;').replace(/>/g, '&gt;');
-        }
-        if (doctype.publicId) {
-            str += ' PUBLIC "' + doctype.publicId.replace(/"/g, '&quot;') + '"';
-            if (doctype.systemId) {
-                str += ' "' + doctype.systemId.replace(/"/g, '&quot;') + '"';
-            }
-        } else if (doctype.systemId) {
-            str += ' SYSTEM "' + doctype.systemId.replace(/"/g, '&quot;') + '"';
-        }
-        str += '>';
-    }
-    return str;
-};
-
-const restoreOwnerScroll = (ownerDocument: Document | null, x: number, y: number) => {
-    if (
-        ownerDocument &&
-        ownerDocument.defaultView &&
-        (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)
-    ) {
-        ownerDocument.defaultView.scrollTo(x, y);
-    }
-};
-
-const restoreNodeScroll = ([element, x, y]: [HTMLElement, number, number]) => {
-    element.scrollLeft = x;
-    element.scrollTop = y;
-};
-
-const PSEUDO_BEFORE = ':before';
-const PSEUDO_AFTER = ':after';
-const PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before';
-const PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
-
-const PSEUDO_HIDE_ELEMENT_STYLE = `{
-    content: "" !important;
-    display: none !important;
-}`;
-
-const createPseudoHideStyles = (body: HTMLElement, cspNonce?: string) => {
-    createStyles(
-        body,
-        `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
-         .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`,
-        cspNonce
-    );
-};
-
-const createStyles = (body: HTMLElement, styles: string, cspNonce?: string) => {
-    const document = body.ownerDocument;
-    if (document) {
-        const style = document.createElement('style');
-        style.textContent = styles;
-        if (cspNonce) {
-            style.nonce = cspNonce;
-        }
-        body.appendChild(style);
-    }
-};
-
-const addBase = (targetELement: HTMLElement, baseUri: string) => {
-    const baseNode = targetELement.ownerDocument.createElement('base');
-    baseNode.href = baseUri;
-    const headEle = targetELement.getElementsByTagName('head').item(0);
-    headEle?.insertBefore(baseNode, headEle?.firstChild ?? null);
-};