@remotion/web-renderer 4.0.415 → 4.0.417

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.415",
+	"version": "4.0.417",
 	"main": "dist/index.js",
 	"type": "module",
 	"sideEffects": false,
@@ -19,16 +19,16 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.415",
-		"remotion": "4.0.415",
+		"@remotion/licensing": "4.0.417",
+		"remotion": "4.0.417",
 		"mediabunny": "1.29.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.415",
-		"@remotion/player": "4.0.415",
-		"@remotion/media": "4.0.415",
-		"@remotion/three": "4.0.415",
+		"@remotion/eslint-config-internal": "4.0.417",
+		"@remotion/player": "4.0.417",
+		"@remotion/media": "4.0.417",
+		"@remotion/three": "4.0.417",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260105.1",
 		"@vitejs/plugin-react": "4.1.0",

package/dist/add-sample.js

@@ -1,20 +0,0 @@
-import { AudioSample, VideoSample } from 'mediabunny';
-export const addVideoSampleAndCloseFrame = async (frameToEncode, videoSampleSource) => {
-    const sample = new VideoSample(frameToEncode);
-    try {
-        await videoSampleSource.add(sample);
-    }
-    finally {
-        sample.close();
-        frameToEncode.close();
-    }
-};
-export const addAudioSample = async (audio, audioSampleSource) => {
-    const sample = new AudioSample(audio);
-    try {
-        await audioSampleSource.add(sample);
-    }
-    finally {
-        sample.close();
-    }
-};

package/dist/artifact.js

@@ -1,56 +0,0 @@
-import { NoReactInternals } from 'remotion/no-react';
-export const onlyArtifact = async ({ assets, frameBuffer, }) => {
-    const artifacts = assets.filter((asset) => asset.type === 'artifact');
-    let frameBufferUint8 = null;
-    const result = [];
-    for (const artifact of artifacts) {
-        if (artifact.contentType === 'binary' || artifact.contentType === 'text') {
-            result.push({
-                frame: artifact.frame,
-                content: artifact.content,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        if (artifact.contentType === 'thumbnail') {
-            if (frameBuffer === null) {
-                // A thumbnail artifact was defined to be emitted, but the output was not a video.
-                // Also, in Lambda, there are extra frames which are not video frames.
-                // This could happen if a thumbnail is unconditionally emitted.
-                continue;
-            }
-            const ab = frameBuffer instanceof Blob
-                ? await frameBuffer.arrayBuffer()
-                : new Uint8Array(await (await frameBuffer.convertToBlob({ type: 'image/png' })).arrayBuffer());
-            frameBufferUint8 = new Uint8Array(ab);
-            result.push({
-                frame: artifact.frame,
-                content: frameBufferUint8,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        throw new Error('Unknown artifact type: ' + artifact);
-    }
-    return result.filter(NoReactInternals.truthy);
-};
-export const handleArtifacts = () => {
-    const previousArtifacts = [];
-    const handle = async ({ imageData, frame, assets: artifactAssets, onArtifact, }) => {
-        const artifacts = await onlyArtifact({
-            assets: artifactAssets,
-            frameBuffer: imageData,
-        });
-        for (const artifact of artifacts) {
-            const previousArtifact = previousArtifacts.find((a) => a.filename === artifact.filename);
-            if (previousArtifact) {
-                throw new Error(`An artifact with output "${artifact.filename}" was already registered at frame ${previousArtifact.frame}, but now registered again at frame ${frame}. Artifacts must have unique names. https://remotion.dev/docs/artifacts`);
-            }
-            onArtifact(artifact);
-            previousArtifacts.push({ frame, filename: artifact.filename });
-        }
-    };
-    return { handle };
-};

package/dist/audio.js

@@ -1,42 +0,0 @@
-const TARGET_NUMBER_OF_CHANNELS = 2;
-const TARGET_SAMPLE_RATE = 48000;
-function mixAudio(waves, length) {
-    if (waves.length === 1 && waves[0].length === length) {
-        return waves[0];
-    }
-    const mixed = new Int16Array(length);
-    if (waves.length === 1) {
-        mixed.set(waves[0].subarray(0, length));
-        return mixed;
-    }
-    for (let i = 0; i < length; i++) {
-        const sum = waves.reduce((acc, wave) => {
-            var _a;
-            return acc + ((_a = wave[i]) !== null && _a !== void 0 ? _a : 0);
-        }, 0);
-        // Clamp to Int16 range
-        mixed[i] = Math.max(-32768, Math.min(32767, sum));
-    }
-    return mixed;
-}
-export const onlyInlineAudio = ({ assets, fps, frame, }) => {
-    const inlineAudio = assets.filter((asset) => asset.type === 'inline-audio');
-    if (inlineAudio.length === 0) {
-        return null;
-    }
-    const expectedLength = Math.round((TARGET_NUMBER_OF_CHANNELS * TARGET_SAMPLE_RATE) / fps);
-    for (const asset of inlineAudio) {
-        if (asset.toneFrequency !== 1) {
-            throw new Error('Setting the toneFrequency is not supported yet in web rendering.');
-        }
-    }
-    const mixedAudio = mixAudio(inlineAudio.map((asset) => asset.audio), expectedLength);
-    return new AudioData({
-        data: mixedAudio,
-        format: 's16',
-        numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
-        numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
-        sampleRate: TARGET_SAMPLE_RATE,
-        timestamp: (frame / fps) * 1000000,
-    });
-};

package/dist/calculate-transforms.d.ts

@@ -1,9 +0,0 @@
-export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
-    dimensions: DOMRect;
-    totalMatrix: DOMMatrix;
-    reset: () => void;
-    nativeTransformOrigin: {
-        x: number;
-        y: number;
-    };
-};

package/dist/calculate-transforms.js

@@ -1,74 +0,0 @@
-import { parseTransformOrigin } from './parse-transform-origin';
-const getInternalTransformOrigin = (transform) => {
-    var _a;
-    const centerX = transform.boundingClientRect.width / 2;
-    const centerY = transform.boundingClientRect.height / 2;
-    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
-        x: centerX,
-        y: centerY,
-    };
-    return origin;
-};
-const getGlobalTransformOrigin = (transform) => {
-    const { x: originX, y: originY } = getInternalTransformOrigin(transform);
-    return {
-        x: originX + transform.boundingClientRect.left,
-        y: originY + transform.boundingClientRect.top,
-    };
-};
-export const calculateTransforms = (element) => {
-    // Compute the cumulative transform by traversing parent nodes
-    let parent = element;
-    const transforms = [];
-    const toReset = [];
-    while (parent) {
-        const computedStyle = getComputedStyle(parent);
-        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
-            parent === element) {
-            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
-                ? undefined
-                : computedStyle.transform;
-            const matrix = new DOMMatrix(toParse);
-            const { transform } = parent.style;
-            parent.style.transform = 'none';
-            transforms.push({
-                matrix,
-                rect: parent,
-                transformOrigin: computedStyle.transformOrigin,
-                boundingClientRect: null,
-            });
-            const parentRef = parent;
-            toReset.push(() => {
-                parentRef.style.transform = transform;
-            });
-        }
-        parent = parent.parentElement;
-    }
-    for (const transform of transforms) {
-        transform.boundingClientRect = transform.rect.getBoundingClientRect();
-    }
-    const dimensions = transforms[0].boundingClientRect;
-    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
-    const totalMatrix = new DOMMatrix();
-    for (const transform of transforms.slice().reverse()) {
-        if (!transform.boundingClientRect) {
-            throw new Error('Bounding client rect not found');
-        }
-        const globalTransformOrigin = getGlobalTransformOrigin(transform);
-        const transformMatrix = new DOMMatrix()
-            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
-            .multiply(transform.matrix)
-            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
-        totalMatrix.multiplySelf(transformMatrix);
-    }
-    return {
-        dimensions,
-        totalMatrix,
-        reset: () => {
-            for (const reset of toReset) {
-                reset();
-            }
-        },
-        nativeTransformOrigin,
-    };
-};

package/dist/can-use-webfs-target.js

@@ -1,19 +0,0 @@
-export const canUseWebFsWriter = async () => {
-    if (!('storage' in navigator)) {
-        return false;
-    }
-    if (!('getDirectory' in navigator.storage)) {
-        return false;
-    }
-    try {
-        const directoryHandle = await navigator.storage.getDirectory();
-        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
-            create: true,
-        });
-        const canUse = fileHandle.createWritable !== undefined;
-        return canUse;
-    }
-    catch (_a) {
-        return false;
-    }
-};

package/dist/composable.d.ts

@@ -1,10 +0,0 @@
-export type Composable = {
-    type: 'canvas';
-    element: HTMLCanvasElement;
-} | {
-    type: 'svg';
-    element: SVGSVGElement;
-} | {
-    type: 'img';
-    element: HTMLImageElement;
-};

package/dist/composable.js

@@ -1 +0,0 @@
-export {};

package/dist/compose-canvas.d.ts

@@ -1 +0,0 @@
-export declare const composeCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/compose-canvas.js

@@ -1,12 +0,0 @@
-import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
-export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
-    context.setTransform(totalMatrix);
-    const drawable = canvas instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(canvas)
-        : canvas;
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    context.setTransform(new DOMMatrix());
-    reset();
-};

package/dist/compose-svg.d.ts

@@ -1 +0,0 @@
-export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/compose-svg.js

@@ -1,34 +0,0 @@
-export const turnSvgIntoDrawable = (svg) => {
-    const originalTransform = svg.style.transform;
-    const originalTransformOrigin = svg.style.transformOrigin;
-    const originalMarginLeft = svg.style.marginLeft;
-    const originalMarginRight = svg.style.marginRight;
-    const originalMarginTop = svg.style.marginTop;
-    const originalMarginBottom = svg.style.marginBottom;
-    svg.style.transform = 'none';
-    svg.style.transformOrigin = '';
-    // Margins were already included in the positioning calculation,
-    // so we need to remove them to avoid double counting.
-    svg.style.marginLeft = '0';
-    svg.style.marginRight = '0';
-    svg.style.marginTop = '0';
-    svg.style.marginBottom = '0';
-    const svgData = new XMLSerializer().serializeToString(svg);
-    svg.style.marginLeft = originalMarginLeft;
-    svg.style.marginRight = originalMarginRight;
-    svg.style.marginTop = originalMarginTop;
-    svg.style.marginBottom = originalMarginBottom;
-    svg.style.transform = originalTransform;
-    svg.style.transformOrigin = originalTransformOrigin;
-    return new Promise((resolve, reject) => {
-        const image = new Image();
-        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
-        image.onload = function () {
-            resolve(image);
-        };
-        image.onerror = () => {
-            reject(new Error('Failed to convert SVG to image'));
-        };
-        image.src = url;
-    });
-};

package/dist/compose.js

@@ -1,85 +0,0 @@
-import { drawDomElement } from './drawing/draw-dom-element';
-import { processNode } from './drawing/process-node';
-import { handleTextNode } from './drawing/text/handle-text-node';
-import { createTreeWalkerCleanupAfterChildren } from './tree-walker-cleanup-after-children';
-import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
-    if (node instanceof HTMLElement || node instanceof SVGElement) {
-        return processNode({
-            element: node,
-            context,
-            draw: drawDomElement(node),
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement,
-        });
-    }
-    if (node instanceof Text) {
-        return handleTextNode({
-            node,
-            context,
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement,
-            onlyBackgroundClip,
-        });
-    }
-    throw new Error('Unknown node type');
-};
-const getFilterFunction = (node) => {
-    if (!(node instanceof Element)) {
-        // Must be a text node!
-        return NodeFilter.FILTER_ACCEPT;
-    }
-    // SVG does have children, but we process SVG elements in its
-    // entirety
-    if (node.parentElement instanceof SVGSVGElement) {
-        return NodeFilter.FILTER_REJECT;
-    }
-    const computedStyle = getComputedStyle(node);
-    if (computedStyle.display === 'none') {
-        return NodeFilter.FILTER_REJECT;
-    }
-    return NodeFilter.FILTER_ACCEPT;
-};
-export const compose = async ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }) => {
-    const treeWalker = document.createTreeWalker(element, onlyBackgroundClip
-        ? NodeFilter.SHOW_TEXT
-        : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
-    // Skip to the first text node
-    if (onlyBackgroundClip) {
-        treeWalker.nextNode();
-        if (!treeWalker.currentNode) {
-            return;
-        }
-    }
-    const { checkCleanUpAtBeginningOfIteration, addCleanup, cleanupInTheEndOfTheIteration, } = createTreeWalkerCleanupAfterChildren(treeWalker);
-    while (true) {
-        checkCleanUpAtBeginningOfIteration();
-        const val = await walkOverNode({
-            node: treeWalker.currentNode,
-            context,
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement: element,
-            onlyBackgroundClip,
-        });
-        if (val.type === 'skip-children') {
-            if (!skipToNextNonDescendant(treeWalker)) {
-                break;
-            }
-        }
-        else {
-            if (val.cleanupAfterChildren) {
-                addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
-            }
-            if (!treeWalker.nextNode()) {
-                break;
-            }
-        }
-    }
-    cleanupInTheEndOfTheIteration();
-};

package/dist/create-scaffold.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createRef } from 'react';
-import { flushSync } from 'react-dom';
-import ReactDOM from 'react-dom/client';
-import { Internals } from 'remotion';
-import { UpdateTime } from './update-time';
-import { withResolvers } from './with-resolvers';
-export async function createScaffold({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, }) {
-    if (!ReactDOM.createRoot) {
-        throw new Error('@remotion/web-renderer requires React 18 or higher');
-    }
-    const div = document.createElement('div');
-    // Match same behavior as in portal-node.ts
-    div.style.position = 'fixed';
-    div.style.display = 'flex';
-    div.style.flexDirection = 'column';
-    div.style.backgroundColor = 'transparent';
-    div.style.width = `${width}px`;
-    div.style.height = `${height}px`;
-    div.style.zIndex = '-9999';
-    div.style.top = '0';
-    div.style.left = '0';
-    div.style.right = '0';
-    div.style.bottom = '0';
-    div.style.visibility = 'hidden';
-    div.style.pointerEvents = 'none';
-    const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
-    div.className = scaffoldClassName;
-    const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, 'white'));
-    document.body.appendChild(div);
-    const { promise, resolve, reject } = withResolvers();
-    // TODO: This might not work in React 18
-    const root = ReactDOM.createRoot(div, {
-        onUncaughtError: (err) => {
-            reject(err);
-        },
-    });
-    const delayRenderScope = {
-        remotion_renderReady: true,
-        remotion_delayRenderTimeouts: {},
-        remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
-        remotion_attempt: 0,
-        remotion_delayRenderHandles: [],
-    };
-    const timeUpdater = createRef();
-    const collectAssets = createRef();
-    flushSync(() => {
-        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext.Provider, { value: {
-                    isStudio: false,
-                    isRendering: true,
-                    isPlayer: false,
-                    isReadOnlyStudio: false,
-                    isClientSideRendering: true,
-                }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManager.Provider, { value: {
-                            compositions: [
-                                {
-                                    id,
-                                    // @ts-expect-error
-                                    component: Component,
-                                    nonce: 0,
-                                    defaultProps: {},
-                                    folderName: null,
-                                    parentFolderName: null,
-                                    schema: schema !== null && schema !== void 0 ? schema : null,
-                                    calculateMetadata: null,
-                                    durationInFrames,
-                                    fps,
-                                    height,
-                                    width,
-                                },
-                            ],
-                            canvasContent: {
-                                type: 'composition',
-                                compositionId: id,
-                            },
-                            currentCompositionMetadata: {
-                                props: resolvedProps,
-                                durationInFrames,
-                                fps,
-                                height,
-                                width,
-                                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
-                                defaultOutName: defaultOutName !== null && defaultOutName !== void 0 ? defaultOutName : null,
-                                defaultVideoImageFormat: null,
-                                defaultPixelFormat: null,
-                                defaultProResProfile: null,
-                            },
-                            folders: [],
-                        }, children: _jsx(Internals.RenderAssetManagerProvider, { collectAssets: collectAssets, children: _jsx(UpdateTime, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, compId: id, initialFrame: initialFrame, timeUpdater: timeUpdater, children: _jsx(Internals.CanUseRemotionHooks.Provider, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
-    });
-    resolve();
-    await promise;
-    return {
-        delayRenderScope,
-        div,
-        cleanupScaffold: () => {
-            root.unmount();
-            div.remove();
-            cleanupCSS();
-        },
-        timeUpdater,
-        collectAssets,
-    };
-}

package/dist/drawing/border-radius.js

@@ -1,151 +0,0 @@
-import { drawRoundedRectPath } from './draw-rounded';
-import { getBoxBasedOnBackgroundClip } from './get-padding-box';
-function parseValue({ value, reference, }) {
-    value = value.trim();
-    if (value.endsWith('%')) {
-        const percentage = parseFloat(value);
-        return (percentage / 100) * reference;
-    }
-    if (value.endsWith('px')) {
-        return parseFloat(value);
-    }
-    // If no unit, assume pixels
-    return parseFloat(value);
-}
-function expandShorthand(values) {
-    if (values.length === 1) {
-        // All corners the same
-        return [values[0], values[0], values[0], values[0]];
-    }
-    if (values.length === 2) {
-        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
-        return [values[0], values[1], values[0], values[1]];
-    }
-    if (values.length === 3) {
-        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
-        return [values[0], values[1], values[2], values[1]];
-    }
-    // 4 values: top-left, top-right, bottom-right, bottom-left
-    return [values[0], values[1], values[2], values[3]];
-}
-function clampBorderRadius({ borderRadius, width, height, }) {
-    // According to CSS spec, if the sum of border radii on adjacent corners
-    // exceeds the length of the edge, they should be proportionally reduced
-    const clamped = {
-        topLeft: { ...borderRadius.topLeft },
-        topRight: { ...borderRadius.topRight },
-        bottomRight: { ...borderRadius.bottomRight },
-        bottomLeft: { ...borderRadius.bottomLeft },
-    };
-    // Check top edge
-    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
-    if (topSum > width) {
-        const factor = width / topSum;
-        clamped.topLeft.horizontal *= factor;
-        clamped.topRight.horizontal *= factor;
-    }
-    // Check right edge
-    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
-    if (rightSum > height) {
-        const factor = height / rightSum;
-        clamped.topRight.vertical *= factor;
-        clamped.bottomRight.vertical *= factor;
-    }
-    // Check bottom edge
-    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
-    if (bottomSum > width) {
-        const factor = width / bottomSum;
-        clamped.bottomRight.horizontal *= factor;
-        clamped.bottomLeft.horizontal *= factor;
-    }
-    // Check left edge
-    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
-    if (leftSum > height) {
-        const factor = height / leftSum;
-        clamped.bottomLeft.vertical *= factor;
-        clamped.topLeft.vertical *= factor;
-    }
-    return clamped;
-}
-export function parseBorderRadius({ borderRadius, width, height, }) {
-    // Split by '/' to separate horizontal and vertical radii
-    const parts = borderRadius.split('/').map((part) => part.trim());
-    const horizontalPart = parts[0];
-    const verticalPart = parts[1];
-    // Split each part into individual values
-    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
-    const verticalValues = verticalPart
-        ? verticalPart.split(/\s+/).filter((v) => v)
-        : horizontalValues; // If no '/', use horizontal values for vertical
-    // Expand shorthand to 4 values
-    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
-    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
-    return clampBorderRadius({
-        borderRadius: {
-            topLeft: {
-                horizontal: parseValue({ value: hTopLeft, reference: width }),
-                vertical: parseValue({ value: vTopLeft, reference: height }),
-            },
-            topRight: {
-                horizontal: parseValue({ value: hTopRight, reference: width }),
-                vertical: parseValue({ value: vTopRight, reference: height }),
-            },
-            bottomRight: {
-                horizontal: parseValue({ value: hBottomRight, reference: width }),
-                vertical: parseValue({ value: vBottomRight, reference: height }),
-            },
-            bottomLeft: {
-                horizontal: parseValue({ value: hBottomLeft, reference: width }),
-                vertical: parseValue({ value: vBottomLeft, reference: height }),
-            },
-        },
-        width,
-        height,
-    });
-}
-export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, computedStyle, backgroundClip, }) {
-    if (borderRadius.topLeft.horizontal === 0 &&
-        borderRadius.topLeft.vertical === 0 &&
-        borderRadius.topRight.horizontal === 0 &&
-        borderRadius.topRight.vertical === 0 &&
-        borderRadius.bottomRight.horizontal === 0 &&
-        borderRadius.bottomRight.vertical === 0 &&
-        borderRadius.bottomLeft.horizontal === 0 &&
-        borderRadius.bottomLeft.vertical === 0 &&
-        !forceClipEvenWhenZero) {
-        return () => { };
-    }
-    ctx.save();
-    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
-    // See background-clip tests for why this logic matters!
-    const actualBorderRadius = {
-        topLeft: {
-            horizontal: Math.max(0, borderRadius.topLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - (boundingRect.top - rect.top)),
-        },
-        topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.topRight.vertical - (boundingRect.top - rect.top)),
-        },
-        bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-        bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-    };
-    drawRoundedRectPath({
-        ctx,
-        x: boundingRect.left,
-        y: boundingRect.top,
-        width: boundingRect.width,
-        height: boundingRect.height,
-        borderRadius: actualBorderRadius,
-    });
-    ctx.clip();
-    return () => {
-        ctx.restore();
-    };
-}