Bug 39956 - CSS: incorrect default text color for form elements
Summary: CSS: incorrect default text color for form elements
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Linux
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-05-31 08:18 PDT by Olivier Tilloy
Modified: 2023-09-20 10:16 PDT (History)
7 users (show)

See Also:


Attachments
A patch (1.62 KB, patch)
2010-05-31 08:22 PDT, Olivier Tilloy
darin: review-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Olivier Tilloy 2010-05-31 08:18:49 PDT
The default color for form elements defined in WebCore/css/html.css is incorrect in two places:

1) where defined as "color: initial", it should be "color: CaptionText" instead
2) where overridden as "color: black" (for keygen and select elements), it should be removed

Those changes will allow the various ports to implement widget styling respecting the system's theme, thus achieving a better consistency.

Note: the original discussion that lead to this bug report is at https://bugs.webkit.org/show_bug.cgi?id=37779. People who reviewed the original patch seem to agree it's correct, it needs testing against all the ports to make sure it doesn't break existing layout tests.
Comment 1 Olivier Tilloy 2010-05-31 08:22:36 PDT
Created attachment 57469 [details]
A patch

This patch was split from the original patch attached to bug #37779, it contains only the changes to WebCore/css/html.css
Comment 2 Darin Adler 2010-05-31 09:37:51 PDT
Comment on attachment 57469 [details]
A patch

A change that fixes a bug needs a test case, either automated or manual. Automated tests go into the LayoutTests directory, and manual tests into WebCore/manual-tests. I'm hoping there's a way to do an automated test of this.

Please re-submit the patch with a test in the patch.
Comment 3 Peter Kasting 2010-05-31 09:55:47 PDT
I don't have the knowledge to give this thumbs-up or down off the top of my head.  I may have written RenderThemeChromiumWin::systemColor(), but that's an easy mechanical mapping of WebKit constants to Windows ones, and doesn't inform the question of what the original WebKit CSS setup should be.
Comment 4 Shinichiro Hamaji 2010-05-31 22:31:22 PDT
(In reply to comment #3)
> I don't have the knowledge to give this thumbs-up or down off the top of my head.  I may have written RenderThemeChromiumWin::systemColor(), but that's an easy mechanical mapping of WebKit constants to Windows ones, and doesn't inform the question of what the original WebKit CSS setup should be.

Thanks for your comment. I have no idea how Windows' GetSysColor determines the color (maybe it uses system's theme?) and I've never worked on theme related issues. I CCed you because I guessed you could have some experience around themes.
Comment 5 Shinichiro Hamaji 2010-05-31 22:31:46 PDT
I played on my Windows with the following HTML:

<select style="color:captiontext"><option>foo</select>
<select><option>foo</select>

It seemed my default theme's captiontext is black and there were no difference between this two <select>s at first. However, after I changed my color theme to "High Contrast Black", the "foo" in the former <select> has disappeared. I think we might need to change the background color of <select>.

Also, I think we should use different system colors for different elements. Specifically,

- It seems <button> families have already had color:ButtonText and background-color:ButtonFace . I guess you can fix button's issue by setting ButtonFace properly in RenderThemeGtk.cpp ?
- We should use color:menutext and background-color:menu for <select> and <keygen> .
- I'm not sure, but I guess we should not specify the color for <textarea>, <input>, and <isindex> .
Comment 6 Olivier Tilloy 2010-06-01 09:09:43 PDT
Note regarding system colors (specification at http://www.w3.org/TR/CSS2/ui.html#system-colors): there is in the tree a layout test named fast/css/css2-system-color.html that was added on 2007-12-16 and disabled on 2007-12-17 ("until we can find a way to make it pass on diverse machines"). I'm not sure the issue with this test is still valid, I think it would be worth trying to enable it again.
Comment 7 Alexey Proskuryakov 2010-06-02 11:36:49 PDT
See also: bug 23760. Should this be marked as a duplicate of the older one?
Comment 8 Alexey Proskuryakov 2010-06-02 11:38:22 PDT
Also, please see bug 6129 and bug 13575.
Comment 9 Olivier Tilloy 2010-06-02 11:53:36 PDT
As I understand it, bug #23760 is specific to Safari on windows (and should be marked as such, I suppose).
Bug #6129 and bug #13575 are specific to Safari on OS X.

All three bugs are about the implementation of the mapping between CSS constants and system colours (much like bug #40024 for the GTK port), while this bug is about wrong default values in the default CSS for some widgets. In practice, both types of bugs will influence the final rendering of widgets in forms though.
Comment 10 Ahmad Saleem 2023-09-20 10:16:17 PDT
We still have both (which this patch was trying to modify):

https://searchfox.org/wubkat/source/Source/WebCore/css/html.css#412

input, textarea, select, button {
    margin: 0__qem;
#if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
    font: -webkit-small-control;
#endif
    color: initial; <----------- here
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

and

https://searchfox.org/wubkat/source/Source/WebCore/css/html.css#1098

select {
    box-sizing: border-box;
    appearance: auto;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    padding: 0 0.4em 0 0.4em;
    color: -apple-system-blue;
    font: 11px system-ui;
    border: 1px solid -webkit-control-background;
    border-radius: initial;
#if defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION
    background-color: rgba(0, 0, 0, 0.04);
#else
    background-color: -apple-system-opaque-secondary-fill;
#endif /* defined(WTF_PLATFORM_VISION) && WTF_PLATFORM_VISION */
#else
    border-radius: 5px;
    border: 1px solid;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) && HAVE_OS_DARK_MODE_SUPPORT
    color: CanvasText;
    background-color: Canvas;
#else
    color: black; <---------------- here
    background-color: white;
#endif /* defined(HAVE_OS_DARK_MODE_SUPPORT) && HAVE_OS_DARK_MODE_SUPPORT */
#endif
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    cursor: default;
}