The default bug view has changed. See this FAQ.

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

NEW
Unassigned

Status

()

Core
CSS Parsing and Computation
P4
minor
3 years ago
10 hours ago

People

(Reporter: tesla-mozilla-bugzilla, Unassigned)

Tracking

({DevAdvocacy, testcase})

27 Branch
DevAdvocacy, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

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

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8391743 [details]
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

3 years ago
Severity: normal → minor

Updated

3 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

3 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
You need to log in before you can comment on or make changes to this bug.