Bug 226903 - Web Inspector: Style panel display incomplete CSS declarations for JS-created styles
Summary: Web Inspector: Style panel display incomplete CSS declarations for JS-created...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-06-10 16:15 PDT by Nikita Vasilyev
Modified: 2021-06-11 10:48 PDT (History)
2 users (show)

See Also:

Attachments
[HTML] Reduction (467 bytes, text/html)
2021-06-10 16:15 PDT, Nikita Vasilyev 		no flags Details
View All 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 Nikita Vasilyev 2021-06-10 16:15:58 PDT 
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.
Comment 1 Radar WebKit Bug Importer 2021-06-10 16:18:47 PDT 
<rdar://problem/79166098>