Bug 225206 – CSS shorthand should serialize as empty string when longhands have variables

• Component: CSS
• Status: RESOLVED DUPLICATE

[Oriol Brufau]

Run this code:

```js
document.body.style.cssText = `
  --t: 1px 2px;
  --r: 3px;
  --b: 4px;
  --l: ;
  margin-top: var(--t);
  margin-right: var(--r);
  margin-bottom: var(--b);
  margin-left: var(--l);
`;
getComputedStyle(document.body).margin; // "0px 3px 4px 0px"
document.body.style.margin; // BAD: "var(--t) var(--r) var(--b) var(--l)"
document.body.style.margin += "";
getComputedStyle(document.body).margin; // "1px 2px 3px 4px"
```

The margin shorthand shouldn't be serialized concatenating the var() notations, because that can have a different meaning!

It should be serialized as empty string instead.

The specs are not much clear about this (https://github.com/w3c/csswg-drafts/issues/6253), but Chromium and Firefox do the reasonable thing and serialize as empty string.

[Radar WebKit Bug Importer]

<rdar://problem/77622517>

[Oriol Brufau]

Chromium was fixed in https://crbug.com/616341

[Justin Halsall]

Another example of reproducing this bug: https://jsfiddle.net/9gft8hkr/5/ 

(from: https://bugs.chromium.org/p/chromium/issues/detail?id=1218159#c12)

[Oriol Brufau]

No, your expectations in https://jsfiddle.net/9gft8hkr/5/ are wrong. Chromium and Firefox are correct. WebKit is wrong but it's unrelated to this issue, it's bug 225209 and something else.

[Oriol Brufau]

This was fixed as part of bug 230389.
Kinda strange that this seems to only have a test in css-logical, nothing in css-variables or cssom, but oh well.

*** This bug has been marked as a duplicate of bug 230389 ***