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

Nikita Vasilyev

Reported 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.

Attachments
[HTML] Reduction (467 bytes, text/html) 2021-06-10 16:15 PDT, Nikita Vasilyev	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2021-06-10 16:18:47 PDT

<rdar://problem/79166098>

Note You need to log in before you can comment on or make changes to this bug.