Bug 13834

Summary: Checkboxes and radio buttons don't see CSS background color
Product: WebKit Reporter: Beat <brunner>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Minor CC: adele, eric, fabrizio.machado, hyatt, julien_dumont
Priority: P4    
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-

Description Beat 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).
Comment 1 David Kilzer (:ddkilzer) 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!
Comment 2 David Kilzer (:ddkilzer) 2007-05-22 22:36:44 PDT 
Created attachment 14677 [details]
Test case from Comment #0
Comment 3 David Kilzer (:ddkilzer) 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.
Comment 4 Julien Dumont 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
Comment 5 Julien Dumont 2010-11-10 03:24:06 PST 
Some one still looking at this issue ?
Comment 6 Fabrizio 2011-01-19 06:02:40 PST 
I'm looking into this, can someone assign to me?  I don't have permissions.
Comment 7 aravind.akella 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.
Comment 8 Eric Seidel (no email) 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.
Comment 9 Eric Seidel (no email) 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?
Comment 10 Eric Seidel (no email) 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.
Comment 11 Fabrizio 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/
Comment 12 Alexey Proskuryakov 2011-08-08 11:01:30 PDT 
See also: bug 65843.