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 | ||
Oriol Brufau
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/77623544>
Ahmad Saleem
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!
Oriol Brufau
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 ***