@remotion/web-renderer 4.0.394 → 4.0.396

package/dist/drawing/compose-svg.js

@@ -0,0 +1,34 @@
+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/drawing/compose.d.ts

@@ -0,0 +1,5 @@
+import type { Composable } from '../composable';
+export declare const compose: ({ composables, context, }: {
+    composables: Composable[];
+    context: OffscreenCanvasRenderingContext2D;
+}) => Promise<void>;

package/dist/drawing/compose.js

@@ -0,0 +1,6 @@
+import { drawElementToCanvas } from './draw-element-to-canvas';
+export const compose = async ({ composables, context, }) => {
+    for (const composable of composables) {
+        await drawElementToCanvas(composable.element, context);
+    }
+};

package/dist/drawing/draw-border.d.ts

@@ -1,10 +1,7 @@
 import type { BorderRadiusCorners } from './border-radius';
-export declare const drawBorder: ({ ctx, x, y, width, height, borderRadius, computedStyle, }: {
+export declare const drawBorder: ({ ctx, rect, borderRadius, computedStyle, }: {
     ctx: OffscreenCanvasRenderingContext2D;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     computedStyle: CSSStyleDeclaration;
 }) => void;

package/dist/drawing/draw-border.js

@@ -1,88 +1,205 @@
-export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedStyle, }) => {
-    const { borderStyle, borderColor, borderWidth: computedBorderWidth, } = computedStyle;
-    // Parse border width (can be shorthand like "1px 2px 3px 4px")
-    const borderWidths = computedBorderWidth
-        .split(/\s+/)
-        .map((w) => parseFloat(w));
-    const borderTop = borderWidths[0] || 0;
-    const borderRight = borderWidths[1] || borderTop;
-    const borderBottom = borderWidths[2] || borderTop;
-    const borderLeft = borderWidths[3] || borderRight;
-    // Check if we have a visible border
-    const hasBorder = borderStyle &&
-        borderStyle !== 'none' &&
-        borderStyle !== 'hidden' &&
-        (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
-    if (!hasBorder) {
+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;
     }
-    const originalStrokeStyle = ctx.strokeStyle;
-    const originalLineWidth = ctx.lineWidth;
-    const originalLineDash = ctx.getLineDash();
-    ctx.strokeStyle = borderColor;
-    // Set line dash based on border style
-    if (borderStyle === 'dashed') {
-        const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-        ctx.setLineDash([max * 2, max]);
+    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);
     }
-    else if (borderStyle === 'dotted') {
-        ctx.setLineDash([
-            Math.max(borderTop, borderRight, borderBottom, borderLeft),
-        ]);
+    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 {
-        ctx.setLineDash([]);
+        // 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();
     }
-    // For simplicity, use the maximum border width if they differ
-    // A full implementation would draw each side separately
-    const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-    // Create path for border (inset by half the border width to draw inside)
+};
+const drawUniformBorder = ({ ctx, x, y, width, height, borderRadius, borderWidth, borderColor, borderStyle, }) => {
     ctx.beginPath();
-    const borderX = x + maxBorderWidth / 2;
-    const borderY = y + maxBorderWidth / 2;
-    const borderWidth = width - maxBorderWidth;
-    const borderHeight = height - maxBorderWidth;
-    // Account for border radius, adjusted for the border width
+    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 - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth),
         },
         topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth),
         },
         bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth),
         },
         bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2),
+            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
+            vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth),
         },
     };
-    // Draw path with border radius
+    // Draw continuous path with border radius
     ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
     // Top edge
-    ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+    ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
     // Top-right corner
     if (adjustedBorderRadius.topRight.horizontal > 0 ||
         adjustedBorderRadius.topRight.vertical > 0) {
-        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 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 + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+    ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
     // Bottom-right corner
     if (adjustedBorderRadius.bottomRight.horizontal > 0 ||
         adjustedBorderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+        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 + borderHeight);
+    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 + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+        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);
@@ -92,9 +209,144 @@ export const drawBorder = ({ ctx, x, y, width, height, borderRadius, computedSty
         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.lineWidth = maxBorderWidth;
     ctx.stroke();
-    // Restore original values
+};
+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-element-to-canvas.d.ts

@@ -1,9 +1,12 @@
+import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
 export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
-export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, }: {
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
     offsetLeft: number;
     offsetTop: number;
+    logLevel: LogLevel;
+    parentRect: DOMRect;
 }) => Promise<DrawElementToCanvasReturnValue>;

package/dist/drawing/draw-element-to-canvas.js

@@ -1,9 +1,9 @@
-import { compose } from '../compose';
 import { calculateTransforms } from './calculate-transforms';
 import { drawElement } from './draw-element';
-import { transformIn3d } from './transform-in-3d';
-export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, }) => {
-    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+import { handle3dTransform } from './handle-3d-transform';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, parentRect, }) => {
+    const transforms = calculateTransforms({ element, offsetLeft, offsetTop });
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
     if (opacity === 0) {
         reset();
         return 'continue';
@@ -13,30 +13,13 @@ export const drawElementToCanvas = async ({ element, context, draw, offsetLeft,
         return 'continue';
     }
     if (!totalMatrix.is2D) {
-        const canvasOffsetLeft = Math.min(dimensions.left, 0);
-        const canvasOffsetTop = Math.min(dimensions.top, 0);
-        const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
-        const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
-        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
-        const context2 = tempCanvas.getContext('2d');
-        if (!context2) {
-            throw new Error('Could not get context');
-        }
-        await compose({
+        await handle3dTransform({
             element,
-            context: context2,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
+            totalMatrix,
+            parentRect,
+            context,
+            logLevel,
         });
-        const transformed = transformIn3d({
-            canvasWidth: tempCanvasWidth,
-            canvasHeight: tempCanvasHeight,
-            matrix: totalMatrix,
-            sourceCanvas: tempCanvas,
-            offsetLeft: canvasOffsetLeft,
-            offsetTop: canvasOffsetTop,
-        });
-        context.drawImage(transformed, 0, 0);
         reset();
         return 'skip-children';
     }

package/dist/drawing/draw-element.d.ts

@@ -1,9 +1,11 @@
 import type { DrawFn } from './drawn-fn';
-export declare const drawElement: ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }: {
-    dimensions: DOMRect;
+export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, }: {
+    rect: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
     opacity: number;
     totalMatrix: DOMMatrix;
     draw: DrawFn;
-}) => Promise<void>;
+}) => Promise<{
+    cleanupAfterChildren: () => void;
+}>;

package/dist/drawing/draw-element.js

@@ -1,13 +1,15 @@
 import { parseBorderRadius, setBorderRadius } from './border-radius';
 import { drawBorder } from './draw-border';
+import { drawOutline } from './draw-outline';
 import { setOpacity } from './opacity';
+import { setOverflowHidden } from './overflow';
 import { setTransform } from './transform';
-export const drawElement = async ({ dimensions, computedStyle, context, draw, opacity, totalMatrix, }) => {
+export const drawElement = async ({ rect, computedStyle, context, draw, opacity, totalMatrix, }) => {
     const background = computedStyle.backgroundColor;
     const borderRadius = parseBorderRadius({
         borderRadius: computedStyle.borderRadius,
-        width: dimensions.width,
-        height: dimensions.height,
+        width: rect.width,
+        height: rect.height,
     });
     const finishTransform = setTransform({
         ctx: context,
@@ -15,11 +17,9 @@ export const drawElement = async ({ dimensions, computedStyle, context, draw, op
     });
     const finishBorderRadius = setBorderRadius({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        rect,
         borderRadius,
+        forceClipEvenWhenZero: false,
     });
     const finishOpacity = setOpacity({
         ctx: context,
@@ -31,20 +31,35 @@ export const drawElement = async ({ dimensions, computedStyle, context, draw, op
             (background.endsWith(', 0)') || background.endsWith(',0')))) {
         const originalFillStyle = context.fillStyle;
         context.fillStyle = background;
-        context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+        context.fillRect(rect.left, rect.top, rect.width, rect.height);
         context.fillStyle = originalFillStyle;
     }
-    await draw({ dimensions, computedStyle, contextToDraw: context });
+    await draw({ dimensions: rect, computedStyle, contextToDraw: context });
     drawBorder({
         ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
+        rect,
         borderRadius,
         computedStyle,
     });
-    finishOpacity();
     finishBorderRadius();
+    // 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',
+    });
     finishTransform();
+    return {
+        cleanupAfterChildren: () => {
+            finishOpacity();
+            finishOverflowHidden();
+        },
+    };
 };

package/dist/drawing/draw-outline.d.ts

@@ -0,0 +1,9 @@
+import type { BorderRadiusCorners } from './border-radius';
+export declare const parseOutlineWidth: (value: string) => number;
+export declare const parseOutlineOffset: (value: string) => number;
+export declare const drawOutline: ({ ctx, rect, borderRadius, computedStyle, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    borderRadius: BorderRadiusCorners;
+    computedStyle: CSSStyleDeclaration;
+}) => void;