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

RESOLVED FIXED in Firefox 67

Status

defect
P2
normal
RESOLVED FIXED
3 months ago
2 months ago

People

(Reporter: nchevobbe, Assigned: rcaliman)

Tracking

({regression})

66 Branch
Firefox 67
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

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

Details

Attachments

(2 attachments)

Reporter

Description

3 months ago

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.

Assignee

Comment 1

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

Comment 2

3 months 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.

Comment 4

2 months ago
bugherder
Status: ASSIGNED → RESOLVED
Last Resolved: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67
You need to log in before you can comment on or make changes to this bug.