1846700 - Firefox ignores `inherit` in CSS variables

Status: RESOLVED DUPLICATE of bug 1843783

(Core :: Layout, defect)

Description

[dominic]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Steps to reproduce:

Specify a variable override, which if undefined inherits from parent:

https://jsfiddle.net/tx3k0dwv/

:root {
  --color: red;
  /* If you comment this out then testB should become red */
  --colorOverride: blue;
}

.test {
  color: var(--color);
}

 /* In FF and Safari testB is red instead of blue */
.testB {
  --color: var(--colorOverride, inherit);
}

<div class="test">
  Testing
</div>

<div class="test testB">
  Testing B
</div>

Actual results:

The text becomes black as inherit in the CSS variable value was ignored.

Expected results:

If you comment out this line:
--colorOverride: blue;

Then .testB should inherit from a more specific selector and use red, but it doesn't in FF and Safari. It works in Chrome.

Comment 1

[dominic]

Please ignore the " /* In FF and Safari testB is red instead of blue */" comment, it works correctly if --colorOverride is defined, but if not defined it doesn't fallback to red.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Basically a dupe of bug 1843783.