← Back to release summary

Clip-path xywh() and rect() values

Category

CSS

Type

Chromium catches up

Status

Enabled by default (Chrome 119)

Intent stage

None

• Breaking change: No
• Enterprise impact: None
• Spec maturity: Published standard
• Web Platform Tests: Yes

WPT details: This is part of Interop 2023 and is covered by tests under "wpt/css/css-masking": https://wpt.fyi/results/css/css-masking?label=experimental&label=master&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2023-cssmasking

Summary

Support the xywh() and rect() values on clip-path, which make it easier to specify rectangular or rounded-rectangular clips.

Standards & signals

• Specification: https://www.w3.org/TR/css-shapes/#supported-basic-shapes
• Firefox: Shipped/Shipping
• Safari: Shipped/Shipping
• Web developers: Positive
• Tracking bug: https://crbug.com/1481015

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=label%3Ainterop-2023-cssmasking
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Clip-path%20xywh()%20and%20rect()%20values
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Clip-path%20xywh()%20and%20rect()%20values
• Baseline status: https://webstatus.dev/?q=Clip-path%20xywh()%20and%20rect()%20values

View on chromestatus.com