Closed
Bug 984021
Opened 11 years ago
Closed 7 years ago
CSS rgb/rgba/hsl/hsla colour syntax does not accept calc() values
Categories
(Core :: CSS Parsing and Computation, defect, P4)
Tracking
()
RESOLVED
FIXED
People
(Reporter: tesla-mozilla-bugzilla, Assigned: emilio)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-complete, DevAdvocacy, testcase, Whiteboard: [parity-blink][parity-webkit])
Attachments
(1 file)
|
211 bytes,
text/html
|
Details |
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•11 years ago
|
Severity: normal → minor
|
||
Updated•11 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
|
||
Comment 2•9 years ago
|
||
> 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/
|
||
Updated•9 years ago
|
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]
|
||
Comment 4•8 years ago
|
||
Adding DevAdvocacy keyword - example of developer influencer going webkit-only because we don't support this:
https://codepen.io/thebabydino/details/wJygxJ/
Keywords: DevAdvocacy
|
|
||
Updated•8 years ago
|
Blocks: calc-issues
|
||
Comment 5•7 years ago
|
||
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 6•7 years ago
|
||
Assignee: nobody → emilio
|
|
Assignee | |
Comment 7•7 years ago
|
||
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
|
||
Updated•7 years ago
|
Keywords: dev-doc-needed
|
|
||
Comment 8•7 years ago
|
||
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
You need to log in
before you can comment on or make changes to this bug.
Description
•