Bug 247852 – Setting CSS shorthands should serialize with the shorthand in cssText

• Component: CSS
• Status: NEW

[Tim Nguyen (:ntim)]

```
const div = document.createElement("div");
div.style.font = "16px Arial";
console.log(div.getAttribute("style"))
```

Actual:

```
font-family: Arial; font-size: 16px; font-style: initial; font-variant-caps: initial; font-weight: initial; font-stretch: initial; line-height: initial; font-size-adjust: initial; font-kerning: initial; font-variant-alternates: initial; font-variant-ligatures: initial; font-variant-numeric: initial; font-variant-east-asian: initial; font-variant-position: initial; font-feature-settings: initial; font-optical-sizing: initial; font-variation-settings: initial; font-palette: initial;
```

Expected:
```
font: 16px Arial;
```

---

System fonts also seem handled incorrectly:

```
font-family: status-bar; font-size: status-bar; font-style: status-bar; font-variant-caps: status-bar; font-weight: status-bar; font-stretch: status-bar; line-height: status-bar; font-size-adjust: initial; font-kerning: initial; font-variant-alternates: initial; font-variant-ligatures: initial; font-variant-numeric: initial; font-variant-east-asian: initial; font-variant-position: initial; font-feature-settings: initial; font-optical-sizing: initial; font-variation-settings: initial; font-palette: initial;
```

[Tim Nguyen (:ntim)]

We have the same problem with `background` and other shorthands fwiw. Oriol, are you aware of any other bugs filed for this?

[Oriol Brufau]

I guess the style attribute is just set to div.style.cssText.
I recently refactored this, there are various shorthands that are not serialized: https://searchfox.org/wubkat/rev/8b4aafa95d0aa976fe71b6dd3183242487807bc8/Source/WebCore/css/StyleProperties.cpp#1704-1770

So setting font should set all longhands, it's just that they should be serialized with the shorthand. Not sure if there are existing bugs about this.

[Tim Nguyen (:ntim)]

(In reply to Oriol Brufau from comment #2)
> I guess the style attribute is just set to div.style.cssText.
> I recently refactored this, there are various shorthands that are not
> serialized:
> https://searchfox.org/wubkat/rev/8b4aafa95d0aa976fe71b6dd3183242487807bc8/
> Source/WebCore/css/StyleProperties.cpp#1704-1770

Thanks! I think most of the items were unintentional omissions (like I don't see a reason why new props like offset can't serialize with the shorthand).

[Radar WebKit Bug Importer]

<rdar://problem/102555818>

[Karl Dubost]

*** Bug 271001 has been marked as a duplicate of this bug. ***