Bug 225209

Summary:	CSS shorthands with var() should serialize with var()
Product:	WebKit	Reporter:	Oriol Brufau <obrufau>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	ahmad.saleem792, ap, bfulgham, justin, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified

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 ***