1031344 - Using CSS variables as values of rgb()

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[sjw]

Attachment: testcase.html

There is a strange case if you use CSS variables as values of rgb().

:root {
	--r: 0;
	--b: 0;
	--rgb: rgb(var(--r), var(--g), var(--b));
} 
.a {
	color: red;
	--g: 255;
	--rgb: rgb(var(--r), var(--g), var(--b));
	color: var(--rgb);
}
.b {
	color: red;
	--g: 255;
	color: var(--rgb);
}

.a will be green, .b will be red.

As far I understood the spec, both should be green.

Comment 1

[sjw]

Someone who is more familiar with the spec should confirm it.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to sjw from comment #0)
> :root {
> 	--r: 0;
> 	--b: 0;
> 	--rgb: rgb(var(--r), var(--g), var(--b));
> } 

Remember that variable substitution into variables happens *before* inheritance.  (See the 'Computed value' line in http://dev.w3.org/csswg/css-variables/#defining-variables .)  This means the root has variables --r and --b, but --rgb is not defined as a variable (per the rules on variable substitution it's invalid at computed value time, which is equivalent to being unset), because the reference to --g was not present.

> .a {
> 	color: red;
> 	--g: 255;
> 	--rgb: rgb(var(--r), var(--g), var(--b));
> 	color: var(--rgb);
> }

Here you're now defining --g, and defining a valid --rgb variable, so the element is green.

> .b {
> 	color: red;
> 	--g: 255;
> 	color: var(--rgb);
> }
> 
> .a will be green, .b will be red.

b looks black to me.

That's also what I expect, since --rgb is not a valid variable, which means the second color declaration her is invalid at computed value time and gets the initial value (black, per my preferences).

So I think our behavior is correct.

Comment 3

[sjw]

Okay, I think I got it...
Thank you very much for explaining this complex spec.