@ohos-ports/html2canvas-pro 0.0.0-stage → 2.3.2-beta.0

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

@@ -0,0 +1,597 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeDoctype = exports.copyCSSStyles = exports.DocumentCloner = void 0;
+const node_type_guards_1 = require("./node-type-guards");
+const parser_1 = require("../css/syntax/parser");
+const counter_1 = require("../css/types/functions/counter");
+const list_style_type_1 = require("../css/property-descriptors/list-style-type");
+const index_1 = require("../css/index");
+const quotes_1 = require("../css/property-descriptors/quotes");
+const debugger_1 = require("../core/debugger");
+const slot_cloner_1 = require("./slot-cloner");
+/**
+ * Find the parent ShadowRoot of an element, if any
+ * @param element - The element to check
+ * @returns The parent ShadowRoot or null
+ */
+const findParentShadowRoot = (element) => {
+    let current = element;
+    while (current) {
+        // Check if we've reached a shadow root boundary
+        if (current.parentNode && current.parentNode.host) {
+            return current.parentNode;
+        }
+        // Use getRootNode to check if we're in a shadow root
+        const root = current.getRootNode();
+        if (root && root !== current.ownerDocument && root.host) {
+            return root;
+        }
+        current = current.parentNode;
+    }
+    return null;
+};
+class DocumentCloner {
+    constructor(context, element, options) {
+        this.context = context;
+        this.options = options;
+        this.scrolledElements = [];
+        this.referenceElement = element;
+        this.counters = new counter_1.CounterState();
+        this.quoteDepth = 0;
+        this.slotCloner = new slot_cloner_1.SlotCloner((node, copyStyles) => this.cloneNode(node, copyStyles), { ignoreElements: options.ignoreElements, copyStyles: options.copyStyles ?? true }, context);
+        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);
+    }
+    toIFrame(ownerDocument, windowSize) {
+        const iframe = createIFrameContainer(ownerDocument, windowSize, this.options.iframeContainer);
+        if (!iframe.contentWindow) {
+            throw new Error('Unable to find iframe window');
+        }
+        const scrollX = ownerDocument.defaultView.pageXOffset;
+        const scrollY = ownerDocument.defaultView.pageYOffset;
+        const cloneWindow = iframe.contentWindow;
+        const documentClone = 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();
+        // rawHTML is always a static, internally-generated string:
+        // serializeDoctype(document.doctype) + '<html></html>'
+        // No user-controlled input — safe for document.write in the sandbox iframe.
+        const rawHTML = (0, exports.serializeDoctype)(document.doctype) + '<html></html>';
+        try {
+            const ownerWindow = this.referenceElement.ownerDocument?.defaultView;
+            const trustedTypesFactory = ownerWindow && ownerWindow.trustedTypes;
+            let policy = trustedTypesFactory?.getPolicy?.('html2canvas-pro');
+            if (!policy && trustedTypesFactory) {
+                policy = trustedTypesFactory.createPolicy('html2canvas-pro', {
+                    createHTML: (s) => s
+                });
+            }
+            // Prefer Trusted Types when available; fallback is the same static HTML.
+            const html = policy ? policy.createHTML(rawHTML) : rawHTML;
+            // CodeQL:no - rawHTML is a static internal string, never user-controlled
+            documentClone.write(html);
+        }
+        catch (_e) {
+            // CodeQL:no - rawHTML is a static internal string, never user-controlled
+            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(node) {
+        if ((0, debugger_1.isDebugging)(node, 2 /* DebuggerType.CLONE */)) {
+            debugger;
+        }
+        if ((0, node_type_guards_1.isCanvasElement)(node)) {
+            return this.createCanvasClone(node);
+        }
+        if ((0, node_type_guards_1.isVideoElement)(node)) {
+            return this.createVideoClone(node);
+        }
+        if ((0, node_type_guards_1.isStyleElement)(node)) {
+            return this.createStyleClone(node);
+        }
+        const clone = node.cloneNode(false);
+        if ((0, node_type_guards_1.isImageElement)(clone)) {
+            if ((0, node_type_guards_1.isImageElement)(node) && node.currentSrc && node.currentSrc !== node.src) {
+                clone.src = node.currentSrc;
+                clone.srcset = '';
+            }
+            if (clone.loading === 'lazy') {
+                clone.loading = 'eager';
+            }
+        }
+        if ((0, node_type_guards_1.isCustomElement)(clone) && !(0, node_type_guards_1.isSVGElementNode)(clone)) {
+            return this.createCustomElementClone(clone);
+        }
+        return clone;
+    }
+    createCustomElementClone(node) {
+        const clone = document.createElement('div');
+        clone.className = node.className;
+        (0, exports.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) {
+        try {
+            const sheet = node.sheet;
+            if (sheet && sheet.cssRules) {
+                const css = [].slice.call(sheet.cssRules, 0).reduce((css, rule) => {
+                    if (rule && typeof rule.cssText === 'string') {
+                        return css + rule.cssText;
+                    }
+                    return css;
+                }, '');
+                const style = node.cloneNode(false);
+                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);
+        if (this.options.cspNonce) {
+            cloned.nonce = this.options.cspNonce;
+        }
+        return cloned;
+    }
+    createCanvasClone(canvas) {
+        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);
+        try {
+            clonedCanvas.width = canvas.width;
+            clonedCanvas.height = canvas.height;
+            const ctx = canvas.getContext('2d');
+            const clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true });
+            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) {
+        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, child, copyStyles) {
+        this.slotCloner.appendChildNode(clone, child, copyStyles);
+    }
+    /**
+     * Clone child nodes from source element to clone element.
+     * Delegates to SlotCloner which handles shadow DOM, slots, and light DOM.
+     */
+    cloneChildNodes(node, clone, copyStyles) {
+        this.slotCloner.cloneChildNodes(node, clone, copyStyles);
+    }
+    cloneNode(node, copyStyles) {
+        if ((0, node_type_guards_1.isTextNode)(node)) {
+            return document.createTextNode(node.data);
+        }
+        if (!node.ownerDocument) {
+            return node.cloneNode(false);
+        }
+        const window = node.ownerDocument.defaultView;
+        if (window && (0, node_type_guards_1.isElementNode)(node) && ((0, node_type_guards_1.isHTMLElementNode)(node) || (0, node_type_guards_1.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 = (0, node_type_guards_1.canHavePseudoElements)(node);
+            if (this.referenceElement === node && (0, node_type_guards_1.isHTMLElementNode)(clone)) {
+                this.clonedReferenceElement = clone;
+            }
+            if ((0, node_type_guards_1.isBodyElement)(clone)) {
+                createPseudoHideStyles(clone, this.options.cspNonce);
+            }
+            const counters = this.counters.parse(new index_1.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 ((0, node_type_guards_1.isCustomElement)(node)) {
+                copyStyles = true;
+            }
+            if (!(0, node_type_guards_1.isVideoElement)(node)) {
+                this.cloneChildNodes(node, clone, copyStyles);
+            }
+            this.counters.pop(counters);
+            if ((style && (this.options.copyStyles || (0, node_type_guards_1.isSVGElementNode)(node)) && !(0, node_type_guards_1.isIFrameElement)(node)) ||
+                copyStyles) {
+                (0, exports.copyCSSStyles)(style, clone);
+            }
+            if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
+                this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
+            }
+            if (((0, node_type_guards_1.isTextareaElement)(node) || (0, node_type_guards_1.isSelectElement)(node)) &&
+                ((0, node_type_guards_1.isTextareaElement)(clone) || (0, node_type_guards_1.isSelectElement)(clone))) {
+                clone.value = node.value;
+            }
+            return clone;
+        }
+        return node.cloneNode(false);
+    }
+    resolvePseudoContent(node, clone, style, pseudoElt) {
+        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 index_1.CSSParsedCounterDeclaration(this.context, style));
+        const declaration = new index_1.CSSParsedPseudoDeclaration(this.context, style);
+        const anonymousReplacedElement = document.createElement('html2canvaspseudoelement');
+        (0, exports.copyCSSStyles)(style, anonymousReplacedElement);
+        declaration.content.forEach((token) => {
+            if (token.type === 0 /* TokenType.STRING_TOKEN */) {
+                anonymousReplacedElement.appendChild(document.createTextNode(token.value));
+            }
+            else if (token.type === 22 /* TokenType.URL_TOKEN */) {
+                const img = document.createElement('img');
+                img.src = token.value;
+                img.style.opacity = '1';
+                anonymousReplacedElement.appendChild(img);
+            }
+            else if (token.type === 18 /* TokenType.FUNCTION */) {
+                if (token.name === 'attr') {
+                    const attr = token.values.filter(parser_1.isIdentToken);
+                    if (attr.length) {
+                        anonymousReplacedElement.appendChild(document.createTextNode(node.getAttribute(attr[0].value) || ''));
+                    }
+                }
+                else if (token.name === 'counter') {
+                    const [counter, counterStyle] = token.values.filter(parser_1.nonFunctionArgSeparator);
+                    if (counter && (0, parser_1.isIdentToken)(counter)) {
+                        const counterState = this.counters.getCounterValue(counter.value);
+                        const counterType = counterStyle && (0, parser_1.isIdentToken)(counterStyle)
+                            ? list_style_type_1.listStyleType.parse(this.context, counterStyle.value)
+                            : 3 /* LIST_STYLE_TYPE.DECIMAL */;
+                        anonymousReplacedElement.appendChild(document.createTextNode((0, counter_1.createCounterText)(counterState, counterType, false)));
+                    }
+                }
+                else if (token.name === 'counters') {
+                    const [counter, delim, counterStyle] = token.values.filter(parser_1.nonFunctionArgSeparator);
+                    if (counter && (0, parser_1.isIdentToken)(counter)) {
+                        const counterStates = this.counters.getCounterValues(counter.value);
+                        const counterType = counterStyle && (0, parser_1.isIdentToken)(counterStyle)
+                            ? list_style_type_1.listStyleType.parse(this.context, counterStyle.value)
+                            : 3 /* LIST_STYLE_TYPE.DECIMAL */;
+                        const separator = delim && delim.type === 0 /* TokenType.STRING_TOKEN */ ? delim.value : '';
+                        const text = counterStates
+                            .map((value) => (0, counter_1.createCounterText)(value, counterType, false))
+                            .join(separator);
+                        anonymousReplacedElement.appendChild(document.createTextNode(text));
+                    }
+                }
+            }
+            else if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
+                switch (token.value) {
+                    case 'open-quote':
+                        anonymousReplacedElement.appendChild(document.createTextNode((0, quotes_1.getQuote)(declaration.quotes, this.quoteDepth++, true)));
+                        break;
+                    case 'close-quote':
+                        anonymousReplacedElement.appendChild(document.createTextNode((0, quotes_1.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 ((0, node_type_guards_1.isSVGElementNode)(clone)) {
+            clone.className.baseValue += newClassName;
+        }
+        else {
+            clone.className += newClassName;
+        }
+        return anonymousReplacedElement;
+    }
+    static destroy(container) {
+        if (container.parentNode) {
+            container.parentNode.removeChild(container);
+            return true;
+        }
+        return false;
+    }
+}
+exports.DocumentCloner = DocumentCloner;
+var PseudoElementType;
+(function (PseudoElementType) {
+    PseudoElementType[PseudoElementType["BEFORE"] = 0] = "BEFORE";
+    PseudoElementType[PseudoElementType["AFTER"] = 1] = "AFTER";
+})(PseudoElementType || (PseudoElementType = {}));
+const createIFrameContainer = (ownerDocument, bounds, customContainer) => {
+    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(slot_cloner_1.IGNORE_ATTRIBUTE, 'true');
+    // Use custom container if provided, otherwise use body
+    const container = customContainer || ownerDocument.body;
+    container.appendChild(cloneIframeContainer);
+    return cloneIframeContainer;
+};
+const imageReady = (img) => {
+    return new Promise((resolve) => {
+        if (img.complete) {
+            resolve();
+            return;
+        }
+        if (!img.src) {
+            resolve();
+            return;
+        }
+        img.onload = resolve;
+        img.onerror = resolve;
+    });
+};
+const imagesReady = (document) => {
+    return Promise.all([].slice.call(document.images, 0).map(imageReady));
+};
+const iframeLoader = (iframe) => {
+    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 MAX_POLL_ATTEMPTS = 600; // 30 seconds at 50ms intervals
+            let attempts = 0;
+            const interval = setInterval(() => {
+                attempts++;
+                if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') {
+                    clearInterval(interval);
+                    resolve(iframe);
+                }
+                else if (attempts >= MAX_POLL_ATTEMPTS) {
+                    clearInterval(interval);
+                    resolve(iframe); // resolve anyway to avoid hanging
+                }
+            }, 50);
+        };
+    });
+};
+const ignoredStyleProperties = [
+    'all', // #2476
+    'd', // #2483
+    'content' // Safari shows pseudoelements if content is set
+];
+const copyCSSStyles = (style, target) => {
+    const parts = [];
+    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;
+};
+exports.copyCSSStyles = copyCSSStyles;
+/**
+ * Serialise a document type declaration to an HTML string.
+ * @internal – exported for testing only, not part of the public API.
+ */
+const serializeDoctype = (doctype) => {
+    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;
+};
+exports.serializeDoctype = serializeDoctype;
+const restoreOwnerScroll = (ownerDocument, x, y) => {
+    if (ownerDocument &&
+        ownerDocument.defaultView &&
+        (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
+        ownerDocument.defaultView.scrollTo(x, y);
+    }
+};
+const restoreNodeScroll = ([element, x, y]) => {
+    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, cspNonce) => {
+    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, styles, cspNonce) => {
+    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, baseUri) => {
+    const baseNode = targetELement.ownerDocument.createElement('base');
+    baseNode.href = baseUri;
+    const headEle = targetELement.getElementsByTagName('head').item(0);
+    headEle?.insertBefore(baseNode, headEle?.firstChild ?? null);
+};