RadioNodeList support in HTMLFormElement::elements
[WebKit-https.git] / LayoutTests / fast / forms / form-collection-radio-node-list.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <script src="../js/resources/js-test-pre.js"></script>
5 <p id="description"></p>
6 <div id="divId">
7 <form id="form1">
8     <button id=button1></button>
9     <fieldset id=fieldset1><legend id=legend1></legend></fieldset>
10     <input id=inputhidden type=hidden>
11     <input id=commoninput type=text>
12     <input id=inputcommon type=search value=searching>
13     <input id=inputurl type=url>
14     <input id=commoninput type=email>
15     <input id=inputpassword type=password>
16     <input id=inputdate type=date>
17     <input id=numberId name=inputcommon type=number value=123>
18     <input id=inputrange type=range>
19     <input id=inputcolor type=color>
20     <input id=inputcheckbox type=checkbox>
21     <input id=inputcommon type=radio value="inputRadioValue">
22     <input id=inputfile type=file>
23     <input id=inputsubmit type=submit>
24     <input id=inputcommon type=image>
25     <input id=commoninput type=reset>
26     <input id=inputcommon type=button value=buttonValue>
27     <keygen id=keygen1></keygen>
28     <label id=label1></label>
29     <meter id=meter1></meter>
30     <object id=object1></object>
31     <output id=output1></output>
32     <progress id=progress1></progress>
33     <select id=select1>
34         <optgroup id=optgroup1>group1</optgroup>
35         <option id=option1>option1</option>
36     </select>
37     <textarea id=textarea1></textarea>
38 </form>
39 </div>
40 <div id="console"></div>
41 <script>
42 description("This test is for RadioNodeList specified at http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#radionodelist ");
43 debug("");
44 var owner = document.getElementById('form1');
45
46 shouldBe('owner.elements.length', '23');
47
48 var elementsList = owner.elements;
49 var radioNodeList = elementsList.namedItem("inputcommon");
50 shouldBe('radioNodeList.length', '4');
51
52 shouldBe('radioNodeList[0].value', "'searching'");
53 shouldBe('radioNodeList[1].value', "'123'");
54 shouldBe('radioNodeList[2].value', "'inputRadioValue'");
55 shouldBe('radioNodeList[3].value', "'buttonValue'");
56
57 debug("");
58 debug("Changing the input value to check RadioNodeList is live view of FormCollection");
59 document.getElementById("numberId").value = 456;
60 shouldBe('radioNodeList[1].value', "'456'");
61
62 debug("");
63 debug("Checking value IDL attribute on the RadioNodeList");
64 shouldBe('radioNodeList.value', '""');
65 shouldBe('radioNodeList.value = "inputRadioValue"; radioNodeList[2].checked', 'true');
66 shouldBe('Object.prototype.toString.call(radioNodeList[2])', "'[object HTMLInputElement]'");
67 shouldBe('radioNodeList[2].type', "'radio'");
68
69 radioNodeList[2].checked = false;
70 shouldBe('radioNodeList.value', '""');
71 shouldBe('radioNodeList[2].checked = true; radioNodeList.value', "'inputRadioValue'");
72
73 var newElement = document.createElement("input");
74 newElement.setAttribute("type", "text");
75 newElement.setAttribute("value", "new element");
76 newElement.setAttribute("id", "inputcommon");
77
78 debug("");
79 debug("Check RadioNodeList is updated after adding a new element");
80 shouldBe('owner.appendChild(newElement); radioNodeList.length', '5');
81 shouldBe('radioNodeList[4].value', "'new element'");
82
83 debug("");
84 debug("Check RadioNodeList is updated after remove an element");
85 shouldBe('owner.removeChild(newElement); radioNodeList.length', '4');
86 shouldBe('radioNodeList[3].value', "'buttonValue'");
87
88 var nonSubtreeElement = document.createElement("input");
89 nonSubtreeElement.setAttribute("type", "text");
90 nonSubtreeElement.setAttribute("value", "non subtree element");
91 nonSubtreeElement.setAttribute("id", "inputcommon");
92 nonSubtreeElement.setAttribute("form", "form1");
93
94 var container = document.getElementById("divId");
95
96 debug("");
97 debug("Check RadioNodeList is updated after adding a new element");
98 shouldBe('container.appendChild(nonSubtreeElement); radioNodeList.length', '5');
99 shouldBe('owner.elements.length', '24');
100 shouldBe('radioNodeList[4].value', "'non subtree element'");
101
102 debug("");
103 debug("Check RadioNodeList is updated after change in id, type and checked state of an element");
104 shouldBe('radioNodeList.length', '5');
105 debug("After changing the id");
106 radioNodeList[4].id = "changedName";
107 shouldBe('radioNodeList.length', '4');
108
109 shouldBe('elementsList[13].checked = false; radioNodeList.value', '""');
110 shouldBe('elementsList[13].checked = true; radioNodeList.value', "'inputRadioValue'");
111 shouldBe('elementsList[13].type = "date"; radioNodeList.value', "''");
112
113 debug("");
114 debug("Check second RadioNodeList is also created properly");
115 var radioNodeList2 = elementsList.namedItem("commoninput");
116 shouldBe('radioNodeList2.length', '3');
117
118 shouldBe('radioNodeList2[0].type', "'text'");
119 shouldBe('radioNodeList2[1].type', "'email'");
120 shouldBe('radioNodeList2[2].type', "'reset'");
121 radioNodeList2[2].id = "idChanged";
122 debug("After changing the id");
123 shouldBe('radioNodeList2.length', '2');
124 debug("");
125 </script>
126 <script src="../js/resources/js-test-post.js"></script>
127 </body>
128 </html>