"Property isn't set" for custom properties declared with `document.documentElement.setProperty`
Categories
(DevTools :: Inspector: Rules, defect, P2)
Tracking
(firefox-esr60 unaffected, firefox65 unaffected, firefox66 wontfix, firefox67 fixed)
| Tracking | Status | |
|---|---|---|
| firefox-esr60 | --- | unaffected |
| firefox65 | --- | unaffected |
| firefox66 | --- | wontfix |
| firefox67 | --- | fixed |
People
(Reporter: nchevobbe, Assigned: rcaliman)
References
Details
(Keywords: regression)
Attachments
(2 files)
custom property issue
Reported in https://github.com/firefox-devtools/devtools-core/issues/1139
Steps to reproduce
- Open
data:text/html,<meta charset=utf8><style>h1 {color: var(--myColor, red);}</style><h1>Hello</h1><script>document.documentElement.style.setProperty("--myColor", "blue")</script> - Right-click on "Hello" and select "Inspect Element"
- Open the rule view if it wasn't selected
Expected results
In the rule view, I can see my h1 rule, and when I hover the --myColor variable, it gives me blue, as its described in the inherited from html section.
Actual results
--myColor is greyed out, and hovering over it says the property wasn't set, which is false since the text is blue.
|
Assignee | |
Comment 1•7 years ago
|
||
The issue occurs because CSS Custom Properties (aka CSS variables) are case sensitive (unlike regular CSS properties) and there's a regression introduced by Bug 1512634 whereby inherited properties are checked in lowercase notation.
The issue happens without any JS interaction just by inheriting a CSS Custom Property with mixed case (myColor vs mycolor).
Reduced test case:
data:text/html,<meta charset=utf8><html style="--myColor: blue"><style>h1 {color: var(--myColor, red);}</style><h1>Hello</h1>
We must skip lowercasing CSS Custom Properties in this scenario. I'm working on it.
|
|
Assignee | |
Comment 2•7 years ago
|
||
Bug 1512634 introduced a case-insensitive check for CSS properties. This caused a regression whereby inherited CSS variables with mixed case were incorrectly unmatched when shown in the Rules view.
To fix this, we do a strict check for CSS variables in CSSProperties front because they are case sensitive (--color and --COLOR are different CSS variables).
See: https://www.w3.org/TR/css-variables-1/
Unlike other CSS properties, custom property names are case-sensitive.
|
|
Assignee | |
Comment 3•7 years ago
|
||
|
||
Comment 4•7 years ago
|
||
| bugherder | ||
|
|
||
Comment 5•7 years ago
|
||
|
||
Updated•7 years ago
|
Description
•