Bug 13834

Summary:

Checkboxes and radio buttons don't see CSS background color

Product:

WebKit

Reporter:

Beat <brunner>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Minor

CC:

adele, eric, fabrizio.machado, hyatt, julien_dumont

Priority:

Version:

523.x (Safari 3)

Hardware:

Mac

OS:

OS X 10.4

URL:

http://www.joomlapolis.com/component/option,com_comprofiler/task,registers/

Attachments:

Description	Flags
Test case from Comment #0	none
Patch for Qtwebkit	eric: review-

Beat

Reported 2007-05-22 18:39:41 PDT

Logging separate bug as requested: related to same page as http://bugs.webkit.org/show_bug.cgi?id=13802 : A small detail on the same code and page: it looks like radio buttons and checkboxes (you can see that behavior on the same page in URL in "spoken languages" after clicking on register without filling-in anything) are not taking in account the background color (red), as some other browsers do. Opera 9's behavior seems the correct one. This bug is consistant between pure html below, and javascript setting as in URL, of the background Test html code here as requested: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <form> <input type="radio" style="background:red;" name="test" />test radio<br /> <input type="checkbox" style="background:red;" name="test" />test radio<br /> <input type="radio" style="background-color:red;" name="test" />test radio<br /> <input type="checkbox" style="background-color:red;" name="test" />test radio<br /> <input type="radio" style="background:red;width:40px;height:40px;" name="test" />test radio<br /> <input type="checkbox" style="background:red;width:40px;height:40px;" name="test" />test radio<br /> </form> </body> </html> (wow, thanks: cool for already fixing the previous one. I actually checked and wow all the bugs i previously reported through the safari feedback form seem fixed).

Attachments
Test case from Comment #0 (831 bytes, application/xhtml+xml) 2007-05-22 22:36 PDT, David Kilzer (:ddkilzer)	no flags	Details
Patch for Qtwebkit (20.87 KB, patch) 2011-01-24 13:11 PST, aravind.akella	eric: review-	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

David Kilzer (:ddkilzer)

Comment 1 2007-05-22 22:33:31 PDT

Beat, please add test cases to the bug as attachments. It's much easier for us to test them that way. Thanks!

David Kilzer (:ddkilzer)

Comment 2 2007-05-22 22:36:44 PDT

Created attachment 14677 [details] Test case from Comment #0

David Kilzer (:ddkilzer)

Comment 3 2007-05-22 22:38:47 PDT

Confirmed with a local debug build of WebKit r21639 with Safari 2.0.4 (419.3) on Mac OS X 10.4.9 (8P135). Works in Opera 9.10. Does not work in Firefox 2.0.0.3.

Julien Dumont

Comment 4 2010-08-16 01:52:21 PDT

No news on it since so many years ... too bad. This issues seems to be related to another one : https://bugs.webkit.org/show_bug.cgi?id=9846 Julien

Julien Dumont

Comment 5 2010-11-10 03:24:06 PST

Some one still looking at this issue ?

Fabrizio

Comment 6 2011-01-19 06:02:40 PST

I'm looking into this, can someone assign to me? I don't have permissions.

aravind.akella

Comment 7 2011-01-24 13:11:59 PST

Created attachment 79961 [details] Patch for Qtwebkit This is a qt specific fix for enabling background color to checkboxes & radio buttons. Setting the palette on the QStyleoption which is passed on to QStyle::drawControl() Currently background color is supported in windows,plastique styles. Other styles like gtk,qts60,motif etc. don't support this. Running QtTestBrowser with -style windows/plastique option shows the background color for the checkbox. W3C specification states background-color sets the background color of an element, and this property applies to all elements. (see http://www.w3.org/TR/CSS21/colors.html#propdef-background-color) Opera and IE are currently the only browsers that attempt to support this property for checkboxes and radio buttons. Opera fills the checkbox rectangle with the color specified in background-color property, whereas IE creates a colored border around the checkbox rectangle using the background-color. With this fix QtWebkit based browsers (with windows/plastique styles) will behave like opera.

Eric Seidel (no email)

Comment 8 2011-01-24 15:26:09 PST

As far as I can tell this report is Qt specific? Or do you believe all platforms behave "wrongly" here.

Eric Seidel (no email)

Comment 9 2011-01-24 15:28:13 PST

Apple's Mac port certainly does not respect the background color on those checkboxes. But I think this might be intentional. I guess this isn't a Qt-specific bug and the posted patch is thus wrong. Do FF and IE respect background color in the test case?

Eric Seidel (no email)

Comment 10 2011-01-24 15:28:55 PST

Comment on attachment 79961 [details] Patch for Qtwebkit We should either fix all platforms or none of them. It's not clear that this change is desired. Please get one of the (CC'd) CSS experts to chime in.

Fabrizio

Comment 11 2011-01-24 17:02:50 PST

FF and IE don't handle the property well. IE tries to apply it but, instead of filling the checkbox, it creates a colored border around it. And FF simply ignores it. So far, Opera is the only browser we've tested that fills the checkbox with the background-color as expected. We think current behavior is wrong and Opera's treatment of this prop is correct, but would be nice to get feedback from CSS experts too. Is this fix desired for all platforms? Some backstory on control styling: http://webkit.org/blog/17/the-new-form-controls-checkbox-2/

Alexey Proskuryakov

Comment 12 2011-08-08 11:01:30 PDT