Bug 226903 – Web Inspector: Style panel display incomplete CSS declarations for JS-created styles

• Status: NEW
• Component: Web Inspector

[Nikita Vasilyev]

Created attachment 431158 [details]
[HTML] Reduction

Steps:
1. Open the attached HTML page
2. Inspect <div id=foo>
3. Open Style panel

Expected:
```
    font: 24px sans-serif;
    background: url(https://webkit.org/wp-content/themes/webkit/images/webkit.svg) center center / cover no-repeat fixed;}
```
Which is the same text as it's specified in JS.


Actual:
```
    font-size: 24px;
    font-family: sans-serif;
```
`background` is missing, which is misleading.
`font` shortcut expanded, into two longhand properties, which isn't ideal.


Notes:
The bug was initially discovered on https://www.disneyplus.com/home.
CSS-in-JS is very common on the modern web. It's used by React Native and other UI frameworks.

[Radar WebKit Bug Importer]

<rdar://problem/79166098>