Closed
Bug 147017
Opened 22 years ago
Closed 19 years ago
Support rgba and hsla colors in CSS
Categories
(Core Graveyard :: GFX, enhancement)
Core Graveyard
GFX
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: erik, Assigned: roc)
References
(Blocks 1 open bug)
Details
(Keywords: css3)
Attachments
(1 file, 1 obsolete file)
(deleted),
patch
|
dbaron
:
review+
dbaron
:
superreview+
|
Details | Diff | Splinter Review |
It would be really nice if rgba values could be used anywhere where CSS
expects a color value. RGBA values are part of CSS3 color module and I hope to
see them soon in Mozilla.
http://www.w3.org/TR/2002/WD-css3-color-20020418/
This would give Moz a serious edge over competing browsers...
Comment 1•22 years ago
|
||
css3-colors is still at working draft status. If we implement this before the
spec reaches CR stage, it should be as moz-rgba().
Assignee | ||
Comment 3•22 years ago
|
||
It depends.
nsColor already supports RGBA in principle. The right way to do this is to add
rgba() to the style system and then make GFX drawing do the right thing with
RGBA nsColors. On some platforms that might be easy. It's not easy on Windows or
GTK though. We'll have to composite by hand.
If dbaron wants to do the style system support for this, I'll sign up for a GTK
implementation.
Assignee | ||
Comment 4•22 years ago
|
||
Actually I have a plan for GFX reorg which would make RGBA work on all platforms.
"Someone" could go ahead and add -moz-rgba to the style system right away. GFX
work to handling non-opaque nsColors can happen in parallel.
Comment 5•22 years ago
|
||
Hmm, I could roll -moz-rgba (and -moz-hsla) into my -moz-hsl patch, I guess.
ETA 3 weeks, probably, unless we really want it sooner. See bug 160550
Assignee | ||
Comment 6•22 years ago
|
||
Yeah, roll it in. That would be great.
Comment 7•22 years ago
|
||
bz landed the style system end. Over to roc. :-)
Assignee: dbaron → roc+moz
Component: Style System → GFX
Comment 8•21 years ago
|
||
As Jason Davis noted in bug 160550 comment 28, the CSS3 Color Module is now a
Candidate Recommendation. We are now encouraged to implement rgba and hsla color
values!
Comment 9•21 years ago
|
||
To me it seems sort of backwards that hsla() is implemented while the extension
of the more commonly understood (at least among web developers) rgb() to rgba()
is not.
Since this seems to be somewhat dead in the water right now, how about if we do
a temporary stopgap measure of mapping rgba() to hsla()? It wouldn't be
permanent, but it would get it working until a better implementation could be
done. I don't know how complicated it would be in the coding, and it would be
pretty kludgy as I think hsla() when rendered is converted back into rgb, but it
would work for now. If this happened, we'd also need to remove -moz-rgba (which
currently ignores the alpha channel) from source.
Here's a bit of Javascript that should do the conversion of RGBA to HSLA.
Porting it to C++ should be relatively trivial, I think. Feel free to do
whatever with this to make rgba() work. (I don't know enough C++ or have enough
knowledge of the tree to try making a stab, and trust me, you wouldn't want me
to make one. ;-) )
/*******************************/
// assumes red, green, blue are percentages
// alpha channel passed on "as is"
function rgba_to_hsla (red, green, blue, alpha) {
var maximum, minimum, lum, sat, hue;
var rgbArray, hslaArray;
rgbArray = new Array (red, green, blue);
rgbArray = rgbArray.sort(); // from lowest pct. to highest
minimum = rgbArray[0];
maximum = rgbArray[2];
lum = (minimum + maximum)/2;
if (minimum = maximum) {
sat = 0;
hue = 0;
}
else {
if (lum < 0.5) {
sat = (maximum - minimum) / (maximum + minimum);
}
else {
sat = (maximum - minimum) / (2 - maximum - minimum);
}
switch (maximum) {
case red:
hue = (green - blue) / (maximum - minimum);
break;
case green:
hue = 2 + (blue - red) / (maximum - minimum);
break;
case blue:
hue = 4 + (red -green) / (maximum - minimum);
}
hslaArray = new Array (hue, sat, lum, alpha);
return hslaArray;
}
Comment 10•21 years ago
|
||
(In reply to comment #9)
> To me it seems sort of backwards that hsla() is implemented
It's not. What gave you the idea that it is? -moz-hsla does exactly what
-moz-rgba does -- creates an nsColor with the right alpha info, which the
rendering engine then proceeds to ignore.
Comment 11•21 years ago
|
||
(In reply to comment #10)
> It's not. What gave you the idea that it is? -moz-hsla does exactly what
> -moz-rgba does -- creates an nsColor with the right alpha info, which the
> rendering engine then proceeds to ignore.
Mostly that bug 160550 is marked FIXED, when if the alpha channel is ignored it
really shouldn't be FIXED. Instead it should really depend on this one, which
is where I assume (per comments 29 and 30 on that bug) alpha support should be
added.
Updated•21 years ago
|
Summary: Support rgba colors in CSS → Support rgba and hsla colors in CSS
Comment 12•21 years ago
|
||
That bug _is_ fixed. Which you should realize, since you clearly read both the
bug and comment 10. The syntax is implemented _in_the_style_system_ (which is
what bug 160550 was filed on). This bug is on making the renderer make use of
that style information.
Comment 13•20 years ago
|
||
Any update on getting RGB() or RGBA() working yet?
Comment 14•20 years ago
|
||
Excuse me? rgb() works fine. Updates on rgba()/hsla() will be in this bug if
any happen.
Comment 15•20 years ago
|
||
Actually, if you use this code, you will see that in Firefox the boxes are
black. 200 200 200 should be Grey. It displays with the correct color in
Internet Explorer.
<html>
<body>
<form>
<table>
<tr Bgcolor="rgb(200,200,200)" WIDTH=100%>
<td HEIGHT=50 WIDTH=50></td>
</tr>
<TR Bgcolor="rgb(200,200,200)" WIDTH=100%>
<TD HEIGHT=50 WIDTH=50></TD>
</tr>
</table>
</form>
</body>
</html>
Comment 16•20 years ago
|
||
The bgcolor attribute of "table" doesn't use the CSS color syntax. It uses the
HTML color syntax, so only supports #XXXXXX colors and named colors. In any
case, that's completely unrelated to this bug, which is clearly about rgb_a_ and
hsl_a_. Note that "a" part.
I can totally fix this.
Attachment #211352 -
Flags: review?
Attachment #211352 -
Flags: review? → review?(dbaron)
Comment 18•19 years ago
|
||
Comment on attachment 211352 [details] [diff] [review]
enable rgba/hsla CSS colors
No, please make a macro for RENDERER_SUPPORTS_ALPHA_COLORS (PR_TRUE ifdef MOZ_CAIRO_GFX, otherwise PR_FALSE), and use it both:
1) about 8 lines above what you changed, initializing mHandleAlphaColors
2) in ParseColorString
Or, alternatively, make ParseColorString do a proper save/restore, and ifdef the initialization a few lines above what you changed.
I'm trusting you when you say cairo supports this -- there will probably a bunch of bugs that need to be fixed before we ship a release with this, though. (Anywhere we double-paint at the least. We should check straight borders, dashed-dotted borders, table border-collapse borders, and probably some other things (text, text-shadow, text-decoration, background-color, etc.).) Could you make sure they're filed? Does Hixie have tests for this?
Attachment #211352 -
Flags: review?(dbaron) → review-
Doh, forgot about the ParseColorString bit.
As for cairo supporting this.. the only promise is that cairo supports operations with colors with full 8-bit alpha. What we do with that is up to nsCSSRendering :) There are definitely going to be bugs with things like rgba() borders -- for example, border: 15px solid rgba(0,0,255,0.5); shows creases at the border edges. This is our own fault due to how we render borders though, and will be fixed once we redo the border drawing code to use real paths (instead of lines and rectangles). We're in no danger of shipping a cairo-gfx official build any time soon, though :)
Attachment #211352 -
Attachment is obsolete: true
Attachment #211355 -
Flags: review?(dbaron)
Comment 20•19 years ago
|
||
Comment on attachment 211355 [details] [diff] [review]
enable rgba/hsla CSS colors #2
OK, but please do get bugs filed on things like that so we don't forget about them and accidentally ship them in a release. It's sooner than you think.
Attachment #211355 -
Flags: review?(dbaron) → review+
Blocks: 326624
Attachment #211355 -
Flags: superreview?(roc)
Updated•19 years ago
|
Attachment #211355 -
Flags: superreview?(roc) → superreview+
Checked in
Status: NEW → RESOLVED
Closed: 19 years ago
Resolution: --- → FIXED
Updated•16 years ago
|
Product: Core → Core Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•