[cssom-1] Setting a custom property value to empty string

[cdoublev]

This is a follow-up on this comment.

Regarding serialization: a problem [...] is that setProperty("--foo", "", ...) is currently defined as being equivalent to removeProperty("--foo").

For example:

el.style.setProperty('--custom', '')
el.style.border = '1px solid var(--custom)'
getComputedStyle(el).border // '0px none rgb(0, 0, 0)'
el.style.setProperty('--custom', ' ')
getComputedStyle(el).border // '1px solid rgb(0, 0, 0)'

--custom is first unset. The border declaration is invalid at computed value time because the initial --custom value is the guaranteed-invalid value. Then --custom is set to empty string from a whitespace in the input. The border declaration computes to 1px solid with the initial border-color.

Option 1: (proposed in the comment)

changing the second argument to a space might be enough to avoid that.

But it does not round-trip:

If so, then I wonder whether getProperty on a custom property should similarly return a space if the value is an empty sequence of tokens, so as to reduce bugs where a subsequent setProperty fails to restore the value current at the time of getProperty.

Option 2:

Do not remove a custom property when provided an empty string; use .removeProperty() instead.

  2. If property is not a custom property, follow these substeps:
    1. Let property be property converted to ASCII lowercase.
    2. If property is not a case-sensitive match for a supported CSS property, then return.
- 3. If value is the empty string, invoke removeProperty() with property as argument and return.
+   3. If value is the empty string, invoke removeProperty() with property as argument and return.

[Loirooriol]

Duplicate of #9847