1229201 - Getting id on a form element returns one of its children Elements

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[jb.peraldi]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

Steps to reproduce:

1) Go to http://www.msigroupltd.com/pharma/
2) Open the console, type the following code: document.querySelector('form[name="frmNewuser"]').id


Actual results:

The code returns an HTMLInputElement.


Expected results:

The code should have returned an empty string. 
It seems that when a <form> has a child element that does not have an end tag (such as <img> and <input>) and when the child has an ID with the value "id", calling id on the <form> element returns the child element instead of returning either an empty string or the value of the <form> ID.
I created three test cases available on jsfiddle: http://jsfiddle.net/zyy54jmj/4/

Comment 1

[jb.peraldi]

Attachment: testcase

Reduced test case with minimal HTML and Javascript. The console logs an HTMLInputElement while the string "test" was expected.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

See https://html.spec.whatwg.org/multipage/forms.html#the-form-element:supported-property-names
and http://heycam.github.io/webidl/#dfn-supported-property-names

So the id or name attributes in form controls elements or img elements end up creating mapping from
form's named getter to those elements.