Bug 198510 - CSS custom properties should be case sensitive
Summary: CSS custom properties should be case sensitive
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2019-06-03 18:15 PDT by Simon Fraser (smfr)
Modified: 2021-08-26 16:15 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Fraser (smfr) 2019-06-03 18:15:21 PDT
https://drafts.csswg.org/css-variables/ says:
"Unlike other CSS properties, custom property names are case-sensitive."

but WebKit seems to lowercase them all, and then has bugs when the case is unmatched:
https://codepen.io/smfr/pen/PvLbZB

Also, Web Inspector shows them all as lowercase, which is very confusing.
Comment 1 Radar WebKit Bug Importer 2019-06-03 18:15:49 PDT
<rdar://problem/51377181>
Comment 2 Tyler Wilcock 2020-10-03 20:58:38 PDT
Has this been fixed?  I couldn't reproduce it in the GTK minibrowser built from the latest master nor in Safari Version 14.0 (15610.1.28.1.9, 15610).  The Codepen seemed to behave fine, and toggling between the two CSS variables in this example also seemed to work as expected:

<!DOCTYPE html>
<html>
  <head>
    <style>
        :root {
            --myVar: blue;
            --myvar: red;
        }

        div {
            width: 400px;
            height: 400px;
            background-color: var(--myvar);
        }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
Comment 3 Simon Fraser (smfr) 2021-08-26 16:15:53 PDT
Seems like this is fixed now.