test_form_attribute-1.html (14142B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=588683 5 --> 6 <head> 7 <title>Test for form attributes 1</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=588683">Mozilla Bug 588683</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 </div> 16 <pre id="test"> 17 <script type="application/javascript"> 18 19 /** Test for form attributes 1 */ 20 21 /** 22 * All functions take an array of forms in first argument and an array of 23 * elements in second argument. 24 * Then, it returns an array containing an array of form and an array of array 25 * of elements. The array represent the form association with elements like this: 26 * [ [ form1, form2 ], [ [ elmt1ofForm1, elmt2ofForm2 ], [ elmtofForm2 ] ] ] 27 */ 28 29 /** 30 * test0a and test0b are testing the regular behavior of form ownership. 31 */ 32 function test0a(aForms, aElements) 33 { 34 // <form><element></form> 35 // <form><element></form> 36 aForms[0].appendChild(aElements[0]); 37 aForms[1].appendChild(aElements[1]); 38 39 return [[aForms[0],aForms[1]],[[aElements[0]],[aElements[1]]]]; 40 } 41 42 function test0b(aForms, aElements) 43 { 44 // <form><element><form><element></form></form> 45 aForms[0].appendChild(aElements[0]); 46 aForms[0].appendChild(aForms[1]); 47 aForms[1].appendChild(aElements[1]); 48 49 return [[aForms[0],aForms[1]],[[aElements[0]],[aElements[1]]]]; 50 } 51 52 /** 53 * This function test that, when an element is not a descendant of a form 54 * element and has @form set to a valid form id, it's form owner is the form 55 * which has the id. 56 */ 57 function test1(aForms, aElements) 58 { 59 // <form id='f'></form><element id='f'> 60 aForms[0].id = 'f'; 61 aElements[0].setAttribute('form', 'f'); 62 63 return [[aForms[0]], [[aElements[0]]]]; 64 } 65 66 /** 67 * This function test that, when an element is a descendant of a form 68 * element and has @form set to a valid form id (not it's descendant), it's form 69 * owner is the form which has the id. 70 */ 71 function test2(aForms, aElements) 72 { 73 // <form id='f'></form><form><element form='f'></form> 74 aForms[0].id = 'f'; 75 aForms[1].appendChild(aElements[0]); 76 aElements[0].setAttribute('form', 'f'); 77 78 return [[aForms[0], aForms[1]], [[aElements[0]],[]]]; 79 } 80 81 /** 82 * This function test that, when an element is a descendant of a form 83 * element and has @form set to a valid form id (not it's descendant), then the 84 * form attribute is removed, it does not have a form owner. 85 */ 86 function test3(aForms, aElements) 87 { 88 // <form id='f'></form><form><element form='f'></form> 89 aForms[0].id = 'f'; 90 aForms[1].appendChild(aElements[0]); 91 aElements[0].setAttribute('form', 'f'); 92 aElements[0].removeAttribute('form'); 93 94 return [[aForms[0], aForms[1]], [[],[aElements[0]]]]; 95 } 96 97 /** 98 * This function test that, when an element is a descendant of a form 99 * element and has @form set to a valid form id (not it's descendant), then the 100 * form's id attribute is removed, it does not have a form owner. 101 */ 102 function test4(aForms, aElements) 103 { 104 // <form id='f'></form><form><element form='f'></form> 105 aForms[0].id = 'f'; 106 aForms[1].appendChild(aElements[0]); 107 aElements[0].setAttribute('form', 'f'); 108 aForms[0].removeAttribute('id'); 109 110 return [[aForms[0], aForms[1]], [[],[]]]; 111 } 112 113 /** 114 * This function test that, when an element is a descendant of a form 115 * element and has @form set to an invalid form id, then it does not have a form 116 * owner. 117 */ 118 function test5(aForms, aElements) 119 { 120 // <form id='f'></form><form><element form='foo'></form> 121 aForms[0].id = 'f'; 122 aForms[1].appendChild(aElements[0]); 123 aElements[0].setAttribute('form', 'foo'); 124 125 return [[aForms[0], aForms[1]], [[],[]]]; 126 } 127 128 /** 129 * This function test that, when an element is a descendant of a form 130 * element and has @form set to a valid form id (not it's descendant), then the 131 * form id attribute is changed to an invalid id, it does not have a form owner. 132 */ 133 function test6(aForms, aElements) 134 { 135 // <form id='f'></form><form><element form='f'></form> 136 aForms[0].id = 'f'; 137 aForms[1].appendChild(aElements[0]); 138 aElements[0].setAttribute('form', 'f'); 139 aElements[0].setAttribute('form', 'foo'); 140 141 return [[aForms[0], aForms[1]], [[],[]]]; 142 } 143 144 /** 145 * This function test that, when an element is a descendant of a form 146 * element and has @form set to an invalid form id, then the form id attribute 147 * is changed to a valid form id, it's form owner is the form which has this id. 148 */ 149 function test7(aForms, aElements) 150 { 151 // <form id='f'></form><form><element form='foo'></form> 152 aForms[0].id = 'f'; 153 aForms[1].appendChild(aElements[0]); 154 aElements[0].setAttribute('form', 'foo'); 155 aElements[0].setAttribute('form', 'f'); 156 157 return [[aForms[0], aForms[1]], [[aElements[0]],[]]]; 158 } 159 160 /** 161 * This function test that, when an element is a descendant of a form 162 * element and has @form set to a list of ids containing one valid form, then 163 * it does not have a form owner. 164 */ 165 function test8(aForms, aElements) 166 { 167 // <form id='f'></form><form><element form='f foo'></form> 168 aForms[0].id = 'f'; 169 aForms[1].appendChild(aElements[0]); 170 aElements[0].setAttribute('form', 'f foo'); 171 172 return [[aForms[0], aForms[1]], [[],[]]]; 173 } 174 175 /** 176 * This function test that, when an element is a descendant of a form 177 * element and has @form set to a form id which is valid in a case insensitive 178 * way, then it does not have a form owner. 179 */ 180 function test9(aForms, aElements) 181 { 182 // <form id='f'></form><form><element form='F'></form> 183 aForms[0].id = 'f'; 184 aForms[1].appendChild(aElements[0]); 185 aElements[0].setAttribute('form', 'F'); 186 187 return [[aForms[0], aForms[1]], [[],[]]]; 188 } 189 190 /** 191 * This function test that, when an element is a descendant of a form 192 * element and has @form set to a form id which is not a valid id, then it's 193 * form owner is it does not have a form owner. 194 */ 195 function test10(aForms, aElements) 196 { 197 // <form id='F'></form><form><element form='f'></form> 198 aForms[0].id = 'F'; 199 aForms[1].appendChild(aElements[0]); 200 aElements[0].setAttribute('form', 'f'); 201 202 return [[aForms[0], aForms[1]], [[],[]]]; 203 } 204 205 /** 206 * This function test that, when an element is a descendant of a form 207 * element and has @form set to a form id which is not a valid id, then it's 208 * form owner is it does not have a form owner. 209 */ 210 function test11(aForms, aElements) 211 { 212 // <form id='foo bar'></form><form><element form='foo bar'></form> 213 aForms[0].id = 'foo bar'; 214 aForms[1].appendChild(aElements[0]); 215 aElements[0].setAttribute('form', 'foo bar'); 216 217 return [[aForms[0], aForms[1]], [[aElements[0]],[]]]; 218 } 219 220 /** 221 * This function test that, when an element is a descendant of a form 222 * element and has @form set to a valid form id and the form id change, then 223 * it does not have a form owner. 224 */ 225 function test12(aForms, aElements) 226 { 227 // <form id='f'></form><form><element form='f'></form> 228 aForms[0].id = 'f'; 229 aForms[1].appendChild(aElements[0]); 230 aElements[0].setAttribute('form', 'f'); 231 aForms[0].id = 'foo'; 232 233 return [[aForms[0], aForms[1]], [[],[]]]; 234 } 235 236 /** 237 * This function test that, when an element is a descendant of a form 238 * element and has @form set to an invalid form id and the form id change to a 239 * valid one, then it's form owner is the form which has the id. 240 */ 241 function test13(aForms, aElements) 242 { 243 // <form id='foo'></form><form><element form='f'></form> 244 aForms[0].id = 'foo'; 245 aForms[1].appendChild(aElements[0]); 246 aElements[0].setAttribute('form', 'f'); 247 aForms[0].id = 'f'; 248 249 return [[aForms[0], aForms[1]], [[aElements[0]],[]]]; 250 } 251 252 /** 253 * This function test that, when an element is a descendant of a form 254 * element and has @form set to a valid form id and a form with the same id is 255 * inserted before in the tree, then it's form owner is the form which has the 256 * id. 257 */ 258 function test14(aForms, aElements) 259 { 260 // <form id='f'></form><form><element form='f'></form> 261 aForms[0].id = 'f'; 262 aForms[1].appendChild(aElements[0]); 263 aElements[0].setAttribute('form', 'f'); 264 aForms[2].id = 'f'; 265 266 document.getElementById('content').insertBefore(aForms[2], aForms[0]); 267 268 return [[aForms[0], aForms[1], aForms[2]], [[],[],[aElements[0]]]]; 269 } 270 271 /** 272 * This function test that, when an element is a descendant of a form 273 * element and has @form set to a valid form id and an element with the same id is 274 * inserted before in the tree, then it does not have a form owner. 275 */ 276 function test15(aForms, aElements) 277 { 278 // <form id='f'></form><form><element form='f'></form> 279 aForms[0].id = 'f'; 280 aForms[1].appendChild(aElements[0]); 281 aElements[0].setAttribute('form', 'f'); 282 aElements[1].id = 'f'; 283 284 document.getElementById('content').insertBefore(aElements[1], aForms[0]); 285 286 return [[aForms[0], aForms[1]], [[],[]]]; 287 } 288 289 /** 290 * This function test that, when an element is a descendant of a form 291 * element and has @form set to a valid form id and the form is removed from 292 * the tree, then it does not have a form owner. 293 */ 294 function test16(aForms, aElements) 295 { 296 // <form id='f'></form><form><element form='f'></form> 297 aForms[0].id = 'f'; 298 aForms[1].appendChild(aElements[0]); 299 aElements[0].setAttribute('form', 'f'); 300 aElements[1].id = 'f'; 301 302 document.getElementById('content').removeChild(aForms[0]); 303 304 return [[aForms[0], aForms[1]], [[],[]]]; 305 } 306 307 /** 308 * This function test that, when an element is a descendant of a form element 309 * and has @form set to the empty string, it does not have a form owner. 310 */ 311 function test17(aForms, aElements) 312 { 313 // <form><element form=''></form> 314 aForms[0].appendChild(aElements[0]); 315 aElements[0].setAttribute('form', ''); 316 317 return [[aForms[0]], [[]]]; 318 } 319 320 /** 321 * This function test that, when an element is a descendant of a form element 322 * and has @form set to the empty string, it does not have a form owner even if 323 * it's parent has its id equals to the empty string. 324 */ 325 function test18(aForms, aElements) 326 { 327 // <form id=''><element form=''></form> 328 aForms[0].id = ''; 329 aForms[0].appendChild(aElements[0]); 330 aElements[0].setAttribute('form', ''); 331 332 return [[aForms[0]], [[]]]; 333 } 334 335 /** 336 * This function test that, when an element is a descendant of a form element 337 * and has @form set to a valid form id and the element is being moving inside 338 * it's parent, it's form owner will remain the form with the id. 339 */ 340 function test19(aForms, aElements) 341 { 342 // <form id='f'></form><form><element form='f'><element></form> 343 aForms[0].id = 'f'; 344 aForms[1].appendChild(aElements[0]); 345 aForms[1].appendChild(aElements[1]); 346 aElements[0].setAttribute('form', 'f'); 347 aForms[1].appendChild(aElements[0]); 348 349 return [[aForms[0],aForms[1]],[[aElements[0]],[aElements[1]]]]; 350 } 351 352 /** 353 * This function test that, when an element is a descendant of a form element 354 * and has @form set to a valid form id and the element is being moving inside 355 * another form, it's form owner will remain the form with the id. 356 */ 357 function test20(aForms, aElements) 358 { 359 // <form id='f'></form><form><element form='f'><element></form> 360 aForms[0].id = 'f'; 361 aForms[1].appendChild(aElements[0]); 362 aForms[1].appendChild(aElements[1]); 363 aElements[0].setAttribute('form', 'f'); 364 aForms[2].appendChild(aElements[0]); 365 366 return [[aForms[0],aForms[1],aForms[2]],[[aElements[0]],[aElements[1]],[]]]; 367 } 368 369 /** 370 * This function test that when removing a form, the elements with a @form set 371 * will be correctly removed from there form owner. 372 */ 373 function test21(aForms, aElements) 374 { 375 // <form id='f'><form><form><element form='f'></form> 376 aForms[0].id = 'f'; 377 aForms[1].appendChild(aElements[0]); 378 aElements[0].setAttribute('form', 'f'); 379 document.getElementById('content').removeChild(aForms[1]); 380 381 return [[aForms[0]],[[]]]; 382 } 383 384 var functions = [ 385 test0a, test0b, 386 test1, test2, test3, test4, test5, test6, test7, test8, test9, 387 test10, test11, test12, test13, test14, test15, test16, test17, test18, test19, 388 test20, test21, 389 ]; 390 391 // Global variable to have an easy access to <div id='content'>. 392 var content = document.getElementById('content'); 393 394 // Initializing the needed elements. 395 var forms = [ 396 document.createElement('form'), 397 document.createElement('form'), 398 document.createElement('form'), 399 ]; 400 401 var elementNames = [ 402 'button', 'fieldset', 'input', 'label', 'object', 'output', 'select', 403 'textarea' 404 ]; 405 406 var todoElements = [ 407 ['keygen', 'Keygen'], 408 ]; 409 410 for (var e of todoElements) { 411 var node = document.createElement(e[0]); 412 var nodeString = HTMLElement.prototype.toString.apply(node); 413 nodeString = nodeString.replace(/Element[\] ].*/, "Element"); 414 todo_is(nodeString, "[object HTML" + e[1] + "Element", 415 e[0] + " should not be implemented"); 416 } 417 418 for (var name of elementNames) { 419 var elements = [ 420 document.createElement(name), 421 document.createElement(name), 422 ]; 423 424 for (var func of functions) { 425 // Clean-up. 426 while (content.firstChild) { 427 content.firstChild.remove(); 428 } 429 for (form of forms) { 430 content.appendChild(form); 431 form.removeAttribute('id'); 432 } 433 for (e of elements) { 434 content.appendChild(e); 435 e.removeAttribute('form'); 436 is(e.form, null, "The element should not have a form owner"); 437 } 438 439 // Calling the test. 440 var results = func(forms, elements); 441 442 // Checking the results. 443 var formsList = results[0]; 444 for (var i=0; i<formsList.length; ++i) { 445 var elementsList = results[1][i]; 446 if (name != 'label' && name != 'meter' && name != 'progress') { 447 is(formsList[i].elements.length, elementsList.length, 448 "The form should contain " + elementsList.length + " elements"); 449 } 450 for (var j=0; j<elementsList.length; ++j) { 451 if (name != 'label' && name != 'meter' && name != 'progress') { 452 is(formsList[i].elements[j], elementsList[j], 453 "The form should contain " + elementsList[j]); 454 } 455 if (name != 'label') { 456 is(elementsList[j].form, formsList[i], 457 "The form owner should be the form associated to the list"); 458 } 459 } 460 } 461 } 462 463 // Cleaning-up. 464 for (e of elements) { 465 e.remove(); 466 e = null; 467 } 468 } 469 470 </script> 471 </pre> 472 </body> 473 </html>