Bug 279377

Summary:

Web Inspector: Style details panel incorrectly shows `@supports` rules as applied

Product:

WebKit

Reporter:

Qianlang Chen <qianlangchen>

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
Demo webpage	none

Qianlang Chen

Reported 2024-09-09 12:59:29 PDT

Created attachment 472507 [details] Demo webpage 1. Open the attached demo webpage: <html> <head> <style> body { @supports (display: none) { color: navy; } } </style> </head> <body> Hello </body> </html> 2. Open Web Inspector, go to Elements tab, and select the <body> element. 3. From the style details panel, observe that `display: none` is incorrectly shown as an active style, when it should only be a condition and not actually applied. The expected behavior should be that only the `color: navy` style shows up and no `display: none` (apart from in the @support rule's condition). Note: I realize that having a @supports rule being nested is non-standard. (The canonical way is `@supports (...) { body { ... } }`, instead of `body { @supports (...) { ... } }`.) However, the MDN docs suggests @at-rules can now be nested (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_at-rules), so our Web Inspector should be able to support that syntax.

Attachments
Demo webpage (236 bytes, text/html) 2024-09-09 12:59 PDT, Qianlang Chen	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2024-09-09 12:59:49 PDT

<rdar://problem/135577052>

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