Bug 225206 - CSS shorthand should serialize as empty string when longhands have variables
Summary: CSS shorthand should serialize as empty string when longhands have variables
Status: RESOLVED DUPLICATE of bug 230389
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2021-04-29 13:26 PDT by Oriol Brufau
Modified: 2022-07-28 15:01 PDT (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Oriol Brufau 2021-04-29 13:26:23 PDT 
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.
Comment 1 Radar WebKit Bug Importer 2021-05-06 13:27:13 PDT 
<rdar://problem/77622517>
Comment 2 Oriol Brufau 2021-08-03 15:20:56 PDT 
Chromium was fixed in https://crbug.com/616341
Comment 3 Justin Halsall 2021-09-15 07:26:20 PDT 
Another example of reproducing this bug: https://jsfiddle.net/9gft8hkr/5/ 

(from: https://bugs.chromium.org/p/chromium/issues/detail?id=1218159#c12)
Comment 4 Oriol Brufau 2021-09-15 08:33:54 PDT 
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.
Comment 5 Oriol Brufau 2022-07-28 15:01:01 PDT 
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 ***