Bug 226875 – Web Inspector: CSS variables not handled as case sensitive

• Component: Web Inspector
• Status: RESOLVED FIXED

[Razvan Caliman]

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

[Nikita Vasilyev]

Created attachment 431343 [details]
[HTML] Reduction

[Patrick Angle]

Created attachment 431346 [details]
Patch v1.0

[Devin Rousso]

Comment on attachment 431346 [details]
Patch v1.0

r=me

[EWS]

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

[Radar WebKit Bug Importer]

<rdar://problem/79303754>