Intent to Ship: CSS background-clip: border-area

[Chromestatus]

Contact emails

cg...@chromium.org, yio...@gmail.com

Specification

https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-border-area

Summary

Implements the border-area value for the CSS background-clip property, as defined in CSS Backgrounds Level 4. background-clip: border-area clips an element's background to the area painted by its border strokes, taking border-width and border-style into account while ignoring transparency from border-color. This enables gradient borders without border-image. WebKit already ships this feature; this implementation brings Chromium to parity.

Blink component

Blink>CSS

Web Feature ID

background-clip-border-area

Motivation

There is currently no ergonomic way to clip a background to the visible border geometry in CSS. Authors who want gradient or image borders must use border-image, which is complex, overrides other border styling, and does not compose well with other properties. The border-area clip value provides a clean, declarative solution to this problem. WebKit already ships this feature, and it is part of the actively developed CSS Backgrounds Level 4 specification.

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: No signal (https://github.com/mozilla/standards-positions/issues/1397)

WebKit: Shipped/Shipping (https://webkit.org/blog/16214/background-clip-border-area)

Web developers: No signals

Other signals:

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 information provided

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

Yes

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

Yes

Flag name on about://flags

No information provided

Finch feature name

CSSBackgroundClipBorderArea

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/329302543

Estimated milestones

Shipping on desktop	150
Shipping on Android	150
Shipping on WebView	150

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/6234471210811392?gate=4732230498910208

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69bbc3c0.050a0220.1a988.00f7.GAE%40google.com

This intent message was generated by Chrome Platform Status.