| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| function runTest() |
| { |
| description("This tests accessing form elements by name. " |
| + "IE only lets you look up names under the first name the element had and " |
| + "does not respond to name changes. Firefox remembers every name item has been " |
| + "accessed with, but forgets items that have not been accessed. " |
| + "This test has been written to expect the Firefox behavior."); |
| |
| form = document.getElementById('form'); |
| a = document.getElementById('a'); |
| b = document.getElementById('b'); |
| |
| shouldBe('form.length', '2'); |
| shouldBe('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'undefined'); |
| shouldBe('form.third', 'undefined'); |
| shouldBe('form.elements.original', 'a'); |
| shouldBe('form.elements.originalB', 'b'); |
| shouldBe('form.elements.second', 'undefined'); |
| shouldBe('form.elements.third', 'undefined'); |
| |
| debug(''); |
| debug("change the form item a's name to thisWillBeRemembered"); |
| debug(''); |
| a.name="thisWillBeRemembered"; |
| debug("get the variable value through form element"); |
| shouldBe('form.thisWillBeRemembered', 'a'); |
| debug(''); |
| debug("now change the form item a's name to thisWillBeRememberedToo"); |
| debug("access it in boolean context"); |
| a.name="thisWillBeRememberedToo"; |
| debug(''); |
| if (form.thisWillBeRememberedToo) |
| debug('accessed form.thisWillBeRememberedToo'); |
| debug(''); |
| debug("now change the form item a's name to thisWillBeForgotten"); |
| debug(''); |
| a.name="thisWillBeForgotten"; |
| debug("get the variable value through collection"); |
| shouldBe('form.elements.thisWillBeForgotten', 'a'); |
| debug(''); |
| debug("now change the form item a's name to thisWillBeForgottenToo, but don't access it afterwards"); |
| a.name="thisWillBeForgottenToo"; |
| |
| debug(''); |
| debug("now change the form item a's name to second"); |
| debug(''); |
| a.name="second"; |
| |
| shouldBe('form.length', '2'); |
| shouldBe('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'a'); |
| shouldBe('form.third', 'undefined'); |
| shouldBe('form.elements.original', 'undefined'); |
| shouldBe('form.elements.originalB', 'b'); |
| shouldBe('form.elements.second', 'a'); |
| shouldBe('form.elements.third', 'undefined'); |
| |
| debug(''); |
| debug("now change the form item a's name to third"); |
| debug(''); |
| |
| a.name="third"; |
| |
| shouldBe('form.length', '2'); |
| shouldBe('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'a'); |
| shouldBe('form.third', 'a'); |
| shouldBe('form.elements.original', 'undefined'); |
| shouldBe('form.elements.originalB', 'b'); |
| shouldBe('form.elements.second', 'undefined'); |
| shouldBe('form.elements.third', 'a'); |
| |
| debug(''); |
| debug("now change form item b's name to second"); |
| debug(''); |
| |
| b.name="second"; |
| |
| shouldBe('form.length', '2'); |
| shouldBe('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'b'); |
| shouldBe('form.elements.original', 'undefined'); |
| shouldBe('form.elements.originalB', 'undefined'); |
| shouldBe('form.elements.second', 'b'); |
| |
| debug(''); |
| debug("now change a form item b's name to third"); |
| debug(''); |
| |
| form.originalB.name="third"; |
| |
| shouldBe('form.length', '2'); |
| shouldBe('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'b'); |
| shouldBe('form.third.length', '2'); |
| shouldBe('form.third[0]', 'a'); |
| shouldBe('form.third[1]', 'b'); |
| shouldBe('form.elements.original', 'undefined'); |
| shouldBe('form.elements.originalB', 'undefined'); |
| shouldBe('form.elements.second', 'undefined'); |
| shouldBe('form.elements.third.length', '2'); |
| shouldBe('form.elements.third[0]', 'a'); |
| shouldBe('form.elements.third[1]', 'b'); |
| |
| debug(''); |
| debug("now change a form item b's name to fourth"); |
| debug(''); |
| |
| form.originalB.name="fourth"; |
| |
| shouldBe('form.third', 'a'); |
| shouldBe('form.third.length', 'undefined'); |
| shouldBe('form.elements.third', 'a'); |
| shouldBe('form.elements.third.length', 'undefined'); |
| |
| debug(''); |
| debug("now remove element a"); |
| debug(''); |
| |
| form.removeChild(a); |
| |
| shouldBe('form.length', '1'); |
| shouldBeUndefined('form.original', 'a'); |
| shouldBe('form.originalB', 'b'); |
| shouldBe('form.second', 'b'); |
| shouldBeUndefined('form.third', 'a'); |
| shouldBe('form.fourth', 'b'); |
| shouldBe('form.elements.original', 'undefined'); |
| shouldBe('form.elements.originalB', 'undefined'); |
| shouldBe('form.elements.second', 'undefined'); |
| shouldBe('form.elements.third', 'undefined'); |
| shouldBe('form.elements.fourth', 'b'); |
| |
| debug(''); |
| debug("check that we no longer remember the past names of a"); |
| debug(''); |
| |
| shouldBe('form.thisWillBeForgotten', 'undefined'); |
| shouldBe('form.thisWillBeForgottenToo', 'undefined'); |
| shouldBeUndefined('form.thisWillBeRemembered'); |
| shouldBeUndefined('form.thisWillBeRememberedToo'); |
| debug(''); |
| } |
| </script> |
| </head> |
| <body> |
| <form id='form'> |
| <input type='hidden' id='a' name='original'> |
| <input type='hidden' id='b' name='originalB'> |
| </form> |
| |
| <form id="form1"><input name="foo" id="input3"></form> |
| <form id="form2"></form> |
| |
| <form id="form4"><input name="foo"><input name="bar"><input name="bar"></form> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| runTest(); |
| |
| debug('Ensures elements are removed from the past names map of a form element once they are no longer associated with the form element.'); |
| var form1 = document.querySelector("#form1"); |
| var input3 = document.querySelector("#input3"); |
| shouldBe("form1['foo']", "input3"); |
| shouldBeUndefined("form2.appendChild(form1.firstChild); form1['foo']"); |
| |
| shouldBe("form2['foo']", "input3"); |
| shouldBeUndefined("form2.removeChild(input3); form2['foo']"); |
| |
| shouldBe("form1.appendChild(input3); form1['foo']", "input3"); |
| // input3 will be an orphan. So form content attribute doesn't work. |
| shouldBeUndefined("input3.setAttribute('form', 'form1'); form1.removeChild(input3); input3.appendChild(form1); form1['foo']"); |
| shouldNotBe("form1['foo']", "input3"); |
| |
| debug(""); |
| debug("Don't add the element from the past names map if we've found elements of the given name."); |
| var form4 = document.querySelector("#form4"); |
| shouldBe("form4['foo']", "form4.childNodes[0]"); |
| shouldBe("form4['bar'][0]", "form4.childNodes[1]"); |
| shouldBe("form4['bar'][1]", "form4.childNodes[2]"); |
| shouldBe("form4.childNodes[0].name = 'bar'; form4.childNodes[1].name = form4.childNodes[2].name = 'foo'; form4['foo'].length", "2"); |
| </script> |
| </body> |
| </html> |