[cssom][css-grid] Do shorthands serialize with the resolved value of their longhands?

[Loirooriol]

Let's say that the longhands of a shorthand have a resolved value which is different than their computed value.

How should the shorthand serialize? Some examples:

• For position: relative; inset: auto, all browsers serialize top as 0px. But Firefox serializes inset as auto, while Blink and WebKit say 0px.
• For margin: auto, all browsers serialize margin-top as 0px. But Firefox serializes margin as auto, while Blink and WebKit say 0px.
• For display: grid; grid-template-rows: repeat(2, 1px), all browsers serialize grid-template-rows as 1px 1px. But Firefox and Blink serialize grid-template as repeat(2, 1px) / none, while WebKit says 1px 1px / none.
• For display: grid; grid-template: 1px / 2px and ::before { content: ""; grid-row-end: 1 }, all browsers serialize grid-template-rows as 0px 1px. But Firefox and Blink serialize grid-template as 1px / 2px, while WebKit says 0px 1px / 2px.
• For display: grid; grid-template: 1px / none; width: 100px and ::before { content: ""; grid-row-end: 1 }, all browsers serialize grid-template-rows as 0px 1px and grid-template-columns as 100px. But Firefox serializes grid-template as 1px / none, Blink as 1px / 100px, and WebKit as 0px 1px / 100px.

Grid is especially nonsensical.

I tend to agree with WebKit: shorthands should serialize as if the computed value of the longhands was their resolved value.

[css-meeting-bot]

The CSS Working Group just discussed [cssom][css-grid] Do shorthands serialize with the resolved value of their longhands?, and agreed to the following:

• RESOLVED: Shorthands serialize using the resolved value of the individual longhands

The full IRC log of that discussion

<emilio> oriol: Some longhands have special getComputedStyle behavior, so you get the resolved rather than computed value
<emilio> ... it's not clear what happens when you're serializing a shorthand that involves these
<emilio> ... in the issue I have various examples
<emilio> ... e.g. margin: auto and you serialize margin-top you might get zero, but if you try to serialize the margin longhand itself you get auto in firefox but 0 in blink/webkit
<emilio> ... it's particularly weird in grid properties
<emilio> ... because the implicit tracks and repeat() expansion
<emilio> q+
<emilio> ... we have cases where all browsers are different
<astearns> ack fantasai
<emilio> ... I think I prefer what webkit does
<emilio> ... which is you serialize the shorthand as if the computed value of each longhand was set to each special resolved value
<fantasai> scribe+
<emilio> ... I think that's the most consistent
<fantasai> emilio: I agree.
<fantasai> emilio: FWIW, I consider the Firefox behavior to be a bug. Haven't gotten around to fixing, because the getters are in C++ and ...
<fantasai> emilio: What WebKit is doing, resolving each individual longhand, and then serializing shorthand with that is the right thing to do.
<fantasai> emilio: This is what Firefox does for all things that don't involve layout
<emilio> astearns: web compat concerns or other opinions?
<emilio> oriol: If webkit isn't having compat issues this is probably fine?
<TabAtkins> +1, I *suspect* this is reasonably safe
<TabAtkins> and we can always add exceptions as necessary
<fantasai> +1 TabAtkins
<emilio> PROPOSED: Shorthands serialize using the resolved value of the individual longhands
<emilio> RESOLVED: Shorthands serialize using the resolved value of the individual longhands