@remotion/web-renderer 4.0.428 → 4.0.430

package/dist/drawing/draw-border.js

@@ -0,0 +1,353 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,84 @@
+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();
+        },
+    };
+};