Closed Bug 1534567 Opened 1 year ago Closed 1 year ago

"Property isn't set" for custom properties declared with `document.documentElement.setProperty`

Categories

(DevTools :: Inspector: Rules, defect, P2)

66 Branch
defect

Tracking

(firefox-esr60 unaffected, firefox65 unaffected, firefox66 wontfix, firefox67 fixed)

RESOLVED FIXED
Firefox 67
Tracking Status
firefox-esr60 --- unaffected
firefox65 --- unaffected
firefox66 --- wontfix
firefox67 --- fixed

People

(Reporter: nchevobbe, Assigned: rcaliman)

References

Details

(Keywords: regression)

Attachments

(2 files)

Attached image custom property issue

Reported in https://github.com/firefox-devtools/devtools-core/issues/1139

Steps to reproduce

  1. 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>
  2. Right-click on "Hello" and select "Inspect Element"
  3. 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.

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: nobody → rcaliman
Status: NEW → ASSIGNED
Has Regression Range: --- → irrelevant
Keywords: regression
Priority: -- → P2

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.

Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67
You need to log in before you can comment on or make changes to this bug.