html2canvas-pro
Version:
Screenshots with JavaScript. Next generation!
730 lines • 32.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.copyCSSStyles = exports.DocumentCloner = void 0;
const node_parser_1 = require("./node-parser");
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 IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
/**
* 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;
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 (/(iPad|iPhone|iPod)/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 baseURI of the document will be lost after documentClone.open().
* We save it before open() to preserve the original base URI for resource resolution.
* */
const baseUri = documentClone.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.trustedTypes;
let policy = trustedTypesFactory?.getPolicy?.('html2canvas-pro');
if (!policy && trustedTypesFactory) {
policy = trustedTypesFactory.createPolicy('html2canvas-pro', {
createHTML: (string) => string
});
}
if (policy) {
documentClone.write(policy.createHTML(rawHTML));
}
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(node) {
if ((0, debugger_1.isDebugging)(node, 2 /* DebuggerType.CLONE */)) {
debugger;
}
if ((0, node_parser_1.isCanvasElement)(node)) {
return this.createCanvasClone(node);
}
if ((0, node_parser_1.isVideoElement)(node)) {
return this.createVideoClone(node);
}
if ((0, node_parser_1.isStyleElement)(node)) {
return this.createStyleClone(node);
}
const clone = node.cloneNode(false);
if ((0, node_parser_1.isImageElement)(clone)) {
if ((0, node_parser_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_parser_1.isCustomElement)(clone) && !(0, node_parser_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) {
if (!(0, node_parser_1.isElementNode)(child) ||
(!(0, node_parser_1.isScriptElement)(child) &&
!child.hasAttribute(IGNORE_ATTRIBUTE) &&
(typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))) {
if (!this.options.copyStyles || !(0, node_parser_1.isElementNode)(child) || !(0, node_parser_1.isStyleElement)(child)) {
clone.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 (!(0, node_parser_1.isElementNode)(child) ||
(!(0, node_parser_1.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 || !(0, node_parser_1.isElementNode)(child) || !(0, node_parser_1.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 (!(0, node_parser_1.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 ((0, node_parser_1.isElementNode)(child) && (0, node_parser_1.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
*/
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 (!(0, node_parser_1.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 ((0, node_parser_1.isElementNode)(child) && (0, node_parser_1.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 ((0, node_parser_1.isTextNode)(node)) {
return document.createTextNode(node.data);
}
if (!node.ownerDocument) {
return node.cloneNode(false);
}
const window = node.ownerDocument.defaultView;
if (window && (0, node_parser_1.isElementNode)(node) && ((0, node_parser_1.isHTMLElementNode)(node) || (0, node_parser_1.isSVGElementNode)(node))) {
const clone = this.createElementClone(node);
clone.style.transitionProperty = 'none';
const style = window.getComputedStyle(node);
const styleBefore = window.getComputedStyle(node, ':before');
const styleAfter = window.getComputedStyle(node, ':after');
if (this.referenceElement === node && (0, node_parser_1.isHTMLElementNode)(clone)) {
this.clonedReferenceElement = clone;
}
if ((0, node_parser_1.isBodyElement)(clone)) {
createPseudoHideStyles(clone, this.options.cspNonce);
}
const counters = this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style));
const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
if ((0, node_parser_1.isCustomElement)(node)) {
copyStyles = true;
}
if (!(0, node_parser_1.isVideoElement)(node)) {
this.cloneChildNodes(node, clone, copyStyles);
}
if (before) {
clone.insertBefore(before, clone.firstChild);
}
const after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER);
if (after) {
clone.appendChild(after);
}
this.counters.pop(counters);
if ((style && (this.options.copyStyles || (0, node_parser_1.isSVGElementNode)(node)) && !(0, node_parser_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_parser_1.isTextareaElement)(node) || (0, node_parser_1.isSelectElement)(node)) &&
((0, node_parser_1.isTextareaElement)(clone) || (0, node_parser_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 {
// console.log('FUNCTION_TOKEN', token);
}
}
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_parser_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(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 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
];
const copyCSSStyles = (style, target) => {
// Edge does not provide value for cssText
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('--')) {
target.style.setProperty(property, style.getPropertyValue(property));
}
}
return target;
};
exports.copyCSSStyles = copyCSSStyles;
const serializeDoctype = (doctype) => {
let str = '';
if (doctype) {
str += '<!DOCTYPE ';
if (doctype.name) {
str += doctype.name;
}
if (doctype.internalSubset) {
str += ' ' + doctype.internalSubset.replace(/"/g, '"').replace(/>/g, '>');
}
if (doctype.publicId) {
str += ' PUBLIC "' + doctype.publicId.replace(/"/g, '"') + '"';
if (doctype.systemId) {
str += ' "' + doctype.systemId.replace(/"/g, '"') + '"';
}
}
else if (doctype.systemId) {
str += ' SYSTEM "' + doctype.systemId.replace(/"/g, '"') + '"';
}
str += '>';
}
return str;
};
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);
};
//# sourceMappingURL=document-cloner.js.map