npm - html2canvas-pro - Versions diffs - 2.2.4 → 2.3.0 - Mend

html2canvas-pro 2.2.4 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/html2canvas-pro.cjs +11218 -0
package/dist/html2canvas-pro.cjs.map +1 -0
package/dist/html2canvas-pro.esm.js +2601 -2379
package/dist/html2canvas-pro.esm.js.map +1 -1
package/dist/html2canvas-pro.js +2601 -2379
package/dist/html2canvas-pro.js.map +1 -1
package/dist/html2canvas-pro.min.js +4 -5
package/dist/lib/core/abort-helper.js +20 -0
package/dist/lib/core/background-parser.js +41 -0
package/dist/lib/core/cache-storage.js +63 -7
package/dist/lib/core/config-assembler.js +88 -0
package/dist/lib/core/lru-map.js +66 -0
package/dist/lib/core/render-element.js +24 -103
package/dist/lib/css/property-descriptors/background-position.js +1 -11
package/dist/lib/css/property-descriptors/background-size.js +3 -1
package/dist/lib/css/syntax/token-constants.js +214 -0
package/dist/lib/css/syntax/token-singletons.js +36 -0
package/dist/lib/css/syntax/token-types.js +10 -0
package/dist/lib/css/syntax/tokenizer.js +175 -307
package/dist/lib/css/types/length-percentage.js +63 -3
package/dist/lib/dom/document-cloner.js +23 -22
package/dist/lib/dom/node-parser.js +1 -21
package/dist/lib/dom/slot-cloner.js +8 -8
package/dist/lib/render/background.js +4 -1
package/dist/lib/render/canvas/background-renderer.js +27 -39
package/dist/lib/render/canvas/canvas-renderer.js +2 -2
package/dist/lib/render/canvas/effects-renderer.js +94 -32
package/dist/lib/render/canvas/text-renderer.js +68 -12
package/dist/lib/render/stacking-context.js +12 -6
package/dist/types/core/abort-helper.d.ts +12 -0
package/dist/types/core/background-parser.d.ts +16 -0
package/dist/types/core/cache-storage.d.ts +25 -0
package/dist/types/core/config-assembler.d.ts +28 -0
package/dist/types/core/lru-map.d.ts +37 -0
package/dist/types/css/syntax/token-constants.d.ts +74 -0
package/dist/types/css/syntax/token-singletons.d.ts +22 -0
package/dist/types/css/syntax/token-types.d.ts +72 -0
package/dist/types/css/syntax/tokenizer.d.ts +6 -73
package/dist/types/css/types/length-percentage.d.ts +42 -1
package/dist/types/dom/document-cloner.d.ts +5 -0
package/dist/types/dom/node-parser.d.ts +0 -2
package/dist/types/render/canvas/background-renderer.d.ts +0 -10
package/dist/types/render/canvas/effects-renderer.d.ts +42 -17
package/dist/types/render/canvas/text-renderer.d.ts +12 -0
package/dist/types/render/stacking-context.d.ts +26 -1
package/package.json +5 -7

package/dist/lib/core/abort-helper.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * AbortSignal helper utilities.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throwIfAborted = void 0;
+/**
+ * Throw a DOMException if the given AbortSignal is already aborted.
+ * Used at checkpoints throughout the rendering pipeline to support
+ * cancellable renders.
+ *
+ * @param signal - The AbortSignal to check. If undefined or not aborted, this is a no-op.
+ * @throws {DOMException} With name 'AbortError' if the signal has been aborted.
+ */
+const throwIfAborted = (signal) => {
+    if (signal?.aborted) {
+        throw new DOMException('The operation was aborted.', 'AbortError');
+    }
+};
+exports.throwIfAborted = throwIfAborted;

package/dist/lib/core/background-parser.js ADDED Viewed

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBackgroundColor = void 0;
+const color_1 = require("../css/types/color");
+const color_utilities_1 = require("../css/types/color-utilities");
+/**
+ * Resolve the background colour for the rendered canvas, following CSS
+ * background propagation rules:
+ *
+ * 1. If the target element is `<html>`, inherit the first opaque ancestor
+ *    (doc → body → fallback).
+ * 2. Otherwise use the user-supplied backgroundColor, or opaque white.
+ *
+ * @param context               - Current rendering context.
+ * @param element               - The root element being rendered.
+ * @param backgroundColorOverride - User-supplied override (string | null).
+ * @returns A resolved colour value suitable for filling the canvas.
+ */
+const parseBackgroundColor = (context, element, backgroundColorOverride) => {
+    const ownerDocument = element.ownerDocument;
+    // http://www.w3.org/TR/css3-background/#special-backgrounds
+    const documentBackgroundColor = ownerDocument.documentElement
+        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
+        : color_1.COLORS.TRANSPARENT;
+    const bodyBackgroundColor = ownerDocument.body
+        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.body).backgroundColor)
+        : color_1.COLORS.TRANSPARENT;
+    const defaultBackgroundColor = typeof backgroundColorOverride === 'string'
+        ? (0, color_1.parseColor)(context, backgroundColorOverride)
+        : backgroundColorOverride === null
+            ? color_1.COLORS.TRANSPARENT
+            : 0xffffffff;
+    return element === ownerDocument.documentElement
+        ? (0, color_utilities_1.isTransparent)(documentBackgroundColor)
+            ? (0, color_utilities_1.isTransparent)(bodyBackgroundColor)
+                ? defaultBackgroundColor
+                : bodyBackgroundColor
+            : documentBackgroundColor
+        : defaultBackgroundColor;
+};
+exports.parseBackgroundColor = parseBackgroundColor;

package/dist/lib/core/cache-storage.js CHANGED Viewed

@@ -8,6 +8,10 @@ class Cache {
         this._options = _options;
         this._cache = new Map();
         this._pendingOperations = new Map();
+        /** When true, addImage() collects URLs without starting loads. */
+        this._deferMode = false;
+        /** URLs collected during defer mode, pending batch preload. */
+        this._collectedUrls = new Set();
         // Default cache size: 100 items
         this.maxSize = _options.maxCacheSize ?? 100;
         if (this.maxSize < 1) {
@@ -18,7 +22,48 @@ class Cache {
                 `Consider using a smaller value (recommended: 100-1000).`);
         }
     }
+    /**
+     * Enter defer mode: subsequent addImage() calls only collect URLs.
+     * Call preloadAll() to exit defer mode and batch-load all URLs.
+     */
+    startDefer() {
+        this._deferMode = true;
+    }
+    /**
+     * Exit defer mode and load all collected URLs in parallel, respecting
+     * an optional concurrency cap to avoid overwhelming the browser's network
+     * stack (default: 10 concurrent loads).
+     * After this call returns, all images are either loaded (cache hit) or
+     * failed (logged). Subsequent cache.match() calls return immediately.
+     *
+     * @param concurrency - Max concurrent image loads (1–100, default 10).
+     */
+    async preloadAll(concurrency = 10) {
+        this._deferMode = false;
+        const urls = Array.from(this._collectedUrls);
+        this._collectedUrls.clear();
+        if (urls.length === 0) {
+            return;
+        }
+        const limit = Math.max(1, Math.min(concurrency, 100));
+        this.context.logger.debug(`Preloading ${urls.length} image(s) with concurrency ${limit}`);
+        // Load in batches to respect the concurrency cap while maximising
+        // parallelism within each batch.
+        for (let i = 0; i < urls.length; i += limit) {
+            const batch = urls.slice(i, i + limit);
+            const operations = batch.map((url) => this._addImageWithPending(url));
+            await Promise.allSettled(operations);
+        }
+    }
     addImage(src) {
+        // ── Defer mode: collect only ──────────────────────────────
+        if (this._deferMode) {
+            if (!this.has(src) && (isBlobImage(src) || isRenderable(src))) {
+                this._collectedUrls.add(src);
+            }
+            return Promise.resolve();
+        }
+        // ── Normal mode: immediate load ───────────────────────────
         // Wait for any pending operations on this key
         const pending = this._pendingOperations.get(src);
         if (pending) {
@@ -32,16 +77,27 @@ class Cache {
             return Promise.resolve();
         }
         if (isBlobImage(src) || isRenderable(src)) {
-            // Create a pending operation to ensure atomicity
-            const operation = this._addImageInternal(src);
-            this._pendingOperations.set(src, operation);
-            operation.finally(() => {
-                this._pendingOperations.delete(src);
-            });
-            return operation;
+            return this._addImageWithPending(src);
         }
         return Promise.resolve();
     }
+    /**
+     * Shared helper: enqueues loading for a single URL with pending-operation
+     * deduplication and error swallowing. Used by both addImage() (normal mode)
+     * and preloadAll() (batch mode).
+     */
+    _addImageWithPending(src) {
+        const pending = this._pendingOperations.get(src);
+        if (pending) {
+            return pending;
+        }
+        const operation = this._addImageInternal(src);
+        this._pendingOperations.set(src, operation);
+        operation.finally(() => {
+            this._pendingOperations.delete(src);
+        });
+        return operation;
+    }
     async _addImageInternal(src) {
         const timeoutMs = this._options.imageTimeout ?? 15000;
         const imageWithTimeout = this.withTimeout(this.loadImage(src), timeoutMs, `Timed out (${timeoutMs}ms) loading image`);

package/dist/lib/core/config-assembler.js ADDED Viewed

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assembleRenderOptions = exports.assembleCloneOptions = exports.assembleWindowOptions = exports.assembleContextOptions = exports.assembleResourceOptions = exports.coerceNumberOptions = void 0;
+const constants_1 = require("./constants");
+/**
+ * Coerce known numeric options from string (or other) values to actual numbers.
+ * Mutates the opts object in place — this is intentionally a normalisation
+ * (not pure) step that runs once at the beginning of renderElement.
+ */
+const coerceNumberOptions = (opts) => {
+    const numKeys = [
+        'scale',
+        'width',
+        'height',
+        'imageTimeout',
+        'x',
+        'y',
+        'windowWidth',
+        'windowHeight',
+        'scrollX',
+        'scrollY'
+    ];
+    numKeys.forEach((key) => {
+        const v = opts[key];
+        if (v !== undefined && v !== null && typeof v !== 'number') {
+            const n = Number(v);
+            if (!Number.isNaN(n)) {
+                opts[key] = n;
+            }
+        }
+    });
+};
+exports.coerceNumberOptions = coerceNumberOptions;
+/** Assemble resource loading options from user-provided Options. */
+const assembleResourceOptions = (opts) => ({
+    allowTaint: opts.allowTaint ?? false,
+    imageTimeout: opts.imageTimeout ?? constants_1.DEFAULT_IMAGE_TIMEOUT_MS,
+    proxy: opts.proxy,
+    useCORS: opts.useCORS ?? false,
+    customIsSameOrigin: opts.customIsSameOrigin,
+    maxCacheSize: opts.maxCacheSize
+});
+exports.assembleResourceOptions = assembleResourceOptions;
+/** Assemble context (logging + cache) options, extending resource options. */
+const assembleContextOptions = (opts, config, resourceOptions) => ({
+    logging: opts.logging ?? true,
+    cache: opts.cache ?? config.cache,
+    ...resourceOptions
+});
+exports.assembleContextOptions = assembleContextOptions;
+const DEFAULT_WINDOW_WIDTH = 800;
+const DEFAULT_WINDOW_HEIGHT = 600;
+const DEFAULT_SCROLL = 0;
+const assembleWindowOptions = (opts, defaultView) => {
+    const win = defaultView;
+    return {
+        windowWidth: opts.windowWidth ?? win.innerWidth ?? DEFAULT_WINDOW_WIDTH,
+        windowHeight: opts.windowHeight ?? win.innerHeight ?? DEFAULT_WINDOW_HEIGHT,
+        scrollX: opts.scrollX ?? win.pageXOffset ?? DEFAULT_SCROLL,
+        scrollY: opts.scrollY ?? win.pageYOffset ?? DEFAULT_SCROLL
+    };
+};
+exports.assembleWindowOptions = assembleWindowOptions;
+/** Assemble DOM cloning options. */
+const assembleCloneOptions = (opts, config, foreignObjectRendering) => ({
+    allowTaint: opts.allowTaint ?? false,
+    onclone: opts.onclone,
+    ignoreElements: opts.ignoreElements,
+    iframeContainer: opts.iframeContainer,
+    inlineImages: foreignObjectRendering,
+    copyStyles: foreignObjectRendering,
+    cspNonce: opts.cspNonce ?? config.cspNonce
+});
+exports.assembleCloneOptions = assembleCloneOptions;
+/** Assemble canvas rendering options. */
+const assembleRenderOptions = (opts, backgroundColor, left, top, width, height, devicePixelRatio) => ({
+    canvas: opts.canvas,
+    backgroundColor,
+    signal: opts.signal,
+    scale: opts.scale ?? devicePixelRatio ?? 1,
+    x: (opts.x ?? 0) + left,
+    y: (opts.y ?? 0) + top,
+    width: opts.width ?? Math.ceil(width),
+    height: opts.height ?? Math.ceil(height),
+    imageSmoothing: opts.imageSmoothing,
+    imageSmoothingQuality: opts.imageSmoothingQuality
+});
+exports.assembleRenderOptions = assembleRenderOptions;

package/dist/lib/core/lru-map.js ADDED Viewed

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LRUMap = void 0;
+/**
+ * Generic LRU (Least-Recently-Used) wrapper over a native `Map`.
+ *
+ * Both the CSS parse cache and the background pattern cache implement the
+ * same LRU eviction pattern using Map's insertion-order guarantee.  This
+ * tiny utility centralises that logic so it can be reused without
+ * duplication.
+ *
+ * Usage:
+ * ```ts
+ * const cache = new LRUMap<string, CanvasPattern>(50);
+ * const entry = cache.get(key); // promotes if found, returns undefined otherwise
+ * cache.set(key, value);         // evicts oldest entry when at capacity
+ * ```
+ */
+class LRUMap {
+    constructor(maxSize) {
+        this.maxSize = maxSize;
+        this._map = new Map();
+    }
+    /**
+     * Get a value by key.
+     * On cache hit the entry is promoted to the end of the Map (most-recently-used).
+     * Returns `undefined` on miss.
+     */
+    get(key) {
+        if (!this._map.has(key)) {
+            return undefined;
+        }
+        // Delete-then-set promotes the entry to MRU position.
+        const value = this._map.get(key);
+        this._map.delete(key);
+        this._map.set(key, value);
+        return value;
+    }
+    /**
+     * Insert or update a key-value pair.
+     * If the key already exists it is moved to MRU position.  If the map is
+     * at capacity the least-recently-used entry (oldest insertion order) is
+     * evicted before inserting.
+     */
+    set(key, value) {
+        if (this._map.has(key)) {
+            this._map.delete(key);
+        }
+        else if (this._map.size >= this.maxSize) {
+            const oldestKey = this._map.keys().next().value;
+            if (oldestKey !== undefined) {
+                this._map.delete(oldestKey);
+            }
+        }
+        this._map.set(key, value);
+    }
+    /** Current number of entries. */
+    get size() {
+        return this._map.size;
+    }
+    /** Remove all entries. */
+    clear() {
+        this._map.clear();
+    }
+}
+exports.LRUMap = LRUMap;

package/dist/lib/core/render-element.js CHANGED Viewed

@@ -3,39 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderElement = void 0;
 const bounds_1 = require("../css/layout/bounds");
 const color_1 = require("../css/types/color");
-const color_utilities_1 = require("../css/types/color-utilities");
 const document_cloner_1 = require("../dom/document-cloner");
+const node_type_guards_1 = require("../dom/node-type-guards");
 const node_parser_1 = require("../dom/node-parser");
 const canvas_renderer_1 = require("../render/canvas/canvas-renderer");
 const foreignobject_renderer_1 = require("../render/canvas/foreignobject-renderer");
 const context_1 = require("./context");
 const validator_1 = require("./validator");
 const performance_monitor_1 = require("./performance-monitor");
-const coerceNumberOptions = (opts) => {
-    const numKeys = [
-        'scale',
-        'width',
-        'height',
-        'imageTimeout',
-        'x',
-        'y',
-        'windowWidth',
-        'windowHeight',
-        'scrollX',
-        'scrollY'
-    ];
-    numKeys.forEach((key) => {
-        const v = opts[key];
-        if (v !== undefined && v !== null && typeof v !== 'number') {
-            const n = Number(v);
-            if (!Number.isNaN(n)) {
-                opts[key] = n;
-            }
-        }
-    });
-};
+const abort_helper_1 = require("./abort-helper");
+const config_assembler_1 = require("./config-assembler");
+const background_parser_1 = require("./background-parser");
 const renderElement = async (element, opts, config) => {
-    coerceNumberOptions(opts);
+    (0, config_assembler_1.coerceNumberOptions)(opts);
     // Input validation (unless explicitly skipped)
     if (!opts.skipValidation) {
         const validator = opts.validator || (0, validator_1.createDefaultValidator)();
@@ -59,29 +39,9 @@ const renderElement = async (element, opts, config) => {
     if (!defaultView) {
         throw new Error(`Document is not attached to a Window`);
     }
-    const resourceOptions = {
-        allowTaint: opts.allowTaint ?? false,
-        imageTimeout: opts.imageTimeout ?? 15000,
-        proxy: opts.proxy,
-        useCORS: opts.useCORS ?? false,
-        customIsSameOrigin: opts.customIsSameOrigin,
-        maxCacheSize: opts.maxCacheSize
-    };
-    const contextOptions = {
-        logging: opts.logging ?? true,
-        cache: opts.cache ?? config.cache,
-        ...resourceOptions
-    };
-    const DEFAULT_WINDOW_WIDTH = 800;
-    const DEFAULT_WINDOW_HEIGHT = 600;
-    const DEFAULT_SCROLL = 0;
-    const win = defaultView;
-    const windowOptions = {
-        windowWidth: opts.windowWidth ?? win.innerWidth ?? DEFAULT_WINDOW_WIDTH,
-        windowHeight: opts.windowHeight ?? win.innerHeight ?? DEFAULT_WINDOW_HEIGHT,
-        scrollX: opts.scrollX ?? win.pageXOffset ?? DEFAULT_SCROLL,
-        scrollY: opts.scrollY ?? win.pageYOffset ?? DEFAULT_SCROLL
-    };
+    const resourceOptions = (0, config_assembler_1.assembleResourceOptions)(opts);
+    const contextOptions = (0, config_assembler_1.assembleContextOptions)(opts, config, resourceOptions);
+    const windowOptions = (0, config_assembler_1.assembleWindowOptions)(opts, defaultView);
     const windowBounds = new bounds_1.Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
     const context = new context_1.Context(contextOptions, windowBounds, config);
     const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
@@ -91,19 +51,9 @@ const renderElement = async (element, opts, config) => {
         height: windowOptions.windowHeight
     });
     const signal = opts.signal;
-    if (signal?.aborted) {
-        throw new DOMException('The operation was aborted.', 'AbortError');
-    }
+    (0, abort_helper_1.throwIfAborted)(signal);
     const foreignObjectRendering = opts.foreignObjectRendering ?? false;
-    const cloneOptions = {
-        allowTaint: opts.allowTaint ?? false,
-        onclone: opts.onclone,
-        ignoreElements: opts.ignoreElements,
-        iframeContainer: opts.iframeContainer,
-        inlineImages: foreignObjectRendering,
-        copyStyles: foreignObjectRendering,
-        cspNonce: opts.cspNonce ?? config.cspNonce
-    };
+    const cloneOptions = (0, config_assembler_1.assembleCloneOptions)(opts, config, foreignObjectRendering);
     context.logger.debug(`Starting document clone with size ${windowBounds.width}x${windowBounds.height} scrolled to ${-windowBounds.left},${-windowBounds.top}`);
     perfMonitor.start('clone');
     const documentCloner = new document_cloner_1.DocumentCloner(context, element, cloneOptions);
@@ -117,24 +67,13 @@ const renderElement = async (element, opts, config) => {
         if (opts.removeContainer ?? true) {
             document_cloner_1.DocumentCloner.destroy(container);
         }
-        throw new DOMException('The operation was aborted.', 'AbortError');
+        (0, abort_helper_1.throwIfAborted)(signal);
     }
-    const { width, height, left, top } = (0, node_parser_1.isBodyElement)(clonedElement) || (0, node_parser_1.isHTMLElement)(clonedElement)
+    const { width, height, left, top } = (0, node_type_guards_1.isBodyElement)(clonedElement) || (0, node_type_guards_1.isHTMLElement)(clonedElement)
         ? (0, bounds_1.parseDocumentSize)(clonedElement.ownerDocument)
         : (0, bounds_1.parseBounds)(context, clonedElement);
-    const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
-    const renderOptions = {
-        canvas: opts.canvas,
-        backgroundColor,
-        signal,
-        scale: opts.scale ?? defaultView.devicePixelRatio ?? 1,
-        x: (opts.x ?? 0) + left,
-        y: (opts.y ?? 0) + top,
-        width: opts.width ?? Math.ceil(width),
-        height: opts.height ?? Math.ceil(height),
-        imageSmoothing: opts.imageSmoothing,
-        imageSmoothingQuality: opts.imageSmoothingQuality
-    };
+    const backgroundColor = (0, background_parser_1.parseBackgroundColor)(context, clonedElement, opts.backgroundColor);
+    const renderOptions = (0, config_assembler_1.assembleRenderOptions)(opts, backgroundColor, left, top, width, height, defaultView.devicePixelRatio ?? 1);
     let canvas;
     let root;
     try {
@@ -149,19 +88,23 @@ const renderElement = async (element, opts, config) => {
             context.logger.debug(`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`);
             context.logger.debug(`Starting DOM parsing`);
             perfMonitor.start('parse');
-            if (signal?.aborted) {
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            }
+            (0, abort_helper_1.throwIfAborted)(signal);
+            // Enter defer mode: collect all image URLs during parse without
+            // starting individual loads. This avoids serialised loading in
+            // DOM-traversal order.
+            context.cache.startDefer();
             root = (0, node_parser_1.parseTree)(context, clonedElement);
             perfMonitor.end('parse');
+            // Batch-preload all collected images in parallel before rendering.
+            perfMonitor.start('preload');
+            await context.cache.preloadAll();
+            perfMonitor.end('preload');
             if (backgroundColor === root.styles.backgroundColor) {
                 root.styles.backgroundColor = color_1.COLORS.TRANSPARENT;
             }
             context.logger.debug(`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`);
             perfMonitor.start('render');
-            if (signal?.aborted) {
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            }
+            (0, abort_helper_1.throwIfAborted)(signal);
             const renderer = new canvas_renderer_1.CanvasRenderer(context, renderOptions);
             canvas = await renderer.render(root);
             perfMonitor.end('render');
@@ -187,25 +130,3 @@ const renderElement = async (element, opts, config) => {
     }
 };
 exports.renderElement = renderElement;
-const parseBackgroundColor = (context, element, backgroundColorOverride) => {
-    const ownerDocument = element.ownerDocument;
-    // http://www.w3.org/TR/css3-background/#special-backgrounds
-    const documentBackgroundColor = ownerDocument.documentElement
-        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
-        : color_1.COLORS.TRANSPARENT;
-    const bodyBackgroundColor = ownerDocument.body
-        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.body).backgroundColor)
-        : color_1.COLORS.TRANSPARENT;
-    const defaultBackgroundColor = typeof backgroundColorOverride === 'string'
-        ? (0, color_1.parseColor)(context, backgroundColorOverride)
-        : backgroundColorOverride === null
-            ? color_1.COLORS.TRANSPARENT
-            : 0xffffffff;
-    return element === ownerDocument.documentElement
-        ? (0, color_utilities_1.isTransparent)(documentBackgroundColor)
-            ? (0, color_utilities_1.isTransparent)(bodyBackgroundColor)
-                ? defaultBackgroundColor
-                : bodyBackgroundColor
-            : documentBackgroundColor
-        : defaultBackgroundColor;
-};

package/dist/lib/css/property-descriptors/background-position.js CHANGED Viewed

@@ -12,17 +12,7 @@ exports.backgroundPosition = {
         return (0, parser_1.parseFunctionArgs)(tokens)
             .map((values) => {
             // Convert calc() to length-percentage tokens, keep other length-percentage as is
-            return values
-                .map((value) => {
-                if ((0, length_percentage_1.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 (0, length_percentage_1.evaluateCalcToLengthPercentage)(value, 0);
-                }
-                return (0, length_percentage_1.isLengthPercentage)(value) ? value : null;
-            })
-                .filter((v) => v !== null);
+            return values.map(length_percentage_1.parseOptionalCalcOrLength).filter((v) => v !== null);
         })
             .map(length_percentage_1.parseLengthPercentageTuple);
     }

package/dist/lib/css/property-descriptors/background-size.js CHANGED Viewed

@@ -15,7 +15,9 @@ exports.backgroundSize = {
     prefix: false,
     type: 1 /* PropertyDescriptorParsingType.LIST */,
     parse: (_context, tokens) => {
-        return (0, parser_1.parseFunctionArgs)(tokens).map((values) => values.filter(isBackgroundSizeInfoToken));
+        return (0, parser_1.parseFunctionArgs)(tokens).map((values) => values
+            .map((value) => (isBackgroundSizeInfoToken(value) ? value : (0, length_percentage_1.parseOptionalCalcOrLength)(value)))
+            .filter((v) => v !== null));
     }
 };
 const isBackgroundSizeInfoToken = (value) => (0, parser_1.isIdentToken)(value) || (0, length_percentage_1.isLengthPercentage)(value);