Bug 50287

Summary:

A radio button within label within legend can't be activated

Product:

WebKit

Reporter:

Alexander <bugzilla.webkit>

Component:

Forms

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, akeerthi, bfulgham, kbolisetty, mrahaman, rniwa, ssandela

Priority:

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

Alexander

Reported 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)

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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Alexey Proskuryakov

Comment 1 2010-11-30 22:32:59 PST

Confirmed in Safari with r72777.

SravanKumar S(:sravan)

Comment 2 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?.

SravanKumar S(:sravan)

Comment 3 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.

SravanKumar S(:sravan)

Comment 4 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.

Ahmad Saleem

Comment 5 2022-10-25 08:19:57 PDT

I am able to reproduce this bug in Safari 16.1 and Safari Technology Preview 156 using attached test case from Comment 04 and it does not show "radio" button for first legend while other browsers (Chrome Canary 109 and Firefox Nightly 108) do show "radio button" for first legend similar to second. Just wanted to update testing result. Thanks!

Note You need to log in before you can comment on or make changes to this bug.