Bug 226875

Summary:

Web Inspector: CSS variables not handled as case sensitive

Product:

WebKit

Reporter:

Razvan Caliman <rcaliman>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ews-watchlist, hi, inspector-bugzilla-changes, joepeck, nvasilyev, pangle, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
Web Inspector with different case CSS variables	none
[HTML] Reduction	none
Patch v1.0	none

Description Razvan Caliman 2021-06-10 06:01:00 PDT

Created attachment 431066 [details]
Web Inspector with different case CSS variables

From https://www.w3.org/TR/css-variables-1/

Unlike other CSS properties, custom property names are case-sensitive.

EXAMPLE 2: While both --foo and --FOO are valid, they are distinct properties - using var(--foo) will refer to the first one, while using var(--FOO) will refer to the second.

--- 

Web Inspector lowercases all CSS custom property names and this influences behavior. 
For example: 

```
div { 
  --color: green;
  --COLOR: red;
  color: var(--color);
}
```

Variables are mistakenly marked as overwritten in Styles pane.
Variables with different case are not shown in Computed pane > Variables section.
(Resolving variable names to their value is handled correctly, though).

Comment 1 Nikita Vasilyev 2021-06-14 10:28:20 PDT

Created attachment 431343 [details]
[HTML] Reduction

Comment 2 Patrick Angle 2021-06-14 11:14:34 PDT

Created attachment 431346 [details]
Patch v1.0

Comment 3 Devin Rousso 2021-06-14 11:56:02 PDT

Comment on attachment 431346 [details]
Patch v1.0

r=me

Comment 4 EWS 2021-06-14 13:01:37 PDT

Committed r278848 (238794@main): <https://commits.webkit.org/238794@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 431346 [details].

Comment 5 Radar WebKit Bug Importer 2021-06-14 13:02:19 PDT

<rdar://problem/79303754>