Bug 226875 - Web Inspector: CSS variables not handled as case sensitive
Summary: Web Inspector: CSS variables not handled as case sensitive
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-06-10 06:01 PDT by Razvan Caliman
Modified: 2021-06-14 13:02 PDT (History)
7 users (show)

See Also:


Attachments
Web Inspector with different case CSS variables (223.46 KB, image/png)
2021-06-10 06:01 PDT, Razvan Caliman
no flags Details
[HTML] Reduction (339 bytes, text/html)
2021-06-14 10:28 PDT, Nikita Vasilyev
no flags Details
Patch v1.0 (4.92 KB, patch)
2021-06-14 11:14 PDT, Patrick Angle
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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>