OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
5 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <p id="description"></p> | 7 <p id="description"></p> |
8 <div id="console"></div> | 8 <div id="console"></div> |
9 <script> | 9 <script> |
10 description("This test checks the form attribute of the form-associated elements
."); | 10 description("This test checks the form attribute of the form-associated elements
."); |
11 | 11 |
12 var container = document.createElement('div'); | 12 var container = document.createElement('div'); |
13 document.body.appendChild(container); | 13 document.body.appendChild(container); |
14 | 14 |
15 debug('- Checks the existence of the form attribute for each form-associated ele
ments.'); | 15 debug('- Checks the existence of the form attribute for each form-associated ele
ments.'); |
16 container.innerHTML = '<form id=owner></form>' + | 16 container.innerHTML = '<form id=owner></form>' + |
17 '<button name=victim form=owner />' + | 17 '<button name=victim form=owner />' + |
18 '<fieldset name=victim form=owner />' + | 18 '<fieldset name=victim form=owner />' + |
19 '<input name=victim form=owner />' + | 19 '<input name=victim form=owner />' + |
20 '<keygen name=victim form=owner />' + | 20 '<keygen name=victim form=owner />' + |
21 '<label name=victim form=owner />' + | 21 '<label name=victim form=owner></label>' + |
22 '<object name=victim form=owner></object>' + | 22 '<object name=victim form=owner></object>' + |
23 '<output name=victim form=owner />' + | 23 '<output name=victim form=owner />' + |
24 '<select name=victim form=owner />' + | 24 '<select name=victim form=owner />' + |
25 '<textarea name=victim form=owner />'; | 25 '<textarea name=victim form=owner />'; |
26 | 26 |
27 var owner = document.getElementById('owner'); | 27 var owner = document.getElementById('owner'); |
28 shouldBe('document.getElementsByTagName("button")[0].form', 'owner'); | 28 shouldBe('document.getElementsByTagName("button")[0].form', 'owner'); |
29 shouldBe('document.getElementsByTagName("fieldset")[0].form', 'owner'); | 29 shouldBe('document.getElementsByTagName("fieldset")[0].form', 'owner'); |
30 shouldBe('document.getElementsByTagName("input")[0].form', 'owner'); | 30 shouldBe('document.getElementsByTagName("input")[0].form', 'owner'); |
31 shouldBe('document.getElementsByTagName("keygen")[0].form', 'owner'); | 31 shouldBe('document.getElementsByTagName("keygen")[0].form', 'owner'); |
32 shouldBe('document.getElementsByTagName("label")[0].form', 'owner'); | 32 shouldBeNull('document.getElementsByTagName("label")[0].form'); |
33 shouldBe('document.getElementsByTagName("object")[0].form', 'owner'); | 33 shouldBe('document.getElementsByTagName("object")[0].form', 'owner'); |
34 shouldBe('document.getElementsByTagName("output")[0].form', 'owner'); | 34 shouldBe('document.getElementsByTagName("output")[0].form', 'owner'); |
35 shouldBe('document.getElementsByTagName("select")[0].form', 'owner'); | 35 shouldBe('document.getElementsByTagName("select")[0].form', 'owner'); |
36 shouldBe('document.getElementsByTagName("textarea")[0].form', 'owner'); | 36 shouldBe('document.getElementsByTagName("textarea")[0].form', 'owner'); |
37 | 37 |
38 debug(''); | 38 debug(''); |
39 debug('- Ensures that the form attribute points the form owner even if the eleme
nt is within another form element.'); | 39 debug('- Ensures that the form attribute points the form owner even if the eleme
nt is within another form element.'); |
40 container.innerHTML = '<form id=owner></form>' + | 40 container.innerHTML = '<form id=owner></form>' + |
41 '<form id=shouldNotBeOwner>' + | 41 '<form id=shouldNotBeOwner>' + |
42 ' <input id=inputElement name=victim form=owner />' + | 42 ' <input id=inputElement name=victim form=owner />' + |
43 ' <label id=labelElement name=victim form=owner />' + | 43 ' <label id=labelElement name=victim for=inputElement />' + |
44 '</form>'; | 44 '</form>'; |
45 owner = document.getElementById('owner'); | 45 owner = document.getElementById('owner'); |
46 var inputElement = document.getElementById('inputElement'); | 46 var inputElement = document.getElementById('inputElement'); |
47 var labelElement = document.getElementById('labelElement'); | 47 var labelElement = document.getElementById('labelElement'); |
48 shouldBe('inputElement.form', 'owner'); | 48 shouldBe('inputElement.form', 'owner'); |
49 shouldBe('labelElement.form', 'owner'); | 49 shouldBe('labelElement.form', 'owner'); |
50 | 50 |
51 | 51 |
52 debug(''); | 52 debug(''); |
53 debug('- Ensures that the form attribute of all form-associated element with or
witout form attribute points the form owner.'); | 53 debug('- Ensures that the form attribute of all form-associated element with or
witout form attribute points the form owner.'); |
54 container.innerHTML = '<form id=owner>' + | 54 container.innerHTML = '<form id=owner>' + |
55 ' <input id=inputElement1 name=victim />' + | 55 ' <input id=inputElement1 name=victim />' + |
56 ' <input id=inputElement2 name=victim form=owner />' + | 56 ' <input id=inputElement2 name=victim form=owner />' + |
57 ' <input id=inputElement3 name=victim />' + | 57 ' <input id=inputElement3 name=victim />' + |
58 ' <label id=labelElement1 name=victim />' + | 58 ' <label id=labelElement1 name=victim />' + |
59 ' <label id=labelElement2 name=victim form=owner />' + | 59 ' <label id=labelElement2 name=victim form=owner />' + |
60 ' <label id=labelElement3 name=victim />' + | 60 ' <label id=labelElement3 name=victim />' + |
61 '</form>'; | 61 '</form>'; |
62 owner = document.getElementById('owner'); | 62 owner = document.getElementById('owner'); |
63 var inputElement1 = document.getElementById('inputElement1'); | 63 var inputElement1 = document.getElementById('inputElement1'); |
64 var inputElement2 = document.getElementById('inputElement2'); | 64 var inputElement2 = document.getElementById('inputElement2'); |
65 var inputElement3 = document.getElementById('inputElement3'); | 65 var inputElement3 = document.getElementById('inputElement3'); |
66 var labelElement1 = document.getElementById('labelElement1'); | 66 var labelElement1 = document.getElementById('labelElement1'); |
67 var labelElement2 = document.getElementById('labelElement2'); | 67 var labelElement2 = document.getElementById('labelElement2'); |
68 var labelElement3 = document.getElementById('labelElement3'); | 68 var labelElement3 = document.getElementById('labelElement3'); |
69 shouldBe('inputElement1.form', 'owner'); | 69 shouldBe('inputElement1.form', 'owner'); |
70 shouldBe('inputElement2.form', 'owner'); | 70 shouldBe('inputElement2.form', 'owner'); |
71 shouldBe('inputElement3.form', 'owner'); | 71 shouldBe('inputElement3.form', 'owner'); |
72 shouldBe('labelElement1.form', 'owner'); | 72 shouldBeNull('labelElement1.form'); |
73 shouldBe('labelElement2.form', 'owner'); | 73 shouldBeNull('labelElement2.form'); |
74 shouldBe('labelElement3.form', 'owner'); | 74 shouldBeNull('labelElement3.form'); |
75 | 75 |
76 debug(''); | 76 debug(''); |
77 debug('- Ensures that the form attribute points the form owner even if the form
element is nested another form element.'); | 77 debug('- Ensures that the form attribute points the form owner even if the form
element is nested another form element.'); |
78 debug('NOTE: It seems that nesting form elements is not allowed so we ensure eac
h form-associated elements associate with the outmost form element.'); | 78 debug('NOTE: It seems that nesting form elements is not allowed so we ensure eac
h form-associated elements associate with the outmost form element.'); |
79 container.innerHTML = '<form id=owner>' + | 79 container.innerHTML = '<form id=owner>' + |
80 ' <form>' + | 80 ' <form>' + |
81 ' <input id=inputElement1 name=victim form=owner />' + | 81 ' <input id=inputElement1 name=victim form=owner />' + |
82 ' <input id=inputElement2 name=victim />' + | 82 ' <input id=inputElement2 name=victim />' + |
83 ' <input id=inputElement3 name=victim form=owner />' + | 83 ' <input id=inputElement3 name=victim form=owner />' + |
84 ' <label id=labelElement1 name=victim form=owner />' + | 84 ' <label id=labelElement1 name=victim form=owner />' + |
85 ' <label id=labelElement2 name=victim />' + | 85 ' <label id=labelElement2 name=victim />' + |
86 ' <label id=labelElement3 name=victim form=owner />' + | 86 ' <label id=labelElement3 name=victim form=owner />' + |
87 ' </form>' + | 87 ' </form>' + |
88 '</form>'; | 88 '</form>'; |
89 owner = document.getElementById('owner'); | 89 owner = document.getElementById('owner'); |
90 inputElement1 = document.getElementById('inputElement1'); | 90 inputElement1 = document.getElementById('inputElement1'); |
91 inputElement2 = document.getElementById('inputElement2'); | 91 inputElement2 = document.getElementById('inputElement2'); |
92 inputElement3 = document.getElementById('inputElement3'); | 92 inputElement3 = document.getElementById('inputElement3'); |
93 labelElement1 = document.getElementById('labelElement1'); | 93 labelElement1 = document.getElementById('labelElement1'); |
94 labelElement2 = document.getElementById('labelElement2'); | 94 labelElement2 = document.getElementById('labelElement2'); |
95 labelElement3 = document.getElementById('labelElement3'); | 95 labelElement3 = document.getElementById('labelElement3'); |
96 shouldBe('inputElement1.form', 'owner'); | 96 shouldBe('inputElement1.form', 'owner'); |
97 shouldBe('inputElement2.form', 'owner'); | 97 shouldBe('inputElement2.form', 'owner'); |
98 shouldBe('inputElement3.form', 'owner'); | 98 shouldBe('inputElement3.form', 'owner'); |
99 shouldBe('labelElement1.form', 'owner'); | 99 shouldBeNull('labelElement1.form'); |
100 shouldBe('labelElement2.form', 'owner'); | 100 shouldBeNull('labelElement2.form'); |
101 shouldBe('labelElement3.form', 'owner'); | 101 shouldBeNull('labelElement3.form'); |
102 | 102 |
103 debug(''); | 103 debug(''); |
104 debug('- Ensures whether the form owner is set correctly when the value of form
attribute of a form-associated element changed.'); | 104 debug('- Ensures whether the form owner is set correctly when the value of form
attribute of a form-associated element changed.'); |
105 container.innerHTML = '<form id=form1></form>' + | 105 container.innerHTML = '<form id=form1></form>' + |
106 '<form id=form2></form>' + | 106 '<form id=form2></form>' + |
107 '<input id=inputElement name=victim form=form1 />' + | 107 '<input id=inputElement name=victim form=form1 />' + |
108 '<label id=labelElement name=victim form=form1 />' + | |
109 '<object id=objectElement name=victim form=form1></object>'; | 108 '<object id=objectElement name=victim form=form1></object>'; |
110 var form1 = document.getElementById('form1'); | 109 var form1 = document.getElementById('form1'); |
111 var form2 = document.getElementById('form2'); | 110 var form2 = document.getElementById('form2'); |
112 inputElement = document.getElementById('inputElement'); | 111 inputElement = document.getElementById('inputElement'); |
113 shouldBe('inputElement.form', 'form1'); | 112 shouldBe('inputElement.form', 'form1'); |
114 inputElement.attributes['form'].value = 'form2'; | 113 inputElement.attributes['form'].value = 'form2'; |
115 shouldBe('inputElement.form', 'form2'); | 114 shouldBe('inputElement.form', 'form2'); |
116 | 115 |
117 // HTMLabelElement has its own implementation of formAttr processing and so need
s its own test. | |
118 labelElement = document.getElementById('labelElement'); | |
119 shouldBe('labelElement.form', 'form1'); | |
120 labelElement.attributes['form'].value = 'form2'; | |
121 shouldBe('labelElement.form', 'form2'); | |
122 | |
123 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. | 116 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. |
124 objectElement = document.getElementById('objectElement'); | 117 objectElement = document.getElementById('objectElement'); |
125 shouldBe('objectElement.form', 'form1'); | 118 shouldBe('objectElement.form', 'form1'); |
126 objectElement.attributes['form'].value = 'form2'; | 119 objectElement.attributes['form'].value = 'form2'; |
127 shouldBe('objectElement.form', 'form2'); | 120 shouldBe('objectElement.form', 'form2'); |
128 | 121 |
129 debug(''); | 122 debug(''); |
130 debug('- Ensures whether the form owner is set correctly when the value of form
attribute is added/removed.'); | 123 debug('- Ensures whether the form owner is set correctly when the value of form
attribute is added/removed.'); |
131 container.innerHTML = '<form id=owner name=firstOwner></form>' + | 124 container.innerHTML = '<form id=owner name=firstOwner></form>' + |
132 '<input id=inputElement name=victim />' + | 125 '<input id=inputElement name=victim />' + |
133 '<label id=labelElement name=victim />' + | |
134 '<object id=objectElement name=victim></object>'; | 126 '<object id=objectElement name=victim></object>'; |
135 owner = document.getElementById('owner'); | 127 owner = document.getElementById('owner'); |
136 inputElement = document.getElementById('inputElement'); | 128 inputElement = document.getElementById('inputElement'); |
137 shouldBe('inputElement.form', 'null'); | 129 shouldBe('inputElement.form', 'null'); |
138 var formAttribute = document.createAttribute('form'); | 130 var formAttribute = document.createAttribute('form'); |
139 inputElement.setAttribute('form', 'owner'); | 131 inputElement.setAttribute('form', 'owner'); |
140 shouldBe('inputElement.form', 'owner'); | 132 shouldBe('inputElement.form', 'owner'); |
141 inputElement.removeAttribute('form'); | 133 inputElement.removeAttribute('form'); |
142 shouldBe('inputElement.form', 'null'); | 134 shouldBe('inputElement.form', 'null'); |
143 | 135 |
144 // HTMLLabelElement has its own implementation of formAttr processing and so nee
ds its own test. | |
145 labelElement = document.getElementById('labelElement'); | |
146 shouldBe('labelElement.form', 'null'); | |
147 labelElement.setAttribute('form', 'owner'); | |
148 shouldBe('labelElement.form', 'owner'); | |
149 labelElement.removeAttribute('form'); | |
150 shouldBe('labelElement.form', 'null'); | |
151 | |
152 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. | 136 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. |
153 objectElement = document.getElementById('objectElement'); | 137 objectElement = document.getElementById('objectElement'); |
154 shouldBe('objectElement.form', 'null'); | 138 shouldBe('objectElement.form', 'null'); |
155 objectElement.setAttribute('form', 'owner'); | 139 objectElement.setAttribute('form', 'owner'); |
156 shouldBe('objectElement.form', 'owner'); | 140 shouldBe('objectElement.form', 'owner'); |
157 objectElement.removeAttribute('form'); | 141 objectElement.removeAttribute('form'); |
158 shouldBe('objectElement.form', 'null'); | 142 shouldBe('objectElement.form', 'null'); |
159 | 143 |
160 debug(''); | 144 debug(''); |
161 debug('- Ensures whether the form owner is set correctly when the form owner is
added/removed.'); | 145 debug('- Ensures whether the form owner is set correctly when the form owner is
added/removed.'); |
162 container.innerHTML = '<form id=owner name=firstOwner></form>' + | 146 container.innerHTML = '<form id=owner name=firstOwner></form>' + |
163 '<form id=owner name=secondOwner></form>' + | 147 '<form id=owner name=secondOwner></form>' + |
164 '<input id=inputElement name=victim form=owner />' + | 148 '<input id=inputElement name=victim form=owner />'; |
165 '<label id=labelElement name=victim form=owner />'; | |
166 owner = document.getElementById('owner'); | 149 owner = document.getElementById('owner'); |
167 shouldBeEqualToString('owner.name', 'firstOwner'); | 150 shouldBeEqualToString('owner.name', 'firstOwner'); |
168 inputElement = document.getElementById('inputElement'); | 151 inputElement = document.getElementById('inputElement'); |
169 labelElement = document.getElementById('labelElement'); | |
170 container.removeChild(owner); | 152 container.removeChild(owner); |
171 owner = document.getElementById('owner'); | 153 owner = document.getElementById('owner'); |
172 shouldBeEqualToString('owner.name', 'secondOwner'); | 154 shouldBeEqualToString('owner.name', 'secondOwner'); |
173 shouldBe('inputElement.form', 'owner'); | 155 shouldBe('inputElement.form', 'owner'); |
174 shouldBe('labelElement.form', 'owner'); | |
175 container.removeChild(owner); | 156 container.removeChild(owner); |
176 shouldBe('inputElement.form', 'null'); | 157 shouldBe('inputElement.form', 'null'); |
177 shouldBe('labelElement.form', 'null'); | |
178 container.appendChild(owner); | 158 container.appendChild(owner); |
179 shouldBe('inputElement.form', 'owner'); | 159 shouldBe('inputElement.form', 'owner'); |
180 shouldBe('labelElement.form', 'owner'); | |
181 | 160 |
182 debug(''); | 161 debug(''); |
183 debug('- Check if a form and a control are disassociated when they are removed f
rom the document together.'); | 162 debug('- Check if a form and a control are disassociated when they are removed f
rom the document together.'); |
184 container.innerHTML = '<div><input form=owner><form id=owner></form></div>'; | 163 container.innerHTML = '<div><input form=owner><form id=owner></form></div>'; |
185 owner = document.getElementById('owner'); | 164 owner = document.getElementById('owner'); |
186 shouldBe('owner.elements.length', '1'); | 165 shouldBe('owner.elements.length', '1'); |
187 container.firstChild.remove(); | 166 container.firstChild.remove(); |
188 shouldBe('owner.elements.length', '0'); | 167 shouldBe('owner.elements.length', '0'); |
189 | 168 |
190 debug(''); | 169 debug(''); |
(...skipping 15 matching lines...) Expand all Loading... |
206 form1 = document.querySelectorAll('form')[0]; | 185 form1 = document.querySelectorAll('form')[0]; |
207 form2 = document.querySelectorAll('form')[1]; | 186 form2 = document.querySelectorAll('form')[1]; |
208 var control = document.querySelector('select'); | 187 var control = document.querySelector('select'); |
209 shouldBe('control.form', 'form1'); | 188 shouldBe('control.form', 'form1'); |
210 shouldBe('form1.setAttribute("id", "b"); control.form', 'form2'); | 189 shouldBe('form1.setAttribute("id", "b"); control.form', 'form2'); |
211 | 190 |
212 container.remove(); | 191 container.remove(); |
213 </script> | 192 </script> |
214 </body> | 193 </body> |
215 </html> | 194 </html> |
OLD | NEW |