@remotion/web-renderer: Support raster URL masks

[JonnyBurger]

Summary

• support a single same-origin, data:, or blob: raster mask-image: url() in @remotion/web-renderer
• load, decode, cache, time out, and cancel mask resources inside the renderer for deterministic output
• constrain URL masks to alpha semantics and explicitly supported size, position, repeat, origin, and clip values
• bypass native HTML-in-canvas capture for URL-mask subtrees and cover the behavior with cross-browser visual tests
• document the supported URL-mask subset from v4.0.501

Tests

• bun run build
• bun run stylecheck
• bun run testwebrenderer (669 passed, 21 skipped)

Closes #7006

Preview

• Client-side rendering limitations

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 29, 2026 9:42am
remotion	Ready	Preview, Comment	Jul 29, 2026 9:42am

[pullfrog]

Reviewed changes — adds raster URL mask support to @remotion/web-renderer with deterministic image loading, caching, abort, and timeout semantics, plus cross-browser screenshot tests.

• Discriminated MaskImageInfo type — parseMaskImage in mask-image.ts now returns either a linear-gradient or URL mask via a tagged union, with a manual CSS url() parser and a validateUrlMaskImageStyle guard that rejects unsupported mask-size, mask-position, mask-repeat, mask-mode, mask-origin, and mask-clip values.
• MaskImageLoaderState and getMaskImage — new file mask-image-loader.ts manages a Map-based promise cache, ImageBitmap lifecycle via [Symbol.dispose], timeout and AbortSignal-driven cancellation, same-origin/data:/blob: URL validation, createImageBitmap decoding, and fetch with credentials: 'same-origin'.
• handleMask now async — branches on mask type: linear gradients use the existing createCanvasGradient path; URL masks load the bitmap via getMaskImage and apply it with drawImage + destination-in.
• Bypass HTML-in-canvas for URL-mask subtrees — containsUrlMaskImage walks descendants and, when a URL mask is found, skips drawWithHtmlInCanvas in take-screenshot.ts (with shouldWarn: false) so the manual DOM composer handles the mask deterministically.
• makeInternalState accepts signal and timeout — renderMediaOnWeb and renderStillOnWeb threads the render abort signal and delayRenderTimeoutInMilliseconds through to the mask loader.
• Docs — limitations.mdx entry for raster URL masks available from v4.0.501, listing supported and unsupported config.
• Tests — three browser tests (same-origin raster mask at 1x and 2x, cross-origin rejection), 6 new screenshot baselines covering chromium/firefox/webkit.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}