@remotion/web-renderer 4.0.430 → 4.0.432

package/dist/drawing/draw-border.js

@@ -1,353 +0,0 @@
-const parseBorderWidth = (value) => {
-    return parseFloat(value) || 0;
-};
-const getBorderSideProperties = (computedStyle) => {
-    // Parse individual border properties for each side
-    // This handles both shorthand (border: "1px solid red") and longhand (border-top-width: "1px") properties
-    return {
-        top: {
-            width: parseBorderWidth(computedStyle.borderTopWidth),
-            color: computedStyle.borderTopColor || computedStyle.borderColor || 'black',
-            style: computedStyle.borderTopStyle || computedStyle.borderStyle || 'solid',
-        },
-        right: {
-            width: parseBorderWidth(computedStyle.borderRightWidth),
-            color: computedStyle.borderRightColor || computedStyle.borderColor || 'black',
-            style: computedStyle.borderRightStyle || computedStyle.borderStyle || 'solid',
-        },
-        bottom: {
-            width: parseBorderWidth(computedStyle.borderBottomWidth),
-            color: computedStyle.borderBottomColor || computedStyle.borderColor || 'black',
-            style: computedStyle.borderBottomStyle || computedStyle.borderStyle || 'solid',
-        },
-        left: {
-            width: parseBorderWidth(computedStyle.borderLeftWidth),
-            color: computedStyle.borderLeftColor || computedStyle.borderColor || 'black',
-            style: computedStyle.borderLeftStyle || computedStyle.borderStyle || 'solid',
-        },
-    };
-};
-const getLineDashPattern = (style, width) => {
-    if (style === 'dashed') {
-        return [width * 2, width];
-    }
-    if (style === 'dotted') {
-        return [width, width];
-    }
-    return [];
-};
-const drawBorderSide = ({ ctx, side, x, y, width, height, borderRadius, borderProperties, }) => {
-    const { width: borderWidth, color, style } = borderProperties;
-    if (borderWidth <= 0 || style === 'none' || style === 'hidden') {
-        return;
-    }
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = borderWidth;
-    ctx.setLineDash(getLineDashPattern(style, borderWidth));
-    const halfWidth = borderWidth / 2;
-    if (side === 'top') {
-        // Start point (accounting for left border and top-left radius)
-        const startX = x + borderRadius.topLeft.horizontal;
-        const startY = y + halfWidth;
-        // End point (accounting for top-right radius)
-        const endX = x + width - borderRadius.topRight.horizontal;
-        const endY = y + halfWidth;
-        ctx.moveTo(startX, startY);
-        ctx.lineTo(endX, endY);
-    }
-    else if (side === 'right') {
-        // Start point (accounting for top border and top-right radius)
-        const startX = x + width - halfWidth;
-        const startY = y + borderRadius.topRight.vertical;
-        // End point (accounting for bottom-right radius)
-        const endX = x + width - halfWidth;
-        const endY = y + height - borderRadius.bottomRight.vertical;
-        ctx.moveTo(startX, startY);
-        ctx.lineTo(endX, endY);
-    }
-    else if (side === 'bottom') {
-        // Start point (accounting for bottom-left radius)
-        const startX = x + borderRadius.bottomLeft.horizontal;
-        const startY = y + height - halfWidth;
-        // End point (accounting for right border and bottom-right radius)
-        const endX = x + width - borderRadius.bottomRight.horizontal;
-        const endY = y + height - halfWidth;
-        ctx.moveTo(startX, startY);
-        ctx.lineTo(endX, endY);
-    }
-    else if (side === 'left') {
-        // Start point (accounting for top-left radius)
-        const startX = x + halfWidth;
-        const startY = y + borderRadius.topLeft.vertical;
-        // End point (accounting for bottom border and bottom-left radius)
-        const endX = x + halfWidth;
-        const endY = y + height - borderRadius.bottomLeft.vertical;
-        ctx.moveTo(startX, startY);
-        ctx.lineTo(endX, endY);
-    }
-    ctx.stroke();
-};
-const drawCorner = ({ ctx, corner, x, y, width, height, borderRadius, topBorder, rightBorder, bottomBorder, leftBorder, }) => {
-    const radius = borderRadius[corner];
-    if (radius.horizontal <= 0 && radius.vertical <= 0) {
-        return;
-    }
-    let border1;
-    let border2;
-    let centerX;
-    let centerY;
-    let startAngle;
-    let endAngle;
-    if (corner === 'topLeft') {
-        border1 = leftBorder;
-        border2 = topBorder;
-        centerX = x + radius.horizontal;
-        centerY = y + radius.vertical;
-        startAngle = Math.PI;
-        endAngle = (Math.PI * 3) / 2;
-    }
-    else if (corner === 'topRight') {
-        border1 = topBorder;
-        border2 = rightBorder;
-        centerX = x + width - radius.horizontal;
-        centerY = y + radius.vertical;
-        startAngle = -Math.PI / 2;
-        endAngle = 0;
-    }
-    else if (corner === 'bottomRight') {
-        border1 = rightBorder;
-        border2 = bottomBorder;
-        centerX = x + width - radius.horizontal;
-        centerY = y + height - radius.vertical;
-        startAngle = 0;
-        endAngle = Math.PI / 2;
-    }
-    else {
-        // bottomLeft
-        border1 = bottomBorder;
-        border2 = leftBorder;
-        centerX = x + radius.horizontal;
-        centerY = y + height - radius.vertical;
-        startAngle = Math.PI / 2;
-        endAngle = Math.PI;
-    }
-    // Draw corner arc - use the average of the two adjacent borders
-    // In a more sophisticated implementation, we could blend the two borders
-    const avgWidth = (border1.width + border2.width) / 2;
-    const useColor = border1.width >= border2.width ? border1.color : border2.color;
-    const useStyle = border1.width >= border2.width ? border1.style : border2.style;
-    if (avgWidth > 0 && useStyle !== 'none' && useStyle !== 'hidden') {
-        ctx.beginPath();
-        ctx.strokeStyle = useColor;
-        ctx.lineWidth = avgWidth;
-        ctx.setLineDash(getLineDashPattern(useStyle, avgWidth));
-        // Adjust radius for the border width
-        const adjustedRadiusH = Math.max(0, radius.horizontal - avgWidth / 2);
-        const adjustedRadiusV = Math.max(0, radius.vertical - avgWidth / 2);
-        ctx.ellipse(centerX, centerY, adjustedRadiusH, adjustedRadiusV, 0, startAngle, endAngle);
-        ctx.stroke();
-    }
-};
-const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth, borderColor, borderStyle, }) => {
-    ctx.beginPath();
-    ctx.strokeStyle = borderColor;
-    ctx.lineWidth = borderWidth;
-    ctx.setLineDash(getLineDashPattern(borderStyle, borderWidth));
-    const halfWidth = borderWidth / 2;
-    const borderX = x + halfWidth;
-    const borderY = y + halfWidth;
-    const borderW = width - borderWidth;
-    const borderH = height - borderWidth;
-    // Adjust border radius for the border width
-    const adjustedBorderRadius = {
-        topLeft: {
-            horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth),
-        },
-        topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
-            vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth),
-        },
-        bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth),
-        },
-        bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth),
-        },
-    };
-    // Draw continuous path with border radius
-    ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
-    // Top edge
-    ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
-    // Top-right corner
-    if (adjustedBorderRadius.topRight.horizontal > 0 ||
-        adjustedBorderRadius.topRight.vertical > 0) {
-        ctx.ellipse(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
-    }
-    // Right edge
-    ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
-    // Bottom-right corner
-    if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
-        adjustedBorderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(borderX + borderW - adjustedBorderRadius.bottomRight.horizontal, borderY + borderH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
-    }
-    // Bottom edge
-    ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH);
-    // Bottom-left corner
-    if (adjustedBorderRadius.bottomLeft.horizontal > 0 ||
-        adjustedBorderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
-    }
-    // Left edge
-    ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
-    // Top-left corner
-    if (adjustedBorderRadius.topLeft.horizontal > 0 ||
-        adjustedBorderRadius.topLeft.vertical > 0) {
-        ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
-    }
-    ctx.closePath();
-    ctx.stroke();
-};
-export const drawBorder = ({ ctx, rect, borderRadius, computedStyle, }) => {
-    const borders = getBorderSideProperties(computedStyle);
-    // Check if we have any visible border
-    const hasBorder = borders.top.width > 0 ||
-        borders.right.width > 0 ||
-        borders.bottom.width > 0 ||
-        borders.left.width > 0;
-    if (!hasBorder) {
-        return;
-    }
-    // Save original canvas state
-    const originalStrokeStyle = ctx.strokeStyle;
-    const originalLineWidth = ctx.lineWidth;
-    const originalLineDash = ctx.getLineDash();
-    // Check if all borders are uniform (same width, color, and style)
-    const allSidesEqual = borders.top.width === borders.right.width &&
-        borders.top.width === borders.bottom.width &&
-        borders.top.width === borders.left.width &&
-        borders.top.color === borders.right.color &&
-        borders.top.color === borders.bottom.color &&
-        borders.top.color === borders.left.color &&
-        borders.top.style === borders.right.style &&
-        borders.top.style === borders.bottom.style &&
-        borders.top.style === borders.left.style &&
-        borders.top.width > 0;
-    if (allSidesEqual) {
-        // Draw as a single continuous border for continuous dashing
-        drawUniformBorder({
-            ctx,
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            borderWidth: borders.top.width,
-            borderColor: borders.top.color,
-            borderStyle: borders.top.style,
-        });
-    }
-    else {
-        // Draw corners first (they go underneath the straight edges)
-        drawCorner({
-            ctx,
-            corner: 'topLeft',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            topBorder: borders.top,
-            rightBorder: borders.right,
-            bottomBorder: borders.bottom,
-            leftBorder: borders.left,
-        });
-        drawCorner({
-            ctx,
-            corner: 'topRight',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            topBorder: borders.top,
-            rightBorder: borders.right,
-            bottomBorder: borders.bottom,
-            leftBorder: borders.left,
-        });
-        drawCorner({
-            ctx,
-            corner: 'bottomRight',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            topBorder: borders.top,
-            rightBorder: borders.right,
-            bottomBorder: borders.bottom,
-            leftBorder: borders.left,
-        });
-        drawCorner({
-            ctx,
-            corner: 'bottomLeft',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            topBorder: borders.top,
-            rightBorder: borders.right,
-            bottomBorder: borders.bottom,
-            leftBorder: borders.left,
-        });
-        // Draw each border side
-        drawBorderSide({
-            ctx,
-            side: 'top',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            borderProperties: borders.top,
-        });
-        drawBorderSide({
-            ctx,
-            side: 'right',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            borderProperties: borders.right,
-        });
-        drawBorderSide({
-            ctx,
-            side: 'bottom',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            borderProperties: borders.bottom,
-        });
-        drawBorderSide({
-            ctx,
-            side: 'left',
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-            borderProperties: borders.left,
-        });
-    }
-    // Restore original canvas state
-    ctx.strokeStyle = originalStrokeStyle;
-    ctx.lineWidth = originalLineWidth;
-    ctx.setLineDash(originalLineDash);
-};

package/dist/drawing/draw-box-shadow.js

@@ -1,103 +0,0 @@
-import { Internals } from 'remotion';
-import { drawRoundedRectPath } from './draw-rounded';
-export const parseBoxShadow = (boxShadowValue) => {
-    if (!boxShadowValue || boxShadowValue === 'none') {
-        return [];
-    }
-    const shadows = [];
-    // Split by comma, but respect rgba() colors
-    const shadowStrings = boxShadowValue.split(/,(?![^(]*\))/);
-    for (const shadowStr of shadowStrings) {
-        const trimmed = shadowStr.trim();
-        if (!trimmed || trimmed === 'none') {
-            continue;
-        }
-        const shadow = {
-            offsetX: 0,
-            offsetY: 0,
-            blurRadius: 0,
-            color: 'rgba(0, 0, 0, 0.5)',
-            inset: false,
-        };
-        // Check for inset
-        shadow.inset = /\binset\b/i.test(trimmed);
-        // Remove 'inset' keyword
-        let remaining = trimmed.replace(/\binset\b/gi, '').trim();
-        // Extract color (can be rgb(), rgba(), hsl(), hsla(), hex, or named color)
-        const colorMatch = remaining.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
-        if (colorMatch) {
-            shadow.color = colorMatch[0];
-            remaining = remaining.replace(colorMatch[0], '').trim();
-        }
-        // Parse remaining numeric values (offset-x offset-y blur spread)
-        const numbers = remaining.match(/[+-]?\d*\.?\d+(?:px|em|rem|%)?/gi) || [];
-        const values = numbers.map((n) => parseFloat(n) || 0);
-        if (values.length >= 2) {
-            shadow.offsetX = values[0];
-            shadow.offsetY = values[1];
-            if (values.length >= 3) {
-                shadow.blurRadius = Math.max(0, values[2]); // Blur cannot be negative
-            }
-        }
-        shadows.push(shadow);
-    }
-    return shadows;
-};
-export const drawBorderRadius = ({ ctx, rect, borderRadius, computedStyle, logLevel, }) => {
-    const shadows = parseBoxShadow(computedStyle.boxShadow);
-    if (shadows.length === 0) {
-        return;
-    }
-    // Draw shadows from last to first (so first shadow appears on top)
-    for (let i = shadows.length - 1; i >= 0; i--) {
-        const shadow = shadows[i];
-        const newLeft = rect.left + Math.min(shadow.offsetX, 0) - shadow.blurRadius;
-        const newRight = rect.right + Math.max(shadow.offsetX, 0) + shadow.blurRadius;
-        const newTop = rect.top + Math.min(shadow.offsetY, 0) - shadow.blurRadius;
-        const newBottom = rect.bottom + Math.max(shadow.offsetY, 0) + shadow.blurRadius;
-        const newRect = new DOMRect(newLeft, newTop, newRight - newLeft, newBottom - newTop);
-        const leftOffset = rect.left - newLeft;
-        const topOffset = rect.top - newTop;
-        const newCanvas = new OffscreenCanvas(newRect.width, newRect.height);
-        const newCtx = newCanvas.getContext('2d');
-        if (!newCtx) {
-            throw new Error('Failed to get context');
-        }
-        if (shadow.inset) {
-            // TODO: Only warn once per render.
-            Internals.Log.warn({
-                logLevel,
-                tag: '@remotion/web-renderer',
-            }, 'Detected "box-shadow" with "inset". This is not yet supported in @remotion/web-renderer');
-            continue;
-        }
-        // Apply shadow properties to canvas
-        newCtx.shadowBlur = shadow.blurRadius;
-        newCtx.shadowColor = shadow.color;
-        newCtx.shadowOffsetX = shadow.offsetX;
-        newCtx.shadowOffsetY = shadow.offsetY;
-        newCtx.fillStyle = 'black';
-        drawRoundedRectPath({
-            ctx: newCtx,
-            x: leftOffset,
-            y: topOffset,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-        });
-        newCtx.fill();
-        // Cut out the shape, leaving only shadow
-        newCtx.shadowColor = 'transparent';
-        newCtx.globalCompositeOperation = 'destination-out';
-        drawRoundedRectPath({
-            ctx: newCtx,
-            x: leftOffset,
-            y: topOffset,
-            width: rect.width,
-            height: rect.height,
-            borderRadius,
-        });
-        newCtx.fill();
-        ctx.drawImage(newCanvas, rect.left - leftOffset, rect.top - topOffset);
-    }
-};

package/dist/drawing/draw-dom-element.js

@@ -1,85 +0,0 @@
-import { calculateObjectFit, parseObjectFit } from './calculate-object-fit';
-import { fitSvgIntoItsContainer } from './fit-svg-into-its-dimensions';
-import { turnSvgIntoDrawable } from './turn-svg-into-drawable';
-const getReadableImageError = (err, node) => {
-    if (!(err instanceof DOMException)) {
-        return null;
-    }
-    if (err.name === 'SecurityError') {
-        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
-            `The image is tainted due to CORS restrictions. ` +
-            `The server hosting this image must respond with the "Access-Control-Allow-Origin" header. ` +
-            `See: https://remotion.dev/docs/client-side-rendering/migration`);
-    }
-    if (err.name === 'InvalidStateError') {
-        return new Error(`Could not draw image with src="${node.src}" to canvas: ` +
-            `The image is in a broken state. ` +
-            `This usually means the image failed to load - check that the URL is valid and accessible.`);
-    }
-    return null;
-};
-/**
- * Draw an SVG element using "contain" behavior (the default for SVGs).
- */
-const drawSvg = ({ drawable, dimensions, contextToDraw, }) => {
-    const fitted = fitSvgIntoItsContainer({
-        containerSize: dimensions,
-        elementSize: {
-            width: drawable.width,
-            height: drawable.height,
-        },
-    });
-    contextToDraw.drawImage(drawable, fitted.left, fitted.top, fitted.width, fitted.height);
-};
-/**
- * Draw an image or canvas element using the object-fit CSS property.
- */
-const drawReplacedElement = ({ drawable, dimensions, computedStyle, contextToDraw, }) => {
-    const objectFit = parseObjectFit(computedStyle.objectFit);
-    const intrinsicSize = drawable instanceof HTMLImageElement
-        ? { width: drawable.naturalWidth, height: drawable.naturalHeight }
-        : { width: drawable.width, height: drawable.height };
-    const result = calculateObjectFit({
-        objectFit,
-        containerSize: {
-            width: dimensions.width,
-            height: dimensions.height,
-            left: dimensions.left,
-            top: dimensions.top,
-        },
-        intrinsicSize,
-    });
-    // Use the 9-argument drawImage to support source cropping (for cover mode)
-    contextToDraw.drawImage(drawable, result.sourceX, result.sourceY, result.sourceWidth, result.sourceHeight, result.destX, result.destY, result.destWidth, result.destHeight);
-};
-export const drawDomElement = (node) => {
-    const domDrawFn = async ({ dimensions, contextToDraw, computedStyle, }) => {
-        // Handle SVG elements separately - they use "contain" behavior by default
-        if (node instanceof SVGSVGElement) {
-            const drawable = await turnSvgIntoDrawable(node);
-            drawSvg({ drawable, dimensions, contextToDraw });
-            return;
-        }
-        // Handle replaced elements (img, canvas) with object-fit support
-        if (node instanceof HTMLImageElement || node instanceof HTMLCanvasElement) {
-            try {
-                drawReplacedElement({
-                    drawable: node,
-                    dimensions,
-                    computedStyle,
-                    contextToDraw,
-                });
-            }
-            catch (err) {
-                if (node instanceof HTMLImageElement) {
-                    const readableError = getReadableImageError(err, node);
-                    if (readableError) {
-                        throw readableError;
-                    }
-                }
-                throw err;
-            }
-        }
-    };
-    return domDrawFn;
-};

package/dist/drawing/draw-element.js

@@ -1,84 +0,0 @@
-import { parseBorderRadius, setBorderRadius } from './border-radius';
-import { drawBackground } from './draw-background';
-import { drawBorder } from './draw-border';
-import { drawBorderRadius } from './draw-box-shadow';
-import { drawOutline } from './draw-outline';
-import { setOpacity } from './opacity';
-import { setOverflowHidden } from './overflow';
-import { setTransform } from './transform';
-export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, element, internalState, }) => {
-    const { backgroundImage, backgroundColor, backgroundClip } = computedStyle;
-    const borderRadius = parseBorderRadius({
-        borderRadius: computedStyle.borderRadius,
-        width: rect.width,
-        height: rect.height,
-    });
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-        parentRect,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
-    // Draw box shadow before border radius clip and background
-    drawBorderRadius({
-        ctx: context,
-        computedStyle,
-        rect,
-        borderRadius,
-        logLevel,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        rect,
-        borderRadius,
-        forceClipEvenWhenZero: false,
-        computedStyle,
-        backgroundClip,
-    });
-    await drawBackground({
-        backgroundImage,
-        context,
-        rect,
-        backgroundColor,
-        backgroundClip,
-        element,
-        logLevel,
-        internalState,
-        computedStyle,
-        offsetLeft: parentRect.left,
-        offsetTop: parentRect.top,
-    });
-    await draw({ dimensions: rect, computedStyle, contextToDraw: context });
-    finishBorderRadius();
-    drawBorder({
-        ctx: context,
-        rect,
-        borderRadius,
-        computedStyle,
-    });
-    // Drawing outline ignores overflow: hidden, finishing it and starting a new one for the outline
-    drawOutline({
-        ctx: context,
-        rect,
-        borderRadius,
-        computedStyle,
-    });
-    const finishOverflowHidden = setOverflowHidden({
-        ctx: context,
-        rect,
-        borderRadius,
-        overflowHidden: computedStyle.overflow === 'hidden',
-        computedStyle,
-        backgroundClip,
-    });
-    finishTransform();
-    return {
-        cleanupAfterChildren: () => {
-            finishOpacity();
-            finishOverflowHidden();
-        },
-    };
-};