[cssom] Shortest serialization principle with multiple minimal possibilities

[Loirooriol]

https://drafts.csswg.org/cssom/#serialize-a-css-value

If component values can be omitted or replaced with a shorter representation without changing the meaning of the value, omit/replace them.

But there are 2 different minimal ways to represent list-style: outside none disc:

• list-style: outside
• list-style: disc

And there are 3 different minimal ways to represent border: medium none currentcolor:

• border: medium
• border: none
• border: currentcolor

And there are 4 different minimal ways to represent text-decoration: none solid currentcolor auto:

• text-decoration: none
• text-decoration: solid
• text-decoration: currentcolor
• text-decoration: auto

And so on with lots of shorthands. Which minimal serialization should be picked?

var {style} = document.createElement("div");
style.listStyle = "outside none disc";
style.listStyle; // Firefox: "outside". Blink/WebKit: "outside none disc"
style.border = "medium none currentcolor";
style.border; // Firefox: "medium none". Blink/WebKit: "medium none currentcolor"
style.textDecoration = "none solid currentcolor auto";
style.textDecoration; // Firefox: "none". Blink: "none solid currentcolor". WebKit: "" (CSS3 syntax not implemented)

[tabatkins]

I propose as a general principle whenever it's a question of "which value do we need to provide, since they're all default", we choose the first one in grammar order. This matches with the existing principle that you serialize in grammar order. We can probably explicitly define this in reference to the grammar's top level being a || combinator (or a repetition of such), and say that anything still ambiguous is a spec bug that needs to be clarified.

This happens to match Firefox's behavior for 'list-style' and 'text-decoration'. Not sure why they serialize 'border' with the default thickness keyword and the default style keyword. Just to be less confusing, maybe? My proposal would have it serialize as just "medium".

[cdoublev]

whenever it's a question of "which value do we need to provide, since they're all default", we choose the first one in grammar order

You may already know this but it has a precedent:

Where CSS component values of the value can be omitted without changing the meaning of the value (e.g. initial values in shorthand properties), omit them. If this would remove all the values, then include the first allowed value.

[nt1m]

Don't we usually use the canonical order in this case?

[Loirooriol]

I think I haven't seen any property where the canonical order isn't "per grammar". So in practice it's the same?