[cssom-1] Trim the name argument CSSStyleDeclaration.setProperty()

[cdoublev]

This would also apply to CSSStyleDeclaration.getPropertyValue(), and possibly CSSStyleValue.parse() and CSSFontFeatureValuesMap.*().

For CSSStyleDeclaration and CSSStyleValue, when name is not a custom property name, it is normalized to lowercase. I feel like it should be trimmed too: style.setProperty(' /**/ color', 'green') would be valid. It is currently invalid in all browsers (with or without the comment). There is no correspond test on WPT.

Trimming whitespaces/comments is consistent with the CSS parser entry points (and algorithms). They are either ignored or trimmed in value (style.setProperty('color', ' /**/ green ') is valid), CSSStyleSheet.insertRule(), CSSStyleSheet.replace*(), MediaList.appendMedium(), etc.

[Loirooriol]

The API expects the raw property name, not a CSS value.

For example, .setProperty("--a b", value) sets the --a b property, which in CSS you would need to escape with something like --a\ b: value.

And of course this is not just for setProperty, the item() indexing returns the raw name, getPropertyValue expects the raw name, etc. Parsing/serializing some of them as CSS values but not others would just break things.

And I don't really see the benefit of changing them all.

[cdoublev]

Ah ok, thanks for letting me know about this.

I see this test for that on WPT. So this similar to CSSKeyframesRule.name then, which is inconsistent with CSSCounterStyleRule.name by the way: browsers parse its input as a CSS value, against <counter-style-name>.

Is it normal that this is not clearly specified? Eg. with "when name is a custom property name, replace name with CSS.escape(name).

Now this does not prevent trimming whitespaces and comments. There is no benefit, except consistency:

style.setProperty(' /**/ color /**/ ', 'green') // invalid
style.cssText = ' /**/ color /**/ : green' // valid
style.setProperty('color', ' /**/ green /**/ ') // valid
styleSheet.insertRule(' /**/ style {} /**/ ') // valid
styleSheet.media.appendMedium(' /**/ (width: 1px) /**/ ') // valid