[whatwg] Color attributes

Thu Jul 5 14:43:55 PDT 2007

Color attributes in HTML have special processing.

Some tests/demos:

    http://simon.html5.org/test/html/parsing/color-attributes/

https://bugzilla.mozilla.org/attachment.cgi?id=188040 contains further  
tests and an algorithm that is supposed to match what IE does. The only  
flaw in that algorithm AFAICT is that there is a step missing before the  
first step: match the value against the list of supported color keywords.

For reference, the complete algorithm would be:

   1. If the value case-insensitively matches a color keyword, use that and
      abort these steps. [CSS3COLOR]
   2. Trim all but the first 128 chars from the string.
   3. If it exists, strip the first leading #.
   4. Replace non-valid-hex chars with 0s.
   5. Lower-case the string.
   6. Make string length a multiple of 3 and a minimum of 3 by appending 0s.
   7. Split the string into 3 equal segments.
   8. Trim all but the right-most 8 chars from each segment.
   9. If segment length is 1, left-pad each segment with a 0, else:
  10. While segment length is greater than 2 and the first char of each
      segment is equal to 0, trim the left-most char from each segment,
      then:
  11. Trim all but the first 2 chars from each segment.
  12. Join the segments and append them to a # char to create the final
      string.

IE7 supports all keywords in css3-color except the following:

  * darkgrey
  * darkslategrey
  * dimgrey
  * grey
  * lightgray [sic]
  * lightslategrey
  * slategrey

Firefox, Safari and Opera support all keywords in css3-color.

The following attributes are color attributes in IE7:

  * <basefont color>
  * <body alink>
  * <body bgcolor>
  * <body link>
  * <body text>
  * <body vlink>
  * <font color>
  * <frame bordercolor>
  * <frameset bordercolor>
  * <hr color>
  * <marquee bgcolor>
  * <table bgcolor>
  * <table bordercolor>
  * <table bordercolordark>
  * <table bordercolorlight>
  * <tbody bgcolor>
  * <td bgcolor>
  * <td bordercolor>
  * <td bordercolordark>
  * <td bordercolorlight>
  * <tfoot bgcolor>
  * <th bgcolor>
  * <th bordercolor>
  * <th bordercolordark>
  * <th bordercolorlight>
  * <thead bgcolor>
  * <tr bgcolor>
  * <tr bordercolor>
  * <tr bordercolordark>
  * <tr bordercolorlight>

Opera is same as IE7, except:

  * color on <basefont>
  * bordercolor on <frame> and <frameset>
  * bordercolor, bordercolordark and bordercolorlight on <table>, <td>,  
<th> and <tr>
  * bgcolor on <tbody>, <tfoot> and <thead>

Firefox is same as IE7, except:

  * color on <basefont>
  * bordercolordark and bordercolorlight on <table>, <td>, <th> and <tr>

Safari is same as IE7, except:

  * color on <basefont>
  * bordercolor on <frame>, <td> and <th>
  * bordercolordark and bordercolorlight on <table>, <td>, <th> and <tr>

I would suggest following Firefox here. It's lack of support for  
<basefont> and bordercolordark/bordercolorlight seems to be deliberate.

Finally, the DOM attributes simply reflect the respective content  
attributes in abovementioned browsers. However, in IE7 and Firefox (and in  
Opera pre 9.5), the attribute values are stored in the DOM in their  
processed form. In Opera (9.5) and Safari, they are stored in the DOM as  
they were written.

-- 
Simon Pieters