Web-Facing Change PSA: Improved CSS masking for SVG

[Philip Rogers]

Contact emails

f...@opera.com

Specification

https://drafts.fxtf.org/css-masking/#positioned-masks

Summary

This is a follow-on to the improved CSS mask support in chromium 120 (https://chromestatus.com/feature/5839739127332864) and adds new mask support to SVG (multiple masks, as well as mask-mode, mask-composite, mask-position, and mask-repeat). In addition, remote SVG masks (e.g., mask: url(masks.svg#star)) are now supported. Explainer: https://docs.google.com/document/d/1IzQv56NzfV1hA6YPr2j1chtb5qijNxykkYY7JyccZgc/edit?usp=sharing

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Firefox supports all of this behavior. There is low compatibility risk as this adds new support that previously wouldn't work.

Gecko: Shipped/Shipping Firefox has nearly 100% pass rate on css-masking WPT tests.

WebKit: No signal

Web developers: Strongly positive (https://github.com/web-platform-tests/interop/issues/148) This is part of interop-2023.

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?

None

Debuggability

Basic debugging support with existing CSS support in devtools.

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

Yes

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

Yes

https://wpt.fyi/results/css/css-masking?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop

Flag name on chrome://flags

Finch feature name

CSSMaskingInterop

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1496470

Estimated milestones

Shipping on desktop

121

Shipping on Android

121

Shipping on WebView

121

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).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5138520058626048

This intent message was generated by Chrome Platform Status.