481907 - Firefox will not accept "invert" as the value for "outline-color".

Status: RESOLVED DUPLICATE of bug 359497

(Core :: DOM: CSS Object Model, defect)

Description

[Josh L]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

The following example CSS declarations will fail in Firefox 3.0.7:

#someElement:focus {
	outline-color: invert;
}

#someElement:focus {
	outline: 1px dotted invert;
}

Using "invert" as the value for "outline-color" will always result in the following type of Error Console message:

"Warning: Expected color but found 'invert'.  Error in parsing value for property 'outline-color'.  Declaration dropped."

Chrome, Opera 9 and Safari 3 understand these declarations. The MDC outline-color page states that "invert" is an acceptable value for this property:

https://developer.mozilla.org/en/CSS/outline-color

Reproducible: Always

Steps to Reproduce:
1. Create an (X)HTML page with the with the following CSS rule: #someElement{outline-color:invert;}
2. Open the page in Firefox 3.0.7
3. View error in Firefox Error Console
Actual Results:  
The Firefox Error Console reported the following error:

"Warning: Expected color but found 'invert'.  Error in parsing value for property 'outline-color'.  Declaration dropped."

Expected Results:  
Firefox should have correctly interpreted this declaration instead of throwing an error.

This has been a problem for almost 5 years, apparently:

http://forums.mozillazine.org/viewtopic.php?f=25&t=635642

That topic is the ONLY information I could find about this.

Overall this is relatively minor, but this is a major accessibility issue. I have a dark form where the default outline doesn't show up well, so I set it to white. A calendar/date picker section of the form has white backgrounds for the days, so I set the outline back to invert. This works great for Opera and Safari users, but Firefox users who depend on tabbing and outlines for accessibility have no idea what day they are selecting.

You might be thinking: "So what? If the days are white, set the outline to a dark color - problem solved!"

But the bottom line is that we shouldn't be creating workarounds for *Firefox*. ALL the other major standards compliant browsers play ball with this one - Firefox needs to as well.

Comment 1

[Daniel.S]

This value has been removed in Firefox 3 due to architectural changes. CSS 2.1 does not require this value to be implemented.

Thanks for reporting. The documentation should be updated.