1717272 - Invalid CSS custom property assignment results in inconsistent behavior from Chrome

Status: RESOLVED DUPLICATE of bug 1713787

(Core :: CSS Parsing and Computation, defect)

Description

[Shaw]

Attachment: chain_variable.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36

Steps to reproduce:

With the following scenario:

HTML

<div class="parent">
Parent
<div class="child">Child</div>
</div>

CSS

div {
border: var(--b);
--b: var(--border);
--border:initial;
}

.parent {--border:2px solid blue}

Actual results:

Border property of the child inherits from parent, so it has a border as well.

Expected results:

The child should not have any border, because it should be set to the initial value (none) due to invalid custom property.

However on further inspection, this seems to be an inconsistency in the way invalid custom property assignment is handled.

It appears that when --b: var(--border) assignment fails for div.child, instead of invalidating the border: var(--b) assignment, it simply turns --b into the initial value which is inherit, thus --b is inheriting from div.parent which has a valid --border value.

But this is a different logic from Chrome, which actually invalidates the border: var(--b) assignment and sets the actual border property to the initial value.

I'm not sure which behavior is correct.

A workaround for Firefox is to use --b:var(--border, initial) instead.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This works on Nightly. Was a spec change that we adopted in bug 1713787.