Closed Bug 984021 Opened 10 years ago Closed 6 years ago

CSS rgb/rgba/hsl/hsla colour syntax does not accept calc() values


(Core :: CSS Parsing and Computation, defect, P4)

27 Branch





(Reporter: tesla-mozilla-bugzilla, Assigned: emilio)


(Blocks 1 open bug)


(Keywords: dev-doc-complete, DevAdvocacy, testcase, Whiteboard: [parity-blink][parity-webkit])


(1 file)

Attached file foo.html
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140218140359

Steps to reproduce:

Created the following HTML/CSS sample
<!doctype html>
<meta charset="utf-8">
<style type="text/css">
body {
	background-color: black;
	color: rgb( calc(255 - 0) ,0,0);

Actual results:

Black text on black background, console reports "Expected number or percentage in rgb() but found 'calc('.  Error in parsing value for 'color'.  Declaration dropped."

Expected results:

Red text on black background
Severity: normal → minor
Severity: minor → normal
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
OS: Linux → All
Product: Firefox → Core
Hardware: x86_64 → All
Keywords: testcase
See also bug 594933, bug 956573.
Severity: normal → minor
Priority: -- → P4
> Sadly, using calc() in hsl(), rgb(), hsla() or rgba() 
> doesn’t work at the moment in Firefox or Internet 
> Explorer (IE), which means this version works only in 
> WebKit browsers for now. So, in practice, it’s still 
> probably better to let a preprocessor handle it all 
> at this point, including the computations.
Summary: CSS rgb/rgba colour syntax does not accept calc() values → CSS rgb/rgba/hsl/hsla colour syntax does not accept calc() values
Whiteboard: [parity-blink][parity-webkit]
See Also: → 1296209
Adding DevAdvocacy keyword - example of developer influencer going webkit-only because we don't support this:
Keywords: DevAdvocacy
Just anecdotal illustration of status quo in Stylo (Nightly):

<p style="--angle: 5deg;      background-color: hsl(var(--angle),70%,75%); transform: rotate(var(--angle));">transform OK, color OK</p>
<p style="--angle: calc(5deg);background-color: hsl(var(--angle),70%,75%); transform: rotate(var(--angle));">transform OK, color not</p>

Using seemingly same CSS custom property with exactly same value works differently for colour expresfor depending on fact whether it had been "tainted" by some computation or not
That very same custom property works all the time in transform expression.
Landed in
Closed: 6 years ago
Resolution: --- → FIXED
I have documented this by adding a note to the Fx59 rel notes, and updating the browser compat data for calc():

Let me know if this is OK. Thanks!
Flags: needinfo?(emilio)
Looks good, thanks!
Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.