Using CSS variables as values of rgb()

RESOLVED INVALID

Status

()

RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: sjw, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

436 bytes, text/html
Details
(Reporter)

Description

4 years ago
Created attachment 8447196 [details]
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.
(Reporter)

Comment 1

4 years ago
Someone who is more familiar with the spec should confirm it.
Blocks: 773296
Status: NEW → UNCONFIRMED
Ever confirmed: false
Flags: needinfo?(cam)
(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.
(Reporter)

Comment 3

4 years ago
Okay, I think I got it...
Thank you very much for explaining this complex spec.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(cam)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.