[css-counter-styles-3] Setting CSSCounterStyleRule.name should exclude invalid <custom-ident>

[cdoublev]

The procedure to set CSSCounterStyleRule.name does not exclude invalid <custom-ident>:

On setting the name attribute, run the following steps:

1. If the value is an ASCII case-insensitive match for "none" or one of the non-overridable counter-style names, do nothing and return.
2. If the value is an ASCII case-insensitive match for any of the predefined counter styles, lowercase it.
3. Replace the associated rule’s name with an identifier equal to the value.

I suggest:

On setting, the name attribute must replace its value by the result of parsing the given value against <counter-style-name> if this result is valid, otherwise it must not replace its value.

[tabatkins]

Hmmm. So, the reason it's written like that instead of parsing is because we generally don't like having to deal with CSS escapes in simple JS strings like this. Like, parsing as CSS means that "\031 st" doesn't work, you need to double-escape it as "\\031 st". And generally, the CSS parsing restrictions aren't really relevant here, since we're not in CSS. Being able to make a counter called "1st" should be easily doable in JS, even if you have to escape it in your stylesheet.

But we should update it to pick up the custom-ident restrictions, yeah.

[cdoublev]

Ok, I understand, thank you. CSSCounterStyleRule.name should accept any input that can be interpreted as a <custom-ident> when escaped: basically, any non-empty input.

I note that CSSCounterStyleRule.name = '1st' currently does not work in Chrome and FF, like CSSFontFeatureValues.fontFamily = '1st', but the latter does not seem to be supported in FF. However CSSKeyframesRule.name = '1st' works (cf. #9364).

It may be appropriate to serialize an escaped value (like in FF) since CSSKeyframesRule.name = '{}' becomes a valid <custom-ident> when escaped.

Also, FF replaces an empty string with none, whereas declaring style.animationName with one of the following values removes any existing declaration.

keyframes.name = ''
keyframes.name;    // ''
keyframes.cssText; // `@keyframes  {}` in Chrome, `@keyframes none {}` in FF
keyframes.name = '\
'
keyframes.name;    // ''
keyframes.cssText; // `@keyframes  {}` in Chrome, `@keyframes none {}` in FF