@remotion/web-renderer: Support background-clip CSS property

[JonnyBurger]

No description provided.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
bugs	Ready	Preview, Comment	Jan 2, 2026 9:48pm
remotion	Ready	Preview, Comment	Jan 2, 2026 9:48pm

[Copilot]

Pull request overview

This PR adds support for the CSS background-clip property in the web renderer, enabling backgrounds to be clipped to different box areas (border-box, padding-box, content-box) and to text.

Key changes:

• Implemented background clipping logic with support for all standard values including text
• Refactored background drawing into a dedicated module
• Added helper functions to calculate clipping boundaries based on padding and border dimensions

Reviewed changes

Copilot reviewed 20 out of 23 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
draw-background.ts	New file implementing background rendering with clip support
get-padding-box.ts	New file calculating padding/content box boundaries for clipping
get-clipped-background.ts	New file handling background-clip: text via composition
draw-element.ts	Refactored to use new background drawing system
border-radius.ts	Updated to calculate border radius for clipped boxes
parse-linear-gradient.ts	Added offset parameters for gradient positioning
draw-text.ts	Added support for rendering text with background-clip
handle-text-node.ts	Passes onlyBackgroundClip flag to text drawing
tree-walker-cleanup-after-children.ts	New utility for managing cleanup in tree traversal
Test files	Added test fixture and test case for background-clip functionality

[Copilot]

The Y coordinate calculation is using offsetLeft instead of offsetTop. This should be boundingRect.top - offsetTop to correctly position the background fill rectangle.

Suggested change

	boundingRect.top - offsetLeft,
	boundingRect.top - offsetTop,

[JonnyBurger]

@claude one test is failing but it is okay, just increase the tolerance to 0.03

[claude]

Claude finished @JonnyBurger's task in 59s —— View job

---

Task: Increase test tolerance to 0.03

• Read the background-clip test file
• Update tolerance to 0.03
• Commit and push changes

Summary

Successfully increased the allowedMismatchedPixelRatio from 0.01 to 0.03 in the background-clip test file (packages/web-renderer/src/test/background-clip.test.tsx). The change has been committed and pushed to the background-clip-text-2 branch.

---

|