[cssom] Serialization of custom identifiers

[ewilligers]

https://drafts.csswg.org/css-grid/#propdef-grid-template-areas

Note: These rules can produce cell names that do not match the syntax, such as "1st 2nd 3rd", which requires escaping when referencing those areas by name in other properties, like grid-row: \31st; to reference the area named 1st.

The following parsing tests show variation between browsers in how custom identifiers are serialized:

test_valid_value("grid-column-end",  "\\31st", "\\31 st"); // passes in Blink, Firefox
test_valid_value("grid-column-end",  "\\31st", "1st"); // passes in Edge
test_valid_value("grid-column-end",  "\\31st", '"1st"'); // passes in WebKit

None of these serializations are accepted by any of the main browsers as a property value: none of the browsers round-trip. If we would like to round trip, we would need to serialize as "\\31st".

[upsuper]

It accepts <custom-ident> which clearly indicates that Edge and WebKit are wrong (the value they serialize is invalid). And CSSOM where serialization is generally defined doesn't seem to contain anything about that. I guess we can get serialization of <custom-ident> defined to do the Blink / Gecko way.

[tabatkins]

Untagging Values, as it has nothing to say about how to spell these types. The Syntax spec is quite clear here - \31st and \31 st are both valid ways to spell an ident containing the characters "1st". It looks like CSSOM is lacking detail on how to serialize arbitrary idents, but round-tripping is always an implicit requirement, so \31 st is probably the best way do it, and luckily it's what Blink and Firefox already do. This should be clarified in CSSOM.

Safari and Edge are just plain wrong on this issue - 1st and "1st" are both invalid idents (they're a dimension and a string, respectively, neither of which are accepted by these properties).