Bug 225209 - CSS shorthands with var() should serialize with var()
Summary: CSS shorthands with var() should serialize with var()
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: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-29 13:51 PDT by Oriol Brufau
Modified: 2022-07-28 14:50 PDT (History)
8 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:51:32 PDT 
Run this code:

```js
document.body.style.cssText = "--m:10px; margin:var(--m)";
document.body.style.margin;
```

**Actual**: ""
**Expected: "var(--m)"

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

> 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.
Comment 1 Radar WebKit Bug Importer 2021-05-06 13:52:13 PDT 
<rdar://problem/77623544>
Comment 2 Ahmad Saleem 2022-07-28 14:40:04 PDT 
Safari seems to pass all test from WPT about CSS Var Serialize:

https://wpt.fyi/results/css/css-variables/vars-border-shorthand-serialize.html?label=master&label=experimental&aligned&q=shorthand

Anything else needed here? Thanks!
Comment 3 Oriol Brufau 2022-07-28 14:50:23 PDT 
The problem here was when serializing a shorthand set to a variable. That test is unrelated, it checks the serialization of subshorthands.

But anyways this was fixed in bug 230389.

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