Bug 50287 - A radio button within label within legend can't be activated
Summary: A radio button within label within legend can't be activated
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-11-30 16:25 PST by Alexander
Modified: 2012-02-18 04:37 PST (History)
3 users (show)

See Also:


Attachments
radio button within label within legend can't be selected demo (11.70 KB, text/html)
2010-11-30 16:25 PST, Alexander
no flags Details
Trimmer version of test case to reproduce the issue (306 bytes, text/html)
2012-02-15 02:31 PST, SravanKumar S(:sravan)
no flags Details
Test case to demo proper and buggy behaviour because of float style. (322 bytes, text/html)
2012-02-18 04:35 PST, SravanKumar S(:sravan)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.