Intent to Ship: 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

TAG review

No information provided

TAG review status

Not applicable

Goals for experimentation

None

Risks

Interoperability and Compatibility

No information provided

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1983187#c6)

WebKit: Shipped/Shipping (https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes#:~:text=Added%20support%20for%20xywh,offset%2Dpath.%20)

Web developers: No signals

Other signals:

Ergonomics

No

Activation

No

Security

No

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

No

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes
It's a css feature, so should be supported by all platforms.

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-shapes/parsing/shape-outside-computed.html https://wpt.fyi/results/css/css-shapes/shape-functions/xywh-function-computed.html https://wpt.fyi/results/css/css-shapes/shape-functions/xywh-function-valid.html https://wpt.fyi/results/css/css-shapes/shape-outside/assorted/float-retry-push-rect.html https://wpt.fyi/results/css/css-shapes/shape-outside/assorted/float-retry-push-xywh.html

Flag name on about://flags

No information provided

Finch feature name

CSSShapeOutsideRectAndXywhSupport

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

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

Measurement

No

Estimated milestones

Shipping on desktop	149
Shipping on Android	149
Shipping on WebView	149
Shipping on iOS	149

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

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

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69ce5413.050a0220.15440a.0029.GAE%40google.com

This intent message was generated by Chrome Platform Status.