Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/forms/form-attribute.html

Issue 2000423006: Drop LABEL element from form-associated elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698