Open Bug 170614 Opened 17 years ago Updated 5 years ago

CSS background-color with "0" value renders black in Quirks mode (IE renders white)


(Core :: CSS Parsing and Computation, defect, P4)





(Reporter: christinehoff4, Unassigned)


(Blocks 1 open bug, )


(Keywords: dev-doc-needed, testcase, Whiteboard: [QA-P3])


(6 files)

If CSS background-color property is given a value of "0", Netscape renders the
background black (in Quirks mode) and white (in Standards mode). IE renders
background in white. Don't understand why we have this behavior in Quirks.

This problem is showing up on a China topsite (see Url above) with the
background color in input boxes. 

Simplified testcase (with strict doctype) attached using DIVs, demonstrating
same behavior as IT in Standards mode.
Tested with Netscape 09_05_11 trunk build.
background-color: 000000;

will be black in both us and IE (in quirks mode).  What will

background-color: 000;


The problem is that we parse the "0" as a hex color spec and we parse it as
equivalent to those two specs...
Does anybody know exactly how IE is behaving when given color specs with
incorrect numbers of digits or containing non-hex characters?  (Also, any
differences based on the presence or absence of #?)  Our quirk-mode color
parsing should just be an imitation of IE -- otherwise there's not much point. 
(And does the web really need it?  Maybe we should just remove it.)
I don't know the exact behavior, though I spent a few days once trying to narrow
it down... further, I don't know whether they use the same parser for HTML
attributes and CSS values (which is what we do).  I know that in HTML attributes
we parse strings with over 6 chars differently from IE (and differently from NS4
too, I should note; IE and NS4 agree).

I would agree with restricting our CSS quirk to "inserting" the missing '#',
though, and dropping values like "0" and "00" (but not "000", of course).
Just to add some confusion... IE 5.1.2 for Mac OS X renders the testcase as
white. However, removing the doctype (quirks mode) will make the div green!

Furthermore: 00 = white, 000 = black, 0000 = white, 00000 = 000000 = black.

f = green, ff = fff = ffff = white, fffff = light-yellow, ffffff = white

Ignorance is truly bliss.
this testcase shows the behaviour of background-color with various values :
0 ==> black
00 ==> black 
000 ==> black
0000 ==> black
00000 ==> black
000000 ==> black
#0 ==> white
#00 ==> white
#000 ==> black
#0000 ==> white
#00000 ==> white
#000000 ==> black
Attached file in Standards Mode
this testcase shows the behaviour of background-color with various values :
0 ==> white
00 ==> white
000 ==> white
0000 ==> white
00000 ==> white
000000 ==> white
#0 ==> white
#00 ==> white
#000 ==> black
#0000 ==> white
#00000 ==> white
#000000 ==> black
setting QA priority to [QA-P3] based on 
"severity * visibility"
Visibilty is 'high' since this has been detected on a Chine Topsite -- 
Severity is 'low' since it is a cosmetic issue
Keywords: testcase
Whiteboard: [QA-P3]
The non-black backgrounds are NOT white, they're transparent, which is what the
default should be (any unrecognized value should be ignored, so the default
value is used).  Thus the results shown above should actually read:

Quirks mode --- no doctype:
0 ==> black
00 ==> black 
000 ==> black
0000 ==> black
00000 ==> black
000000 ==> black
#0 ==> transparent
#00 ==> transparent
#000 ==> black
#0000 ==> transparent
#00000 ==> transparent
#000000 ==> black

Standards mode:
0 ==> transparent
00 ==> transparent
000 ==> transparent
0000 ==> transparent
00000 ==> transparent
000000 ==> transparent
#0 ==> transparent
#00 ==> transparent
#000 ==> black
#0000 ==> transparent
#00000 ==> transparent
#000000 ==> black
Thanks for the correction, Eric :-)
Someone needs to answer David's question from comment 4....
Keywords: qawanted
Assignee: dbaron → nobody
QA Contact: ian → style-system
We probably want to consider removing some quirks here.

See also bug 121738 (for HTML).
OS: Windows 2000 → All
Priority: -- → P4
Hardware: x86 → All
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

All the attached testcases work as in IE10, except for some cases in "dbaron's big testcase - quirks mode". They don't always display black instead of white, it's also red, green or blue sometimes.

Here are the problematic cases in that testcase:
    <td style="background-color: 0F">
    <td style="background-color: 0F0">
    <td style="background-color: 0F00">
    <td style="background-color: 0F000">
    <td style="background-color: 0F0000">
    <td style="background-color: 0F000000">
    <td style="background-color: 00F">
    <td style="background-color: 00F0">
    <td style="background-color: 00F00">
    <td style="background-color: 00F00000">
    <td style="background-color: 000F">
    <td style="background-color: 000F0">
    <td style="background-color: 000F00">
    <td style="background-color: 000F000">
    <td style="background-color: 000F0000">
    <td style="background-color: 000F00000">
    <td style="background-color: 0000F">
    <td style="background-color: 0000F000">
    <td style="background-color: 0000F0000">
    <td style="background-color: 00000F0">
    <td style="background-color: 00000F00">
    <td style="background-color: 00000F000">
    <td style="background-color: 000000F">
    <td style="background-color: 000000F0">
    <td style="background-color: 000000F00">
    <td style="background-color: 0000000F">
    <td style="background-color: 0000000F0">
    <td style="background-color: 00000000F">
Keywords: qawanted
Summary: background-color with "0" value renders black in Quirks mode (IE renders white) → CSS background-color with "0" value renders black in Quirks mode (IE renders white)
Data: data set 2013-09-01 102,000 pages.

$ find . -type f -print0 | xargs -0 -P 4 -n 40 grep -iEo "color\s*:\s*([0-9a-f]{1,2}|[0-9a-f]{4,5}|[0-9a-f]{7,})(\s|\"|\'|;|$)" >> ../hashless-wrong-length.txt

Most of the matches aren't in quirks mode to begin with. I found three sites with observable difference.

Effect of the moz/blink/webkit behavior: and (porn sites)
The links at the top next to "Archived pages:" is black on hover.
a.arch:hover { ... color: 0;[username]=x
The form error message is green instead of black.
.login_form_error { ... color: 88000;

For these pages, it seems moz/blink/webkit behavior is closer to author intent than the IE behavior. But there were so few matches that we can do whatever. Things could be different if looking at the long tail Web or external stylesheets, though. Unless there is data to the contrary, I think it makes sense to align the spec with moz/blink/webkit instead of IE. It also avoids using the "representation" for this quirk.
I forgot that three-characer colors are also relevant (when they are number or dimension).

It seems more likely that they intended the IE behavior. But this was also rare. color:111 color:333

For these pages the difference is not clearly visible since the colors are so dark. color:666; color:555

I couldn't see any difference in rendering for this page.
Another problem I noticed now is scientific notation. I actually only found one page with different rendering. color:208e2a
Currently Gecko makes this rgb(32, 128, 10) while #208e2a is rgb(32, 142, 42). In this case that's close enough but in other cases it could be way off, e.g. 9e9e9e or 40e10a, or it can drop the declaration if the number is too large e.g. 9e100a.

Gecko drops the declaration when scientific notation is used as a number rather than a dimension, e.g. 1111e1.

It seems saner to consistently drop the declaration here.
You need to log in before you can comment on or make changes to this bug.