Bug 247852 - Setting CSS shorthands should serialize with the shorthand in cssText
Summary: Setting CSS shorthands should serialize with the shorthand in cssText
Status: NEW
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
: 271001 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-11-12 23:23 PST by Tim Nguyen (:ntim)
Modified: 2024-04-07 17:35 PDT (History)
3 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 Tim Nguyen (:ntim) 2022-11-12 23:23:15 PST 
```
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;
```
Comment 1 Tim Nguyen (:ntim) 2022-11-12 23:29:49 PST 
We have the same problem with `background` and other shorthands fwiw. Oriol, are you aware of any other bugs filed for this?
Comment 2 Oriol Brufau 2022-11-13 01:00:47 PST 
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.
Comment 3 Tim Nguyen (:ntim) 2022-11-13 03:10:57 PST 
(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).
Comment 4 Radar WebKit Bug Importer 2022-11-19 23:24:13 PST 
<rdar://problem/102555818>
Comment 5 Karl Dubost 2024-04-07 17:35:31 PDT 
*** Bug 271001 has been marked as a duplicate of this bug. ***