[cssom-1] Serialization for declaration block with variable reference in shorthand may not be useful

[upsuper]

The serialization for declaration block with variable reference in shorthand while some longhand is set differently can lead to undesired result, i.e. it would produce non-idempotent result.

For example, for a declaration block like

margin: var(--foo);
margin-top: 10px;

in the current algorithm would be serialized to something like

margin-right: ;
margin-bottom: ;
margin-left: ;
margin-top: 10px;

which apparently doesn't have the same meaning as before. This is unfortunate.

We should probably change the serialization algorithm to that, when we find a longhand which is expanded from some shorthand with variable reference, the shorthand reference is always serialized. If there are longhands that have been changed from the expansion of shorthand (like margin-top in the case above), the longhands are not added to already serialized, so that their value is still preserved and will be serialized later.

The above algorithm should works fine with declaration block from parsing, since the parsing result uses specified order, and thus any update to longhand which was expanded from a shorthand would always come after the shorthand. However, there is currently some problem with CSSOM setters, because in the spec they still set in place rather than append.

For that, we've resolved in #1898 (comment) that setters should append rather than set in place, so this is probably not a problem anyway. We may still want that change to happen first, though.

cc @csnardi

[upsuper]

It becomes complicated again that #2924 makes it not append, but just has some constraints...

[tabatkins]

Commenting to not that legacy shorthands (which serialize to the non-legacy shorthands that replaced them) are a subset of this issue, but are handled slightly differently in CSSOM, so we should make sure they're solved properly at the same time as this.