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