| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description("This test examines the order of the elements attribute of a form element with form-associated elements with form attribute or witout form attibute."); |
| |
| var container = document.createElement('div'); |
| document.body.appendChild(container); |
| |
| debug(''); |
| debug('- Test for the case where some elements have form attribute but some others not.'); |
| container.innerHTML = '<form id=owner>' + |
| ' <input id=input1 name=victim />' + |
| ' <input id=input2 name=victim form=owner />' + |
| ' <input id=input3 name=victim />' + |
| '</form>'; |
| var owner = document.getElementById('owner'); |
| var input1 = document.getElementById('input1'); |
| var input2 = document.getElementById('input2'); |
| var input3 = document.getElementById('input3'); |
| shouldBe('owner.elements.length', '3'); |
| shouldBe('owner.elements[0]', 'input1'); |
| shouldBe('owner.elements[1]', 'input2'); |
| shouldBe('owner.elements[2]', 'input3'); |
| |
| container.innerHTML = '<form id=owner>' + |
| ' <input id=input1 name=victim form=owner />' + |
| ' <input id=input2 name=victim />' + |
| ' <input id=input3 name=victim form=owner />' + |
| '</form>'; |
| owner = document.getElementById('owner'); |
| input1 = document.getElementById('input1'); |
| input2 = document.getElementById('input2'); |
| input3 = document.getElementById('input3'); |
| shouldBe('owner.elements.length', '3'); |
| shouldBe('owner.elements[0]', 'input1'); |
| shouldBe('owner.elements[1]', 'input2'); |
| shouldBe('owner.elements[2]', 'input3'); |
| |
| debug(''); |
| debug('- Test for inserting/removing a form-associated element without form attribute.'); |
| container.innerHTML = '<input name=victim id=before form=owner />' + |
| '<form id=owner action= method=GET>' + |
| ' <input name=victim id=inner />' + |
| '</form>' + |
| '<input name=victim id=after form=owner />'; |
| owner = document.getElementById('owner'); |
| var before = document.getElementById('before'); |
| var inner = document.getElementById('inner'); |
| var after = document.getElementById('after'); |
| |
| var inner2 = document.createElement('input'); |
| inner2.name = 'victim'; |
| inner2.id = 'inner2'; |
| owner.appendChild(inner2); |
| shouldBe('owner.elements.length', '4'); |
| shouldBe('owner.elements[0]', 'before'); |
| shouldBe('owner.elements[1]', 'inner'); |
| shouldBe('owner.elements[2]', 'inner2'); |
| shouldBe('owner.elements[3]', 'after'); |
| |
| owner.removeChild(inner); |
| owner.insertBefore(inner, inner2); |
| shouldBe('owner.elements.length', '4'); |
| shouldBe('owner.elements[0]', 'before'); |
| shouldBe('owner.elements[1]', 'inner'); |
| shouldBe('owner.elements[2]', 'inner2'); |
| shouldBe('owner.elements[3]', 'after'); |
| |
| debug(''); |
| debug('- Test for inserting/removing a form-associated element with form attribute.'); |
| var before2 = document.createElement('input'); |
| before2.name = 'victim'; |
| before2.id = 'before2'; |
| before2.setAttribute('form', 'owner'); |
| container.insertBefore(before2, owner); |
| var after2 = document.createElement('input'); |
| after2.name = 'victim'; |
| after2.id = 'after2'; |
| after2.setAttribute('form', 'owner'); |
| container.appendChild(after2); |
| shouldBe('owner.elements.length', '6'); |
| shouldBe('owner.elements[0]', 'before'); |
| shouldBe('owner.elements[1]', 'before2'); |
| shouldBe('owner.elements[2]', 'inner'); |
| shouldBe('owner.elements[3]', 'inner2'); |
| shouldBe('owner.elements[4]', 'after'); |
| shouldBe('owner.elements[5]', 'after2'); |
| |
| container.removeChild(before); |
| container.removeChild(after); |
| container.insertBefore(before, before2); |
| container.insertBefore(after, after2); |
| shouldBe('owner.elements.length', '6'); |
| shouldBe('owner.elements[0]', 'before'); |
| shouldBe('owner.elements[1]', 'before2'); |
| shouldBe('owner.elements[2]', 'inner'); |
| shouldBe('owner.elements[3]', 'inner2'); |
| shouldBe('owner.elements[4]', 'after'); |
| shouldBe('owner.elements[5]', 'after2'); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
