[css-variables][cssom] Shorthands should serialize as empty string when longhands have variables

[Loirooriol]

https://drafts.csswg.org/css-variables-1/#variables-in-shorthands says

while [CSSOM] defines that shorthand properties are serialized by appropriately concatenating the values of their corresponding longhands, shorthands that are specified with explicit var() functions must serialize to the original, var()-containing value. For other shorthands, if any of the longhand subproperties for that shorthand have pending-substitution values then the serialized value of the shorthand must be the empty string.

However, what about this case?

document.body.style.cssText = `
  --start: 1px 2px;
  --end: ;
  margin-inline-start: var(--start);
  margin-inline-end: var(--end);
`;
document.body.style.marginInline; // ???

The shorthand has not been specified with explicit var(). And the longhands don't have pending-substitution values.

But the shorthand still needs to be serialized as empty string, because margin-inline: var(--start) var(--end) would have a completely different meaning!

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

If there is no such shorthand or shorthand cannot exactly represent the values of all the properties in list, return the empty string.

But with variables at specified-value time we don't know if the shorthand will be able to represent the values or not. So it should always be empty string. I think the specs should clarify this.

Firefox and Chrome serialize as empty string (good). WebKit concatenates var() (bad, https://webkit.org/b/225206).

[tabatkins]

Agreed. Agenda+ to confirm edits supporting this.

[css-meeting-bot]

The CSS Working Group just discussed Shorthand serialization when longhands have variables, and agreed to the following:

• RESOLVED: accept edits

The full IRC log of that discussion

<fantasai> Topic: Shorthand serialization when longhands have variables
<fantasai> github: https://github.com//issues/6253
<fantasai> TabAtkins: Variables spec has text about handling situations when shorthand contains variable and you ask for longhands
<fantasai> TabAtkins: at that time, we don't know what they will be, until computed value
<fantasai> TabAtkins: Same problem opposite direction, if variables in longhands, trying to serialize shorthand
<fantasai> TabAtkins: can get two completely invalid longhand that creates a valid shorthand, for example.
<fantasai> TabAtkins: So spec specifies the same thing, if longhand contains variable and you ask for shorthand, considered unserializable shorthand.
<fantasai> TabAtkins: wanted to confirm edits with WG
<fantasai> emilio: This is the only thing that makes sense
<fantasai> TabAtkins: Firefox and Chrome do specified behavior, WebKit does incorrect behavior
<fantasai> TabAtkins: currently
<fantasai> astearns: Any concerns about this?
<fantasai> RESOLVED: accept edits

[svgeesus]

So the edits were made and accepted by CSSWG resolution. @tabatkins @Loirooriol Can we close this now?

[Loirooriol]

I guess so.