[csswg-drafts] [css-backgrounds] [css-masking] [cssom] serialization of the computed value for `background` and `mask` (#8453)

graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-backgrounds] [css-masking] [cssom] serialization of the computed value for `background` and `mask` ==
Safari is failing some animation WPT tests for the `mask` property because of how it serializes the computed value for that shorthand property. When setting `mask: url("http://example.com/")`, here is what browsers currently return when `getComputedStyle(element).mask` is called:

- Safari: `url("http://example.com/") 0% 0% / auto repeat border-box border-box add match-source`
- Chrome: `url("http://example.com/")`
- Firefox: `url("http://example.com/")`

So it appears both Chrome and Firefox have some logic to disregard initial values in the computed style serialization for `mask`. 

Looking at specs, I couldn't find where this would be specified though. For [`mask`](https://drafts.fxtf.org/css-masking/#the-mask) the _computed value_ entry just says "see individual properties". Looking at the CSSOM spec, I don't see anything specific in the specs for either [`getPropertyValue()`](https://www.w3.org/TR/cssom-1/#dom-cssstyledeclaration-getpropertyvalue) or the [serialize a CSS value](https://www.w3.org/TR/cssom-1/#serialize-a-css-value) procedure about the [computed flag](https://www.w3.org/TR/cssom-1/#cssstyledeclaration-computed-flag) with respect to shorthand properties.

It's also worth looking at the `background` property which is a pretty similar property to `mask` in terms of the various longhand properties it encompasses and how it serializes. Taking the simple `background: url("http://example.com/")`, here is what browsers currently return when `getComputedStyle(element).background` is called:

- Safari: `rgba(0, 0, 0, 0) url("http://example.com/") repeat scroll 0% 0% / auto padding-box border-box`
- Chrome: `rgba(0, 0, 0, 0) url("http://example.com/") repeat scroll 0% 0% / auto padding-box border-box`
- Firefox: `url("http://example.com/")`

So Firefox serializes the computed value for `background` and `mask` with a similar approach. Safari as well, although it makes no attempt to remove initial values for a compact serialization. Chrome uses different approaches.

It seems to me that these cases, and the serialization of shorthands for computed style in general, should be specified.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8453 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 15 February 2023 09:38:48 UTC