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

RESOLVED FIXED

Status

()

P4
minor
RESOLVED FIXED
5 years ago
a year ago

People

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

Tracking

(Blocks: 1 bug, {dev-doc-complete, DevAdvocacy, testcase})

27 Branch
dev-doc-complete, DevAdvocacy, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [parity-blink][parity-webkit])

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
Posted 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>
<html>
<head>
<meta charset="utf-8">
<title>Foo!</title>
<style type="text/css">
body {
	background-color: black;
	color: rgb( calc(255 - 0) ,0,0);
}
</style>
</head>
<body>
Foo!
</body>
</html>


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
(Reporter)

Updated

5 years ago
Severity: normal → minor

Updated

5 years ago
Severity: minor → normal
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
OS: Linux → All
Product: Firefox → Core
Hardware: x86_64 → All

Updated

5 years ago
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.
http://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
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]
Duplicate of this bug: 1279932
See Also: → bug 1296209
Adding DevAdvocacy keyword - example of developer influencer going webkit-only because we don't support this:

https://codepen.io/thebabydino/details/wJygxJ/
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.
(Assignee)

Comment 7

a year ago
Landed in https://hg.mozilla.org/mozilla-central/rev/43e678a70a2a
Status: NEW → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
Keywords: dev-doc-needed
I have documented this by adding a note to the Fx59 rel notes, and updating the browser compat data for calc():

https://github.com/mdn/browser-compat-data/pull/873
https://developer.mozilla.org/en-US/Firefox/Releases/59#CSS

Let me know if this is OK. Thanks!
Flags: needinfo?(emilio)
Keywords: dev-doc-needed → dev-doc-complete
(Assignee)

Comment 9

a year ago
Looks good, thanks!
Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.