Bug 50287

Summary: A radio button within label within legend can't be activated
Product: WebKit Reporter: Alexander <bugzilla.webkit>
Component: FormsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: kbolisetty, mrahaman, ssandela
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
radio button within label within legend can't be selected demo
none
Trimmer version of test case to reproduce the issue
none
Test case to demo proper and buggy behaviour because of float style. none

Description Alexander 2010-11-30 16:25:23 PST
Created attachment 75221 [details]
radio button within label within legend can't be selected demo

While working on an exercise for my website lessons, I found a strange behaviour in google chrome:

An input type=radio can't be selected if it's within a label tag which is within a legend tag. Have a look at the attachment for a demo (just try to press "Kreditkarte") If I remove the padding value for the legend tag, the label and the radio button disappear.

As the HTML works fine in FF, IE and Opera alias Gecko, Trident and Presto, I think it must be a Webkit specific problem. This is my first bug report so if I've missed something please mail me via http://alexplus.de/kontakt.html (please use the contact form)
Comment 1 Alexey Proskuryakov 2010-11-30 22:32:59 PST
Confirmed in Safari with r72777.
Comment 2 SravanKumar S(:sravan) 2012-02-15 02:31:45 PST
Created attachment 127143 [details]
Trimmer version  of test case to reproduce the issue

Hi,

On trying to root cause the issue, i could bring it down to following combination of tags with styling information, with which issue is still re-producible(Also attached as fieldset-legend-label-style.html).

<html>
<head>
<style type="text/css">
fieldset legend {
	padding: 4px;	
}
label {
	float: left;
	margin-top: 3px;
	margin-bottom: 5px;
}
</style>
</head>
<body><form><fieldset><legend><label class="radio"><input type="radio" />Kreditkarte</label></legend></fieldset></form></body>
</html>

Now on further analyzing and experimentation with different possibilities i've got a basic query.

1. Is the above combination of tags and styling information is valid?, Because from http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#h-17.10 (HTML 4 Spec) "The LEGEND element allows authors to assign a caption to a FIELDSET.". And the examples show only Simple text and no input elements added to it. So, i just wanted to confirm that above combination of tags is true and valid. 

Neverthless i see that above tags and style combination is rendering properly in FF and IE. But hey, its not the spec, so can some one please confirm?.
Comment 3 SravanKumar S(:sravan) 2012-02-18 03:58:33 PST
Comment on attachment 127143 [details]
Trimmer version  of test case to reproduce the issue

This test has too many variables to Demo the Bug, hence deprecating it.
Comment 4 SravanKumar S(:sravan) 2012-02-18 04:35:57 PST
Created attachment 127704 [details]
Test case to demo proper and buggy behaviour because of float style.

On further analysis 

1.Qualifying "label" as float when it is in-side a legend element is creating the problem.

2. radio-button, as a matter of fact any other form element has nothing to do with it, as any form element behaves the same way. So, it is not a issue specific to any form element.

3.By default label is Inline, and when "float" styling information is applied its becoming block and since already "input" is block element, i think it is trying to stack vertically the new block element and hence not able to get the height for legend element. Hence its height is 0 and unable to paint it.

4.Attached test case showing two different scenarios, we see no legend element in first case where float: left is specified, and no such thing in second scenario where no styling information is specified.