Last Comment Bug 147017 - Support rgba and hsla colors in CSS
: Support rgba and hsla colors in CSS
: css3
Product: Core Graveyard
Classification: Graveyard
Component: GFX (show other bugs)
: Trunk
: All All
: -- enhancement with 2 votes (vote)
: ---
Assigned To: Robert O'Callahan (:roc) (email my personal email if necessary)
: Hixie (not reading bugmail)
Depends on: 160550
Blocks: 326624
  Show dependency treegraph
Reported: 2002-05-25 07:16 PDT by Erik Arvidsson
Modified: 2009-01-22 10:17 PST (History)
25 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---

enable rgba/hsla CSS colors (781 bytes, patch)
2006-02-09 22:08 PST, Vladimir Vukicevic [:vlad] [:vladv]
dbaron: review-
Details | Diff | Splinter Review
enable rgba/hsla CSS colors #2 (1.54 KB, patch)
2006-02-09 22:35 PST, Vladimir Vukicevic [:vlad] [:vladv]
dbaron: review+
dbaron: superreview+
Details | Diff | Splinter Review

Description Erik Arvidsson 2002-05-25 07:16:54 PDT
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.

This would give Moz a serious edge over competing browsers...
Comment 1 Hixie (not reading bugmail) 2002-05-25 13:45:01 PDT
css3-colors is still at working draft status. If we implement this before the
spec reaches CR stage, it should be as moz-rgba().
Comment 2 Hixie (not reading bugmail) 2003-02-22 07:41:25 PST
roc: How hard would this be at the rendering level?
Comment 3 Robert O'Callahan (:roc) (email my personal email if necessary) 2003-02-22 11:20:39 PST
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
Comment 4 Robert O'Callahan (:roc) (email my personal email if necessary) 2003-03-11 14:27:55 PST
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 Boris Zbarsky [:bz] (still a bit busy) 2003-03-11 14:37:08 PST
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
Comment 6 Robert O'Callahan (:roc) (email my personal email if necessary) 2003-03-11 14:55:27 PST
Yeah, roll it in. That would be great.
Comment 7 David Baron :dbaron: ⌚️UTC-8 2003-03-17 21:56:37 PST
bz landed the style system end.  Over to roc. :-)
Comment 8 Steffen Wilberg 2003-07-02 03:21:46 PDT
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
Comment 9 Jeff Walden [:Waldo] (remove +bmo to email) 2004-02-07 15:31:50 PST
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);
      case green:
         hue = 2 + (blue - red) / (maximum - minimum);
      case blue:
         hue = 4 + (red -green) / (maximum - minimum);

   hslaArray = new Array (hue, sat, lum, alpha);
   return hslaArray;
Comment 10 Boris Zbarsky [:bz] (still a bit busy) 2004-02-07 15:39:36 PST
(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 Jeff Walden [:Waldo] (remove +bmo to email) 2004-02-07 16:24:22 PST
(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
Comment 12 Boris Zbarsky [:bz] (still a bit busy) 2004-02-07 17:15:16 PST
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 Seth Crews 2004-11-05 07:05:08 PST
Any update on getting RGB() or RGBA() working yet?
Comment 14 Boris Zbarsky [:bz] (still a bit busy) 2004-11-05 08:11:11 PST
Excuse me?  rgb() works fine.  Updates on rgba()/hsla() will be in this bug if
any happen.
Comment 15 Seth Crews 2004-11-05 09:03:49 PST
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.


	<tr Bgcolor="rgb(200,200,200)" WIDTH=100%>
		<td HEIGHT=50 WIDTH=50></td>

	<TR Bgcolor="rgb(200,200,200)" WIDTH=100%>
		<TD HEIGHT=50 WIDTH=50></TD>
Comment 16 Boris Zbarsky [:bz] (still a bit busy) 2004-11-05 09:12:32 PST
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.
Comment 17 Vladimir Vukicevic [:vlad] [:vladv] 2006-02-09 22:08:24 PST
Created attachment 211352 [details] [diff] [review]
enable rgba/hsla CSS colors

I can totally fix this.
Comment 18 David Baron :dbaron: ⌚️UTC-8 2006-02-09 22:22:12 PST
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?
Comment 19 Vladimir Vukicevic [:vlad] [:vladv] 2006-02-09 22:35:06 PST
Created attachment 211355 [details] [diff] [review]
enable rgba/hsla CSS colors #2

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 :)
Comment 20 David Baron :dbaron: ⌚️UTC-8 2006-02-09 22:38:40 PST
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.
Comment 21 Vladimir Vukicevic [:vlad] [:vladv] 2006-02-09 23:09:02 PST
Checked in

Note You need to log in before you can comment on or make changes to this bug.