Bug 226903

Summary:

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

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
[HTML] Reduction	none

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>