[cssom] Serialization of <family-name> doesn't match what browsers do

[upsuper]

The spec currently treats <family-name> the same way as <string>, which doesn't match what browsers currently do.

This is a simple page for showing what browsers currently do for <font-family>: https://jsfiddle.net/hzoazsqb/

(Note that, Firefox has some bug around which was just fixed in 60, and that is also the reason I raise this issue.)

Basically, browsers all serialize <family-name> as identifier(s) sometimes. In Gecko, we try to preserve the original form of input as much as possible, unless we hit tricky case (e.g. escaped whitespace). Blink seems to always use identifier if it doesn't contain any whitespace, and use string when it contains any. Edge seems to preserve the original form but ignores the escaped white-spaces.

So browsers don't agree with each other, and they all disagree with the spec text. I guess we should have the spec fixed to allow serializing to identifier(s), and probably allow browsers to do whatever they want as far as the serialization is equivalent to what is specified.

Note that, it seems to me that Edge's behavior is wrong. Foo\␣␣Bar is a different value than Foo␣␣Bar. The latter is equivalent to "Foo␣Bar" while the former is "Foo␣␣Bar", as far as I can tell from the spec. (This kind of case is tricky to handle so we decide to just use string for those cases in Gecko.)