Intent to Ship: CSS masking

Philip Rogers

unread,

Oct 25, 2023, 10:00:29 AM10/25/23

to blink-dev

Contact emails

p...@chromium.org, tca...@chromium.org, yo...@chromium.org, f...@opera.com

Explainer

None

Specification

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

Design docs

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Summary

CSS mask, and related properties such as mask-image, mask-mode, etc, are used to hide an element (partially or fully) by masking or clipping the image at specific points. This feature unprefixes the -webkit-mask* properties and brings them up to spec. This includes mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite, as well as the "mask" shorthand. Local mask-image references are supported, serialization now matches the spec, and accepted values now match the spec (for example, "add" instead of "source-over" for mask-composite).

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

There is some compatibility risk in adding an unprefixed feature while still supporting the prefixed version. This is minimized as we are following the same pattern Webkit has already shipped. In addition, Firefox supports several of the legacy -webkit- prefixed properties too.

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

WebKit: Shipped/Shipping Safari has shipped much of the unprefixing of these properties (https://bugs.webkit.org/show_bug.cgi?id=229082), as well as many implementation improvements, though some interop fixes are still in development.

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

None

Finch feature name

CSSMaskingInterop

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1418401

Measurement

https://chromestatus.com/metrics/css/timeline/popularity/772

Estimated milestones

Shipping on desktop	120
DevTrial on desktop	120

Shipping on Android	120
DevTrial on Android	120

Shipping on WebView

120

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/5839739127332864

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/C6hENTlF0NM

This intent message was generated by Chrome Platform Status.

Mike Taylor

unread,

Oct 25, 2023, 10:24:34 AM10/25/23

to Philip Rogers, blink-dev

On 10/25/23 10:00 AM, Philip Rogers wrote:

Contact emails
p...@chromium.org, tca...@chromium.org, yo...@chromium.org, f...@opera.com

Explainer
None

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

Design docs
https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Summary

CSS mask, and related properties such as mask-image, mask-mode, etc, are used to hide an element (partially or fully) by masking or clipping the image at specific points. This feature unprefixes the -webkit-mask* properties and brings them up to spec. This includes mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite, as well as the "mask" shorthand. Local mask-image references are supported, serialization now matches the spec, and accepted values now match the spec (for example, "add" instead of "source-over" for mask-composite).

Blink component
Blink>CSS

TAG review
None

TAG review status
Not applicable

Risks

Interoperability and Compatibility

There is some compatibility risk in adding an unprefixed feature while still supporting the prefixed version. This is minimized as we are following the same pattern Webkit has already shipped. In addition, Firefox supports several of the legacy -webkit- prefixed properties too.

Is there anywhere that documents the differences, beyond what is written in the summary? It would be nice if we can capture that in the Compat standard, where they are no longer simple aliases.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJgFLLsO8COSdLuHsEaM2TQWzAf6%2B5wJLt0PcR3QEoyyOb4Rhw%40mail.gmail.com.

Philip Rogers

unread,

Oct 26, 2023, 1:20:01 PM10/26/23

to blink-dev, Mike Taylor, blink-dev, Philip Rogers

On Wednesday, October 25, 2023 at 7:24:34 AM UTC-7 Mike Taylor wrote:

On 10/25/23 10:00 AM, Philip Rogers wrote:

Contact emails p...@chromium.org, tca...@chromium.org, yo...@chromium.org, f...@opera.com

Explainer None

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

Design docs https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Summary
CSS mask, and related properties such as mask-image, mask-mode, etc, are used to hide an element (partially or fully) by masking or clipping the image at specific points. This feature unprefixes the -webkit-mask* properties and brings them up to spec. This includes mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite, as well as the "mask" shorthand. Local mask-image references are supported, serialization now matches the spec, and accepted values now match the spec (for example, "add" instead of "source-over" for mask-composite).

Blink component Blink>CSS

TAG review None

TAG review status Not applicable

Risks

Interoperability and Compatibility
There is some compatibility risk in adding an unprefixed feature while still supporting the prefixed version. This is minimized as we are following the same pattern Webkit has already shipped. In addition, Firefox supports several of the legacy -webkit- prefixed properties too.

Is there anywhere that documents the differences, beyond what is written in the summary? It would be nice if we can capture that in the Compat standard, where they are no longer simple aliases.

Good idea. I've created a document describing the differences at the following link:

https://docs.google.com/document/d/14TtdFgYJ6TJuVzSE2Ra_gtuy20VNRgIKcbwiF3hg9aQ/preview?usp=sharing

Philip Jägenstedt

unread,

Oct 27, 2023, 5:55:20 AM10/27/23

to Philip Rogers, blink-dev, Mike Taylor, Philip Rogers

LGTM1

Thanks for writing that up, Philip! I believe that should be helpful for release notes and MDN docs down the line.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/3546ce55-11a4-4017-ae43-69d57a5d20e5n%40chromium.org.

Mike Taylor

unread,

Oct 27, 2023, 7:24:57 AM10/27/23

to Philip Jägenstedt, Philip Rogers, blink-dev, Philip Rogers

LGTM2.

(I filed https://github.com/whatwg/compat/issues/252 - thanks for the doc!)

Chris Harrelson

unread,

Oct 27, 2023, 11:31:48 AM10/27/23

to Mike Taylor, Philip Jägenstedt, Philip Rogers, blink-dev, Philip Rogers

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68b9d7ec-650e-40f3-98cd-679a9ea09f8a%40chromium.org.

Reply all

Reply to author

Forward