[cssom] In what order should properties be serialized?

[csnardi]

https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block defines that shorthands should be considered in preferred order. However, it says no such thing for general longhands/properties, or how shorthands should be ordered with longhands.

This can lead to interoperability concerns, for example in https://wpt.fyi/css/css-variables/variable-cssText.html with the test of target9 where Firefox/Chrome order margin-right first but Edge orders margin-top first.

[upsuper]

CSS declaration block is an ordered collection of declarations according to its definition, and that that order is the specified order. Serialization is based on that order.

That means, in this case, margin: var(--prop); margin-top: 10px; should be parsed into

/* margin-top: {placeholder}; <- dropped in favor of the later one */
margin-right: {placeholder};
margin-bottom: {placeholder};
margin-left: {placeholder};
margin-top: 10px; /* <- the new one */

So I would say the behavior of Chrome and Firefox is expected, and this is a bug of Edge.

[upsuper]

I tend to close this as the spec should be clear enough for this case. The test should be fixed.

[csnardi]

Yep, I didn't see that section. Looks like the canonical order should be specified in the individual specs, which for some properties isn't quite clear, e.g. for border (https://drafts.csswg.org/css-backgrounds-3/#propdef-border). I would suppose it should be border-top, border-right, border-bottom, border-left, but Chrome seems to serialize border-top, border-bottom, border-left, border-right and Firefox border-top, border-left, border-bottom, border-right. However, it isn't particularly clear which would be right.

[upsuper]

Yeah, in that case probably issues should be raised to the individual specs to make them specify the canonical order clearly.