Intent to Prototype: Support rect() and xywh() in shape-outside

[Chromestatus]

Contact emails

cg...@chromium.org

Specification

https://drafts.csswg.org/css-shapes/#shape-outside-property

Summary

Adds support for the rect() and xywh() basic shape functions in the CSS shape-outside property. These functions allow developers to define float exclusion shapes using rectangle coordinates, aligning Chrome with Firefox and Safari which already support this feature.

Blink component

Blink>CSS

Web Feature ID

shape-outside

Motivation

The CSS `shape-outside` property currently supports `inset()`, `circle()`, `ellipse()`, and `polygon()` basic shapes, but lacks support for `rect()` and `xywh()` — two modern basic shapes defined in the CSS Basic Shapes Level 2 specification. Web developers who use `rect()` and `xywh()` in other CSS properties (such as `clip-path` and `offset-path`) are forced to use the older `inset()` workaround when they need equivalent functionality with `shape-outside`. Firefox and WebKit already support `rect()` and `xywh()` in `shape-outside`, making this a compatibility gap for Chrome. Adding support improves consistency across CSS shape functions, reduces developer friction, and aligns Chrome's implementation with both the CSS Basic Shapes specification and other major browser engines.

Initial public proposal

No information provided

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/490343453

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6323071520735232?gate=5077985603485696

This intent message was generated by Chrome Platform Status.

[Chromestatus]