[csswg-drafts] [will-change] Casing of `will-change` values is not interoperable (#8039)

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

== [will-change] Casing of `will-change` values is not interoperable ==
https://drafts.csswg.org/css-will-change/#will-change

The grammar of `will-change` is `auto | [ scroll-position | contents | <custom-ident> ]#`.

CSS Values says that [pre-defined idents](https://w3c.github.io/csswg-drafts/css-values/#keywords) "are interpreted ASCII case-insensitively" and [custom idents](https://w3c.github.io/csswg-drafts/css-values/#custom-idents) "are fully case-sensitive".

So I would expect this:

```js
var {style} = document.body;
style.willChange = "AuTo";
style.willChange; // "auto"
style.willChange = "sCroLl-pOsiTion, cOntenTs, lOreMipsUm, cOloR, --Foo, --foO";
style.willChange; // "scroll-position, contents, lOreMipsUm, cOloR, --Foo, --foO"
```

`AuTo` becoming `auto` happens in Gecko, Blink and WebKit. But in the 2nd testcase,

 - Gecko: `"sCroLl-pOsiTion, cOntenTs, lOreMipsUm, cOloR, --Foo, --foO"`
 - Blink: `"scroll-position, contents, color"`
 - WebKit: `"scroll-position, contents, lOreMipsUm, color, --Foo, --foO"`

So Firefox keeps the casing even for the pre-defined idents. This seems to be against [CSSOM](https://drafts.csswg.org/cssom/#serialize-a-css-component-value) that says "The keyword converted to ASCII lowercase".

WebKit also seems to convert to lowercase the custom idents that are a case-insensitive match for a built-in property.

And Blink is like WebKit, but it also removes the custom idents that are not a case-insensitive match for a built-in property.

Then I would like to confirm whether my expectation is right, and whether it should change to align with some browser.

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


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

Received on Monday, 7 November 2022 19:40:30 UTC