@remotion/web-renderer 4.0.398 → 4.0.399

package/dist/esm/index.mjs

@@ -393,6 +393,9 @@ var getDefaultAudioEncodingConfig = async () => {
 var makeInternalState = () => {
   let drawnPrecomposedPixels = 0;
   let precomposedTextures = 0;
+  const helperCanvasState = {
+    current: null
+  };
   return {
     getDrawn3dPixels: () => drawnPrecomposedPixels,
     getPrecomposedTiles: () => precomposedTextures,
@@ -402,6 +405,12 @@ var makeInternalState = () => {
     }) => {
       drawnPrecomposedPixels += canvasWidth * canvasHeight;
       precomposedTextures++;
+    },
+    helperCanvasState,
+    cleanup: () => {
+      if (helperCanvasState.current) {
+        helperCanvasState.current.cleanup();
+      }
     }
   };
 };
@@ -485,23 +494,31 @@ var onlyOneRenderAtATimeQueue = {
 };
 
 // ../licensing/dist/esm/index.mjs
+function isNetworkError(error) {
+  if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
+    return true;
+  }
+  return false;
+}
 var HOST = "https://www.remotion.pro";
 var registerUsageEvent = async ({
-  apiKey,
   host,
   succeeded,
-  event
+  event,
+  ...apiOrLicenseKey
 }) => {
   const abortController = new AbortController;
   const timeout = setTimeout(() => {
     abortController.abort();
   }, 1e4);
+  const apiKey = "apiKey" in apiOrLicenseKey ? apiOrLicenseKey.apiKey : null;
+  const licenseKey = "licenseKey" in apiOrLicenseKey ? apiOrLicenseKey.licenseKey : null;
   try {
     const res = await fetch(`${HOST}/api/track/register-usage-point`, {
       method: "POST",
       body: JSON.stringify({
         event,
-        apiKey,
+        apiKey: licenseKey ?? apiKey,
         host,
         succeeded
       }),
@@ -521,9 +538,11 @@ var registerUsageEvent = async ({
     if (!res.ok) {
       throw new Error(json.error);
     }
-    const read = await res.json();
-    return read;
+    throw new Error("Unexpected response from server");
   } catch (err) {
+    if (isNetworkError(err)) {
+      console.log("Failed to send usage event", err);
+    }
     clearTimeout(timeout);
     if (err instanceof Error && err.name === "AbortError") {
       throw new Error("Request timed out after 10 seconds");
@@ -547,13 +566,227 @@ var sendUsageEvent = async ({
     Internals3.Log.warn({ logLevel: "warn", tag: "web-renderer" }, `Pass "licenseKey" to ${apiName}(). If you qualify for the Free License (https://remotion.dev/license), pass "free-license" instead.`);
   }
   await registerUsageEvent({
-    apiKey: licenseKey === "free-license" ? null : licenseKey,
+    licenseKey: licenseKey === "free-license" ? null : licenseKey,
     event: "webcodec-conversion",
     host,
     succeeded
   });
 };
 
+// src/drawing/calculate-object-fit.ts
+var calculateFill = ({
+  containerSize,
+  intrinsicSize
+}) => {
+  return {
+    sourceX: 0,
+    sourceY: 0,
+    sourceWidth: intrinsicSize.width,
+    sourceHeight: intrinsicSize.height,
+    destX: containerSize.left,
+    destY: containerSize.top,
+    destWidth: containerSize.width,
+    destHeight: containerSize.height
+  };
+};
+var calculateContain = ({
+  containerSize,
+  intrinsicSize
+}) => {
+  const containerAspect = containerSize.width / containerSize.height;
+  const imageAspect = intrinsicSize.width / intrinsicSize.height;
+  let destWidth;
+  let destHeight;
+  if (imageAspect > containerAspect) {
+    destWidth = containerSize.width;
+    destHeight = containerSize.width / imageAspect;
+  } else {
+    destHeight = containerSize.height;
+    destWidth = containerSize.height * imageAspect;
+  }
+  const destX = containerSize.left + (containerSize.width - destWidth) / 2;
+  const destY = containerSize.top + (containerSize.height - destHeight) / 2;
+  return {
+    sourceX: 0,
+    sourceY: 0,
+    sourceWidth: intrinsicSize.width,
+    sourceHeight: intrinsicSize.height,
+    destX,
+    destY,
+    destWidth,
+    destHeight
+  };
+};
+var calculateCover = ({
+  containerSize,
+  intrinsicSize
+}) => {
+  if (containerSize.height <= 0 || intrinsicSize.height <= 0) {
+    return {
+      sourceX: 0,
+      sourceY: 0,
+      sourceWidth: 0,
+      sourceHeight: 0,
+      destX: containerSize.left,
+      destY: containerSize.top,
+      destWidth: 0,
+      destHeight: 0
+    };
+  }
+  const containerAspect = containerSize.width / containerSize.height;
+  const imageAspect = intrinsicSize.width / intrinsicSize.height;
+  let sourceX = 0;
+  let sourceY = 0;
+  let sourceWidth = intrinsicSize.width;
+  let sourceHeight = intrinsicSize.height;
+  if (imageAspect > containerAspect) {
+    sourceWidth = intrinsicSize.height * containerAspect;
+    sourceX = (intrinsicSize.width - sourceWidth) / 2;
+  } else {
+    sourceHeight = intrinsicSize.width / containerAspect;
+    sourceY = (intrinsicSize.height - sourceHeight) / 2;
+  }
+  return {
+    sourceX,
+    sourceY,
+    sourceWidth,
+    sourceHeight,
+    destX: containerSize.left,
+    destY: containerSize.top,
+    destWidth: containerSize.width,
+    destHeight: containerSize.height
+  };
+};
+var calculateNone = ({
+  containerSize,
+  intrinsicSize
+}) => {
+  const centeredX = containerSize.left + (containerSize.width - intrinsicSize.width) / 2;
+  const centeredY = containerSize.top + (containerSize.height - intrinsicSize.height) / 2;
+  let sourceX = 0;
+  let sourceY = 0;
+  let sourceWidth = intrinsicSize.width;
+  let sourceHeight = intrinsicSize.height;
+  let destX = centeredX;
+  let destY = centeredY;
+  let destWidth = intrinsicSize.width;
+  let destHeight = intrinsicSize.height;
+  if (destX < containerSize.left) {
+    const clipAmount = containerSize.left - destX;
+    sourceX = clipAmount;
+    sourceWidth -= clipAmount;
+    destX = containerSize.left;
+    destWidth -= clipAmount;
+  }
+  if (destY < containerSize.top) {
+    const clipAmount = containerSize.top - destY;
+    sourceY = clipAmount;
+    sourceHeight -= clipAmount;
+    destY = containerSize.top;
+    destHeight -= clipAmount;
+  }
+  const containerRight = containerSize.left + containerSize.width;
+  if (destX + destWidth > containerRight) {
+    const clipAmount = destX + destWidth - containerRight;
+    sourceWidth -= clipAmount;
+    destWidth -= clipAmount;
+  }
+  const containerBottom = containerSize.top + containerSize.height;
+  if (destY + destHeight > containerBottom) {
+    const clipAmount = destY + destHeight - containerBottom;
+    sourceHeight -= clipAmount;
+    destHeight -= clipAmount;
+  }
+  return {
+    sourceX,
+    sourceY,
+    sourceWidth,
+    sourceHeight,
+    destX,
+    destY,
+    destWidth,
+    destHeight
+  };
+};
+var calculateObjectFit = ({
+  objectFit,
+  containerSize,
+  intrinsicSize
+}) => {
+  switch (objectFit) {
+    case "fill":
+      return calculateFill({ containerSize, intrinsicSize });
+    case "contain":
+      return calculateContain({ containerSize, intrinsicSize });
+    case "cover":
+      return calculateCover({ containerSize, intrinsicSize });
+    case "none":
+      return calculateNone({ containerSize, intrinsicSize });
+    case "scale-down": {
+      const containResult = calculateContain({ containerSize, intrinsicSize });
+      const noneResult = calculateNone({ containerSize, intrinsicSize });
+      const containArea = containResult.destWidth * containResult.destHeight;
+      const noneArea = noneResult.destWidth * noneResult.destHeight;
+      return containArea < noneArea ? containResult : noneResult;
+    }
+    default: {
+      const exhaustiveCheck = objectFit;
+      throw new Error(`Unknown object-fit value: ${exhaustiveCheck}`);
+    }
+  }
+};
+var parseObjectFit = (value) => {
+  if (!value) {
+    return "fill";
+  }
+  const normalized = value.trim().toLowerCase();
+  switch (normalized) {
+    case "fill":
+    case "contain":
+    case "cover":
+    case "none":
+    case "scale-down":
+      return normalized;
+    default:
+      return "fill";
+  }
+};
+
+// src/drawing/fit-svg-into-its-dimensions.ts
+var fitSvgIntoItsContainer = ({
+  containerSize,
+  elementSize
+}) => {
+  if (Math.round(containerSize.width) === Math.round(elementSize.width) && Math.round(containerSize.height) === Math.round(elementSize.height)) {
+    return {
+      width: containerSize.width,
+      height: containerSize.height,
+      top: containerSize.top,
+      left: containerSize.left
+    };
+  }
+  if (containerSize.width <= 0 || containerSize.height <= 0) {
+    throw new Error(`Container must have positive dimensions, but got ${containerSize.width}x${containerSize.height}`);
+  }
+  if (elementSize.width <= 0 || elementSize.height <= 0) {
+    throw new Error(`Element must have positive dimensions, but got ${elementSize.width}x${elementSize.height}`);
+  }
+  const heightRatio = containerSize.height / elementSize.height;
+  const widthRatio = containerSize.width / elementSize.width;
+  const ratio = Math.min(heightRatio, widthRatio);
+  const newWidth = elementSize.width * ratio;
+  const newHeight = elementSize.height * ratio;
+  if (newWidth > containerSize.width + 0.000001 || newHeight > containerSize.height + 0.000001) {
+    throw new Error(`Element is too big to fit into the container. Max size: ${containerSize.width}x${containerSize.height}, element size: ${newWidth}x${newHeight}`);
+  }
+  return {
+    width: newWidth,
+    height: newHeight,
+    top: (containerSize.height - newHeight) / 2 + containerSize.top,
+    left: (containerSize.width - newWidth) / 2 + containerSize.left
+  };
+};
+
 // src/drawing/turn-svg-into-drawable.ts
 var turnSvgIntoDrawable = (svg) => {
   const { fill, color } = getComputedStyle(svg);
@@ -596,13 +829,81 @@ var turnSvgIntoDrawable = (svg) => {
 };
 
 // src/drawing/draw-dom-element.ts
+var 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;
+};
+var 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);
+};
+var 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
+  });
+  contextToDraw.drawImage(drawable, result.sourceX, result.sourceY, result.sourceWidth, result.sourceHeight, result.destX, result.destY, result.destWidth, result.destHeight);
+};
 var drawDomElement = (node) => {
-  const domDrawFn = async ({ dimensions, contextToDraw }) => {
-    const drawable = await (node instanceof SVGSVGElement ? turnSvgIntoDrawable(node) : node instanceof HTMLImageElement ? node : node instanceof HTMLCanvasElement ? node : null);
-    if (!drawable) {
+  const domDrawFn = async ({
+    dimensions,
+    contextToDraw,
+    computedStyle
+  }) => {
+    if (node instanceof SVGSVGElement) {
+      const drawable = await turnSvgIntoDrawable(node);
+      drawSvg({ drawable, dimensions, contextToDraw });
       return;
     }
-    contextToDraw.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    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;
 };
@@ -820,11 +1121,13 @@ var parseLinearGradient = (backgroundImage) => {
 var createCanvasGradient = ({
   ctx,
   rect,
-  gradientInfo
+  gradientInfo,
+  offsetLeft,
+  offsetTop
 }) => {
   const angleRad = (gradientInfo.angle - 90) * Math.PI / 180;
-  const centerX = rect.left + rect.width / 2;
-  const centerY = rect.top + rect.height / 2;
+  const centerX = rect.left - offsetLeft + rect.width / 2;
+  const centerY = rect.top - offsetTop + rect.height / 2;
   const cos = Math.cos(angleRad);
   const sin = Math.sin(angleRad);
   const halfWidth = rect.width / 2;
@@ -1052,6 +1355,38 @@ var drawRoundedRectPath = ({
   ctx.closePath();
 };
 
+// src/drawing/get-padding-box.ts
+var getPaddingBox = (rect, computedStyle) => {
+  const borderLeft = parseFloat(computedStyle.borderLeftWidth);
+  const borderRight = parseFloat(computedStyle.borderRightWidth);
+  const borderTop = parseFloat(computedStyle.borderTopWidth);
+  const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+  return new DOMRect(rect.left + borderLeft, rect.top + borderTop, rect.width - borderLeft - borderRight, rect.height - borderTop - borderBottom);
+};
+var getContentBox = (rect, computedStyle) => {
+  const paddingBox = getPaddingBox(rect, computedStyle);
+  const paddingLeft = parseFloat(computedStyle.paddingLeft);
+  const paddingRight = parseFloat(computedStyle.paddingRight);
+  const paddingTop = parseFloat(computedStyle.paddingTop);
+  const paddingBottom = parseFloat(computedStyle.paddingBottom);
+  return new DOMRect(paddingBox.left + paddingLeft, paddingBox.top + paddingTop, paddingBox.width - paddingLeft - paddingRight, paddingBox.height - paddingTop - paddingBottom);
+};
+var getBoxBasedOnBackgroundClip = (rect, computedStyle, backgroundClip) => {
+  if (!backgroundClip) {
+    return rect;
+  }
+  if (backgroundClip.includes("text")) {
+    return rect;
+  }
+  if (backgroundClip.includes("padding-box")) {
+    return getPaddingBox(rect, computedStyle);
+  }
+  if (backgroundClip.includes("content-box")) {
+    return getContentBox(rect, computedStyle);
+  }
+  return rect;
+};
+
 // src/drawing/border-radius.ts
 function parseValue({
   value,
@@ -1155,19 +1490,40 @@ function setBorderRadius({
   ctx,
   rect,
   borderRadius,
-  forceClipEvenWhenZero = false
+  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);
+  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: rect.left,
-    y: rect.top,
-    width: rect.width,
-    height: rect.height,
-    borderRadius
+    x: boundingRect.left,
+    y: boundingRect.top,
+    width: boundingRect.width,
+    height: boundingRect.height,
+    borderRadius: actualBorderRadius
   });
   ctx.clip();
   return () => {
@@ -1175,6 +1531,93 @@ function setBorderRadius({
   };
 }
 
+// src/drawing/get-clipped-background.ts
+var getClippedBackground = async ({
+  element,
+  boundingRect,
+  logLevel,
+  internalState
+}) => {
+  const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+  const tempContext = tempCanvas.getContext("2d");
+  await compose({
+    element,
+    context: tempContext,
+    logLevel,
+    parentRect: boundingRect,
+    internalState,
+    onlyBackgroundClip: true
+  });
+  return tempContext;
+};
+
+// src/drawing/draw-background.ts
+var drawBackground = async ({
+  backgroundImage,
+  context,
+  rect,
+  backgroundColor,
+  backgroundClip,
+  element,
+  logLevel,
+  internalState,
+  computedStyle
+}) => {
+  let contextToDraw = context;
+  const originalCompositeOperation = context.globalCompositeOperation;
+  let offsetLeft = 0;
+  let offsetTop = 0;
+  const finish = () => {
+    context.globalCompositeOperation = originalCompositeOperation;
+    if (context !== contextToDraw) {
+      context.drawImage(contextToDraw.canvas, offsetLeft, offsetTop, contextToDraw.canvas.width, contextToDraw.canvas.height);
+    }
+  };
+  const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
+  if (backgroundClip.includes("text")) {
+    offsetLeft = boundingRect.left;
+    offsetTop = boundingRect.top;
+    const originalBackgroundClip = element.style.backgroundClip;
+    const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
+    element.style.backgroundClip = "initial";
+    element.style.webkitBackgroundClip = "initial";
+    const drawn = await getClippedBackground({
+      element,
+      boundingRect,
+      logLevel,
+      internalState
+    });
+    element.style.backgroundClip = originalBackgroundClip;
+    element.style.webkitBackgroundClip = originalWebkitBackgroundClip;
+    contextToDraw = drawn;
+    contextToDraw.globalCompositeOperation = "source-in";
+  }
+  if (backgroundImage && backgroundImage !== "none") {
+    const gradientInfo = parseLinearGradient(backgroundImage);
+    if (gradientInfo) {
+      const gradient = createCanvasGradient({
+        ctx: contextToDraw,
+        rect: boundingRect,
+        gradientInfo,
+        offsetLeft,
+        offsetTop
+      });
+      const originalFillStyle = contextToDraw.fillStyle;
+      contextToDraw.fillStyle = gradient;
+      contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
+      contextToDraw.fillStyle = originalFillStyle;
+      return finish();
+    }
+  }
+  if (backgroundColor && backgroundColor !== "transparent" && !(backgroundColor.startsWith("rgba") && (backgroundColor.endsWith(", 0)") || backgroundColor.endsWith(",0")))) {
+    const originalFillStyle = contextToDraw.fillStyle;
+    contextToDraw.fillStyle = backgroundColor;
+    contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetLeft, boundingRect.width, boundingRect.height);
+    contextToDraw.fillStyle = originalFillStyle;
+  }
+  finish();
+};
+
 // src/drawing/draw-border.ts
 var parseBorderWidth = (value) => {
   return parseFloat(value) || 0;
@@ -1552,7 +1995,7 @@ var parseBoxShadow = (boxShadowValue) => {
   }
   return shadows;
 };
-var setBoxShadow = ({
+var drawBorderRadius = ({
   ctx,
   rect,
   borderRadius,
@@ -1703,7 +2146,9 @@ var setOverflowHidden = ({
   ctx,
   rect,
   borderRadius,
-  overflowHidden
+  overflowHidden,
+  computedStyle,
+  backgroundClip
 }) => {
   if (!overflowHidden) {
     return () => {};
@@ -1712,7 +2157,9 @@ var setOverflowHidden = ({
     ctx,
     rect,
     borderRadius,
-    forceClipEvenWhenZero: true
+    forceClipEvenWhenZero: true,
+    computedStyle,
+    backgroundClip
   });
 };
 
@@ -1738,10 +2185,11 @@ var drawElement = async ({
   opacity,
   totalMatrix,
   parentRect,
-  logLevel
+  logLevel,
+  element,
+  internalState
 }) => {
-  const background = computedStyle.backgroundColor;
-  const { backgroundImage } = computedStyle;
+  const { backgroundImage, backgroundColor, backgroundClip } = computedStyle;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
     width: rect.width,
@@ -1756,7 +2204,7 @@ var drawElement = async ({
     ctx: context,
     opacity
   });
-  setBoxShadow({
+  drawBorderRadius({
     ctx: context,
     computedStyle,
     rect,
@@ -1767,38 +2215,29 @@ var drawElement = async ({
     ctx: context,
     rect,
     borderRadius,
-    forceClipEvenWhenZero: false
+    forceClipEvenWhenZero: false,
+    computedStyle,
+    backgroundClip
+  });
+  await drawBackground({
+    backgroundImage,
+    context,
+    rect,
+    backgroundColor,
+    backgroundClip,
+    element,
+    logLevel,
+    internalState,
+    computedStyle
   });
-  let gradientDrawn = false;
-  if (backgroundImage && backgroundImage !== "none") {
-    const gradientInfo = parseLinearGradient(backgroundImage);
-    if (gradientInfo) {
-      const gradient = createCanvasGradient({
-        ctx: context,
-        rect,
-        gradientInfo
-      });
-      const originalFillStyle = context.fillStyle;
-      context.fillStyle = gradient;
-      context.fillRect(rect.left, rect.top, rect.width, rect.height);
-      context.fillStyle = originalFillStyle;
-      gradientDrawn = true;
-    }
-  }
-  if (!gradientDrawn && background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
-    const originalFillStyle = context.fillStyle;
-    context.fillStyle = background;
-    context.fillRect(rect.left, rect.top, rect.width, rect.height);
-    context.fillStyle = originalFillStyle;
-  }
   await draw({ dimensions: rect, computedStyle, contextToDraw: context });
+  finishBorderRadius();
   drawBorder({
     ctx: context,
     rect,
     borderRadius,
     computedStyle
   });
-  finishBorderRadius();
   drawOutline({
     ctx: context,
     rect,
@@ -1809,7 +2248,9 @@ var drawElement = async ({
     ctx: context,
     rect,
     borderRadius,
-    overflowHidden: computedStyle.overflow === "hidden"
+    overflowHidden: computedStyle.overflow === "hidden",
+    computedStyle,
+    backgroundClip
   });
   finishTransform();
   return {
@@ -1875,12 +2316,19 @@ var getBiggestBoundingClientRect = (element) => {
 };
 
 // src/drawing/get-pretransform-rect.ts
+var MAX_SCALE_FACTOR = 100;
 function getPreTransformRect(targetRect, matrix) {
   const origin = new DOMPoint(0, 0).matrixTransform(matrix);
   const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
   const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
   const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
   const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+  const scaleX = Math.hypot(basisX.x, basisX.y);
+  const scaleY = Math.hypot(basisY.x, basisY.y);
+  const minScale = Math.min(scaleX, scaleY);
+  if (minScale < 1 / MAX_SCALE_FACTOR) {
+    return new DOMRect(0, 0, 0, 0);
+  }
   const effective2D = new DOMMatrix([
     basisX.x,
     basisX.y,
@@ -1907,6 +2355,27 @@ function getPreTransformRect(targetRect, matrix) {
 }
 
 // src/drawing/transform-in-3d.ts
+var vsSource = `
+		attribute vec2 aPosition;
+		attribute vec2 aTexCoord;
+		uniform mat4 uTransform;
+		uniform mat4 uProjection;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+				vTexCoord = aTexCoord;
+		}
+`;
+var fsSource = `
+		precision mediump float;
+		uniform sampler2D uTexture;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_FragColor = texture2D(uTexture, vTexCoord);
+		}
+`;
 function compileShader(shaderGl, source, type) {
   const shader = shaderGl.createShader(type);
   if (!shader) {
@@ -1923,62 +2392,76 @@ function compileShader(shaderGl, source, type) {
 }
 var createHelperCanvas = ({
   canvasWidth,
-  canvasHeight
+  canvasHeight,
+  helperCanvasState
 }) => {
+  if (helperCanvasState.current) {
+    if (helperCanvasState.current.canvas.width !== canvasWidth || helperCanvasState.current.canvas.height !== canvasHeight) {
+      helperCanvasState.current.canvas.width = canvasWidth;
+      helperCanvasState.current.canvas.height = canvasHeight;
+    }
+    helperCanvasState.current.gl.viewport(0, 0, canvasWidth, canvasHeight);
+    helperCanvasState.current.gl.clearColor(0, 0, 0, 0);
+    helperCanvasState.current.gl.clear(helperCanvasState.current.gl.COLOR_BUFFER_BIT);
+    return helperCanvasState.current;
+  }
   const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
   const gl = canvas.getContext("webgl", {
     premultipliedAlpha: true
-  });
+  }) ?? undefined;
   if (!gl) {
     throw new Error("WebGL not supported");
   }
-  const vsSource = `
-        attribute vec2 aPosition;
-        attribute vec2 aTexCoord;
-        uniform mat4 uTransform;
-        uniform mat4 uProjection;
-        varying vec2 vTexCoord;
-
-        void main() {
-            gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
-            vTexCoord = aTexCoord;
-        }
-    `;
-  const fsSource = `
-        precision mediump float;
-        uniform sampler2D uTexture;
-        varying vec2 vTexCoord;
-
-        void main() {
-            gl_FragColor = texture2D(uTexture, vTexCoord);
-        }
-    `;
   const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
   const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
   const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Could not create program");
+  }
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   gl.linkProgram(program);
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     throw new Error("Program link error: " + gl.getProgramInfoLog(program));
   }
-  gl.useProgram(program);
-  gl.clearColor(0, 0, 0, 0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  gl.enable(gl.BLEND);
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  return { canvas, gl, program, vertexShader, fragmentShader };
+  const locations = {
+    aPosition: gl.getAttribLocation(program, "aPosition"),
+    aTexCoord: gl.getAttribLocation(program, "aTexCoord"),
+    uTransform: gl.getUniformLocation(program, "uTransform"),
+    uProjection: gl.getUniformLocation(program, "uProjection"),
+    uTexture: gl.getUniformLocation(program, "uTexture")
+  };
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  const cleanup = () => {
+    gl.deleteProgram(program);
+    const loseContext = gl.getExtension("WEBGL_lose_context");
+    if (loseContext) {
+      loseContext.loseContext();
+    }
+  };
+  helperCanvasState.current = { canvas, gl, program, locations, cleanup };
+  return helperCanvasState.current;
 };
 var transformIn3d = ({
   matrix,
   sourceCanvas,
   untransformedRect,
-  rectAfterTransforms
+  rectAfterTransforms,
+  internalState
 }) => {
-  const { canvas, gl, program } = createHelperCanvas({
+  const { canvas, gl, program, locations } = createHelperCanvas({
     canvasWidth: rectAfterTransforms.width,
-    canvasHeight: rectAfterTransforms.height
+    canvasHeight: rectAfterTransforms.height,
+    helperCanvasState: internalState.helperCanvasState
   });
+  gl.useProgram(program);
+  gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   const vertices = new Float32Array([
@@ -2008,66 +2491,52 @@ var transformIn3d = ({
     1
   ]);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-  const aPosition = gl.getAttribLocation(program, "aPosition");
-  const aTexCoord = gl.getAttribLocation(program, "aTexCoord");
-  gl.enableVertexAttribArray(aPosition);
-  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
-  gl.enableVertexAttribArray(aTexCoord);
-  gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+  gl.enableVertexAttribArray(locations.aPosition);
+  gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+  gl.enableVertexAttribArray(locations.aTexCoord);
+  gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
-  gl.enable(gl.BLEND);
-  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
   const transformMatrix = matrix.toFloat32Array();
   const zScale = 1e9;
   const projectionMatrix = new Float32Array([
-    2 / canvas.width,
+    2 / rectAfterTransforms.width,
     0,
     0,
     0,
     0,
-    -2 / canvas.height,
+    -2 / rectAfterTransforms.height,
     0,
     0,
     0,
     0,
     -2 / zScale,
     0,
-    -1 + 2 * -rectAfterTransforms.x / canvas.width,
-    1 - 2 * -rectAfterTransforms.y / canvas.height,
+    -1 + 2 * -rectAfterTransforms.x / rectAfterTransforms.width,
+    1 - 2 * -rectAfterTransforms.y / rectAfterTransforms.height,
     0,
     1
   ]);
-  const uTransform = gl.getUniformLocation(program, "uTransform");
-  const uProjection = gl.getUniformLocation(program, "uProjection");
-  const uTexture = gl.getUniformLocation(program, "uTexture");
-  gl.uniformMatrix4fv(uTransform, false, transformMatrix);
-  gl.uniformMatrix4fv(uProjection, false, projectionMatrix);
-  gl.uniform1i(uTexture, 0);
+  gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
+  gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
+  gl.uniform1i(locations.uTexture, 0);
   gl.drawArrays(gl.TRIANGLES, 0, 6);
-  gl.disableVertexAttribArray(aPosition);
-  gl.disableVertexAttribArray(aTexCoord);
+  gl.disableVertexAttribArray(locations.aPosition);
+  gl.disableVertexAttribArray(locations.aTexCoord);
   gl.deleteTexture(texture);
   gl.deleteBuffer(vertexBuffer);
   gl.bindTexture(gl.TEXTURE_2D, null);
-  gl.deleteTexture(texture);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  gl.disable(gl.BLEND);
   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   return {
     canvas,
-    rect: rectAfterTransforms,
-    cleanup: () => {
-      const loseContext = gl.getExtension("WEBGL_lose_context");
-      if (loseContext) {
-        loseContext.loseContext();
-      }
-    }
+    rect: rectAfterTransforms
   };
 };
 
@@ -2089,22 +2558,20 @@ var handle3dTransform = ({
   matrix,
   precomposeRect,
   tempCanvas,
-  rectAfterTransforms
+  rectAfterTransforms,
+  internalState
 }) => {
-  const {
-    canvas: transformed,
-    rect: transformedRect,
-    cleanup
-  } = transformIn3d({
+  const { canvas: transformed, rect: transformedRect } = transformIn3d({
     untransformedRect: precomposeRect,
     matrix,
     sourceCanvas: tempCanvas,
-    rectAfterTransforms
+    rectAfterTransforms,
+    internalState
   });
   if (transformedRect.width <= 0 || transformedRect.height <= 0) {
     return null;
   }
-  return [transformed, cleanup];
+  return transformed;
 };
 
 // src/drawing/handle-mask.ts
@@ -2124,7 +2591,9 @@ var handleMask = ({
   const gradient = createCanvasGradient({
     ctx: tempContext,
     rect: rectToFill,
-    gradientInfo
+    gradientInfo,
+    offsetLeft: 0,
+    offsetTop: 0
   });
   tempContext.globalCompositeOperation = "destination-in";
   tempContext.fillStyle = gradient;
@@ -2145,7 +2614,8 @@ var precomposeDOMElement = async ({
     context: tempContext,
     logLevel,
     parentRect: boundingRect,
-    internalState
+    internalState,
+    onlyBackgroundClip: false
   });
   return { tempCanvas, tempContext };
 };
@@ -2235,7 +2705,6 @@ var processNode = async ({
       internalState
     });
     let drawable = tempCanvas;
-    let cleanupWebGL = () => {};
     const rectAfterTransforms = roundToExpandRect(transformDOMRect({
       rect: precomposeRect,
       matrix: totalMatrix
@@ -2253,18 +2722,17 @@ var processNode = async ({
         matrix: totalMatrix,
         precomposeRect,
         tempCanvas: drawable,
-        rectAfterTransforms
+        rectAfterTransforms,
+        internalState
       });
       if (t) {
-        const [transformed, cleanup] = t;
-        drawable = transformed;
-        cleanupWebGL = cleanup;
+        drawable = t;
       }
     }
     const previousTransform = context.getTransform();
     if (drawable) {
       context.setTransform(new DOMMatrix);
-      context.drawImage(drawable, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+      context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
       context.setTransform(previousTransform);
       Internals5.Log.trace({
         logLevel,
@@ -2276,7 +2744,6 @@ var processNode = async ({
       });
     }
     reset();
-    cleanupWebGL();
     return { type: "skip-children" };
   }
   const { cleanupAfterChildren } = await drawElement({
@@ -2287,7 +2754,9 @@ var processNode = async ({
     opacity,
     totalMatrix,
     parentRect,
-    logLevel
+    logLevel,
+    element,
+    internalState
   });
   reset();
   return { type: "continue", cleanupAfterChildren };
@@ -2411,18 +2880,19 @@ function findLineBreaks(span, rtl) {
 // src/drawing/text/draw-text.ts
 var drawText = ({
   span,
-  logLevel
+  logLevel,
+  onlyBackgroundClip
 }) => {
   const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
     const {
       fontFamily,
       fontSize,
       fontWeight,
-      color,
       direction,
       writingMode,
       letterSpacing,
-      textTransform
+      textTransform,
+      webkitTextFillColor
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
@@ -2435,7 +2905,7 @@ var drawText = ({
     contextToDraw.save();
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
-    contextToDraw.fillStyle = color;
+    contextToDraw.fillStyle = onlyBackgroundClip ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     const isRTL = direction === "rtl";
     contextToDraw.textAlign = isRTL ? "right" : "left";
@@ -2469,7 +2939,8 @@ var handleTextNode = async ({
   logLevel,
   parentRect,
   internalState,
-  rootElement
+  rootElement,
+  onlyBackgroundClip
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -2481,7 +2952,7 @@ var handleTextNode = async ({
   const value = await processNode({
     context,
     element: span,
-    draw: drawText({ span, logLevel }),
+    draw: drawText({ span, logLevel, onlyBackgroundClip }),
     logLevel,
     parentRect,
     internalState,
@@ -2492,6 +2963,38 @@ var handleTextNode = async ({
   return value;
 };
 
+// src/tree-walker-cleanup-after-children.ts
+var createTreeWalkerCleanupAfterChildren = (treeWalker) => {
+  const cleanupAfterChildren = [];
+  const checkCleanUpAtBeginningOfIteration = () => {
+    for (let i = 0;i < cleanupAfterChildren.length; ) {
+      const cleanup = cleanupAfterChildren[i];
+      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
+        cleanup.cleanupFn();
+        cleanupAfterChildren.splice(i, 1);
+      } else {
+        i++;
+      }
+    }
+  };
+  const addCleanup = (element, cleanupFn) => {
+    cleanupAfterChildren.unshift({
+      element,
+      cleanupFn
+    });
+  };
+  const cleanupInTheEndOfTheIteration = () => {
+    for (const cleanup of cleanupAfterChildren) {
+      cleanup.cleanupFn();
+    }
+  };
+  return {
+    checkCleanUpAtBeginningOfIteration,
+    addCleanup,
+    cleanupInTheEndOfTheIteration
+  };
+};
+
 // src/compose.ts
 var walkOverNode = ({
   node,
@@ -2499,7 +3002,8 @@ var walkOverNode = ({
   logLevel,
   parentRect,
   internalState,
-  rootElement
+  rootElement,
+  onlyBackgroundClip
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -2519,46 +3023,55 @@ var walkOverNode = ({
       logLevel,
       parentRect,
       internalState,
-      rootElement
+      rootElement,
+      onlyBackgroundClip
     });
   }
   throw new Error("Unknown node type");
 };
+var getFilterFunction = (node) => {
+  if (!(node instanceof Element)) {
+    return NodeFilter.FILTER_ACCEPT;
+  }
+  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;
+};
 var compose = async ({
   element,
   context,
   logLevel,
   parentRect,
-  internalState
+  internalState,
+  onlyBackgroundClip
 }) => {
-  const cleanupAfterChildren = [];
-  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
-    if (node instanceof Element) {
-      if (node.parentElement instanceof SVGSVGElement) {
-        return NodeFilter.FILTER_REJECT;
-      }
-      const computedStyle = getComputedStyle(node);
-      return computedStyle.display === "none" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+  const treeWalker = document.createTreeWalker(element, onlyBackgroundClip ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+  if (onlyBackgroundClip) {
+    treeWalker.nextNode();
+    if (!treeWalker.currentNode) {
+      return;
     }
-    return NodeFilter.FILTER_ACCEPT;
-  });
+  }
+  const {
+    checkCleanUpAtBeginningOfIteration,
+    addCleanup,
+    cleanupInTheEndOfTheIteration
+  } = createTreeWalkerCleanupAfterChildren(treeWalker);
   while (true) {
-    for (let i = 0;i < cleanupAfterChildren.length; ) {
-      const cleanup = cleanupAfterChildren[i];
-      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
-        cleanup.cleanupFn();
-        cleanupAfterChildren.splice(i, 1);
-      } else {
-        i++;
-      }
-    }
+    checkCleanUpAtBeginningOfIteration();
     const val = await walkOverNode({
       node: treeWalker.currentNode,
       context,
       logLevel,
       parentRect,
       internalState,
-      rootElement: element
+      rootElement: element,
+      onlyBackgroundClip
     });
     if (val.type === "skip-children") {
       if (!skipToNextNonDescendant(treeWalker)) {
@@ -2566,19 +3079,14 @@ var compose = async ({
       }
     } else {
       if (val.cleanupAfterChildren) {
-        cleanupAfterChildren.unshift({
-          element: treeWalker.currentNode,
-          cleanupFn: val.cleanupAfterChildren
-        });
+        addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
       }
       if (!treeWalker.nextNode()) {
         break;
       }
     }
   }
-  for (const cleanup of cleanupAfterChildren) {
-    cleanup.cleanupFn();
-  }
+  cleanupInTheEndOfTheIteration();
 };
 
 // src/take-screenshot.ts
@@ -2599,7 +3107,8 @@ var createFrame = async ({
     context,
     logLevel,
     parentRect: new DOMRect(0, 0, width, height),
-    internalState
+    internalState,
+    onlyBackgroundClip: false
   });
   return canvas;
 };
@@ -3130,6 +3639,7 @@ async function internalRenderStillOnWeb({
     });
     throw err;
   } finally {
+    internalState.cleanup();
     cleanupScaffold();
   }
 }