Bug 198510
| Summary: | CSS custom properties should be case sensitive | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Simon Fraser (smfr) <simon.fraser> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | koivisto, simon.fraser, twilco.o, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Simon Fraser (smfr)
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/51377181>
Tyler Wilcock
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>
Simon Fraser (smfr)
Seems like this is fixed now.