Bug 17311 - REGRESSION (3.0.4-TOT): Several pseudocolors (CSS2, originally defined by MS) are badly assigned
Summary: REGRESSION (3.0.4-TOT): Several pseudocolors (CSS2, originally defined by MS)...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.5
: P1 Normal
Assignee: mitz
URL: http://msdn2.microsoft.com/en-us/libr...
Keywords: InRadar, PlatformOnly, Regression
Depends on:
Blocks:
 
Reported: 2008-02-11 13:10 PST by Greg Harewood
Modified: 2010-06-10 21:05 PDT (History)
7 users (show)

See Also:


Attachments
Example UI rendered with system colors (2.55 KB, text/html)
2008-02-11 13:12 PST, Greg Harewood
no flags Details
various examples rendered by IE7 (47.14 KB, image/png)
2008-02-11 13:13 PST, Greg Harewood
no flags Details
Site using CSS system colors in Safari 3.0.4 (OK) (31.48 KB, image/jpeg)
2008-02-13 05:29 PST, Adam Strzelecki
no flags Details
Site using CSS system colors in latest WebKit r30153 (BAD, most of elements are BLACK) (26.75 KB, image/jpeg)
2008-02-13 05:30 PST, Adam Strzelecki
no flags Details
Proposed system colors for Mac (16.24 KB, image/png)
2008-02-14 12:51 PST, mitz
no flags Details
Patch to implement proposed system colors for Mac (4.58 KB, patch)
2008-02-14 12:52 PST, mitz
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Greg Harewood 2008-02-11 13:10:24 PST
This is a follow-on from bug 16905, which reported and fixed the color "menu".  I opened this bug when I observed that "MenuText" on "Menu" had bad contrast.

See URL for MS color intent explanation. See attached HTML for example of how colors are used.  See attached image for how IE7 renders the above; it is reminiscent of Windows 95.

The state of affairs seems to be that some colors have been completely omitted, some have been misunderstood, and some provide bad contrast in their intended text/background pairings.

- MenuText on Menu is white on light gray.  It should probably be black on light
gray.

- HighlightText on HighLight is black on lilac for me - i.e. themed text
selection color.  This does not appear to be Microsoft's original intent. 
HighlightText on HighLight is the combo that they use for highlighting selected
menu items.  It should, therefore, on Leopard, be white on blue.  The present
choice might equally represent what it has been used for in the field... but
the general consensus is at least light on dark - and this will give better
odds when web designers mix and match colors.

- CaptionText on ActiveCaption is black on black.  This is unreadable.  It is
the combo originally intended to be for title bars on windows, and is white on
dark blue under IE7.

- InactiveCaptionText on InactiveCaption should follow the same theme but be
paler.
Comment 1 Greg Harewood 2008-02-11 13:12:54 PST
Created attachment 19077 [details]
Example UI rendered with system colors
Comment 2 Greg Harewood 2008-02-11 13:13:36 PST
Created attachment 19078 [details]
various examples rendered by IE7
Comment 3 Adam Strzelecki 2008-02-13 05:24:24 PST
Seems that latest WebKit broke CSS system colors and many of them are now BLACK, see attached screenshots diff between Safari 3.0.4 and WebKit r30153

Colors broken (may be not complete):
ActiveCaption was OSX window header bg, in WebKit is BLACK
ThreeDShadow was dark gray as Safari inactive tab color, in WebKit is BLACK
ThreeDDarkShadow was very dark gray, in WebKit is BLACK

Please bring back old assignment from Safari 3.0.4 as our websites gonna likely look awful with new Safari release based on new WebKit.

Regards.

Comment 4 Adam Strzelecki 2008-02-13 05:29:49 PST
Created attachment 19112 [details]
Site using CSS system colors in Safari 3.0.4 (OK)
Comment 5 Adam Strzelecki 2008-02-13 05:30:43 PST
Created attachment 19113 [details]
Site using CSS system colors in latest WebKit r30153 (BAD, most of elements are BLACK)
Comment 6 Adam Strzelecki 2008-02-13 05:37:01 PST
P.S. I wouldn't call it MINOR severity as it ruins L&F of sites using CSS system colors mapping in Safari :(
Comment 7 mitz 2008-02-13 09:49:44 PST
<rdar://problem/5740573>
Comment 8 mitz 2008-02-14 12:51:20 PST
Created attachment 19121 [details]
Proposed system colors for Mac
Comment 9 mitz 2008-02-14 12:52:01 PST
Created attachment 19122 [details]
Patch to implement proposed system colors for Mac
Comment 10 Adam Strzelecki 2008-02-15 02:49:34 PST
Hmmm... and what was wrong with the colors in 3.0.4 at all? Why it is necessary to change them?

Anyhow I just have one claim to the proposed colors, ThreeDDarkShadow shouldn't be IMHO black, but dark gray.

If you take Digital ColorMeter with safari... IMHO:
ThreeDFace should be the active tab background color
ThreeDShadow should be inactive tab background color
ThreeDDarkShadow should be tabs outline color

... but anyway I'd be more keen to bring back 3.0.4 colors :>
Comment 11 Greg Harewood 2008-02-15 03:09:04 PST
Hi.

Mostly I think you have a well-considered new plan that is true to the Windows's intent but uses Mac variations where appropriate.  You show HighLight as light blue, but your current implementation actually takes it from the user-chosen text selection color.  Mine's purple.  Looks nice for text, lousy for menus.  (You could hard-code the light-blue.) You don't explain your reasoning, and I grant you that it is frequently used in the field for text highlighting.  BUt it IS intended for highlighting of menu items, and MS's colors reflect that.  If you've made an informed choice on field usage then I'll shut up, but I just wanted you to know.  Quoting from....

http://www.w3.org/TR/css3-color/

"Highlight  -  Item(s) selected in a control.
HighlightText  -  Text of item(s) selected in a control."

A whole item - like a menu item.  In a control.  Like a menu.

This would imply white on bright blue.

That's all.  You guys are doing a great great job here.  Thank you so much!! G.
Comment 12 mitz 2008-07-10 12:12:25 PDT
See also bug 19973.
Comment 13 Adam Strzelecki 2008-08-22 03:29:37 PDT
> highlighting.  BUt it IS intended for highlighting of menu items, and MS's
> colors reflect that.  If you've made an informed choice on field usage then
> I'll shut up, but I just wanted you to know.  Quoting from....
> http://www.w3.org/TR/css3-color/
> "Highlight  -  Item(s) selected in a control.
> HighlightText  -  Text of item(s) selected in a control."

You are absolutely right here. But rest of colors in Nightlies are some bad joke. Come on guys ActiveCaption and CaptionText are both black, doesn't it sound stupid enough to fix at last this bug?

Can you please bring old colors back, please. Maybe except those Highlight & HighlightText, they were all fine. I don't want a bad surprise on new Safari Mac release that will make my system management sites using CSS systems colors unusable on Mac. 
Comment 14 Jon@Chromium 2008-11-18 12:32:24 PST
Also reported against Chromium, see http://code.google.com/p/chromium/issues/detail?id=2893
Comment 15 Adam Strzelecki 2009-07-17 04:52:47 PDT
Congratulations, now this bug is pushed to official Safari 4 release. Now I got some projects where I use ActiveCaption and CaptionText totally unusable for Safari 4 users.

Thanks a lot!
Comment 16 Peter Kasting 2009-09-18 18:14:54 PDT
Mitz' patch here was never marked for review.  Assigning just so the there's a chance the patch will get un-rotted or the bug moved to some resolution.
Comment 17 Simon Fraser (smfr) 2009-12-02 09:42:04 PST
CSS3 Colors test:
<http://www.w3.org/Style/CSS/Test/CSS3/Color/20080721/xhtml1/t040501-system-colors-a.xht>