| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div> |
| <form id="f1"></form> |
| <form id="f2"> |
| <input id="i1" /> |
| <input id="i2" form="f1" /> |
| <input id="i3" /> |
| </form> |
| <script> |
| test(function() { |
| var i1 = document.getElementById("i1"); |
| var i2 = document.getElementById("i2"); |
| var i3 = document.getElementById("i3"); |
| var f1 = document.getElementById("f1"); |
| var f2 = document.getElementById("f2"); |
| |
| assert_equals(i1.form, f2, |
| "i1 must be associated with f2 by the parser"); |
| assert_equals(i2.form, f1, |
| "i2 is not associated with f2 by the parser " + |
| "since it has the form attribute set to f1"); |
| |
| f1.appendChild(i1); |
| i3.setAttribute("form", "f1"); |
| |
| assert_equals(i1.form, f1, |
| "i1's form owner must be reset when parent changes"); |
| assert_equals(i3.form, f1, |
| "i3's form owner must be reset when the form" + |
| "attribute is set"); |
| |
| assert_equals(i2.form, f1); |
| }, "Tests for parser inserted controls"); |
| </script> |
| </div> |
| |
| <div id="placeholder"> |
| </div> |
| |
| <script> |
| var reassociateableElements = [ |
| "button", |
| "fieldset", |
| "input", |
| "object", |
| "output", |
| "select", |
| "textarea", |
| ]; |
| |
| var form1 = null; |
| var form2 = null; |
| var placeholder = document.getElementById("placeholder"); |
| |
| reassociateableElements.forEach(function(localName) { |
| function testControl(test_, desc) { |
| test(function() { |
| var control = document.createElement(localName); |
| |
| while(placeholder.firstChild) |
| placeholder.removeChild(placeholder.firstChild); |
| |
| form1 = document.createElement("form"); |
| form2 = document.createElement("form"); |
| form1.id = "form1"; |
| form2.id = "form2"; |
| placeholder.appendChild(form1); |
| placeholder.appendChild(form2); |
| |
| test_.call(control); |
| }, "[" + localName.toUpperCase() + "] " + desc); |
| } |
| |
| testControl(function() { |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| }, "Basic form association - control with no form attribute is associated with ancestor"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| form1.id = "form-one"; |
| assert_equals(this.form, null); |
| }, "Form owner is reset to null when control's form attribute is set to an ID " + |
| "that does not exist in the document"); |
| |
| testControl(function() { |
| this.setAttribute("form", ""); |
| form1.appendChild(this); |
| assert_equals(this.form, null); |
| }, "Control whose form attribute is an empty string has no form owner"); |
| |
| testControl(function() { |
| form1.id = ""; |
| this.setAttribute("form", ""); |
| form1.appendChild(this); |
| assert_equals(this.form, null); |
| }, "Control whose form attribute is an empty string has no form owner " + |
| "even when form with empty attribute is present"); |
| |
| testControl(function() { |
| form1.id = "FORM1"; |
| this.setAttribute("form", "form1"); |
| form1.appendChild(this); |
| assert_equals(this.form, null); |
| }, "Control's form attribute must be a case sensitive match for the form's id"); |
| |
| testControl(function() { |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| this.setAttribute("form", "form2"); |
| assert_equals(this.form, form2); |
| }, "Setting the form attribute of a control to the id of a non-ancestor form works"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| |
| form2.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| this.removeAttribute("form"); |
| assert_equals(this.form, form2); |
| }, "Removing form id from a control resets the form owner to ancestor"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| |
| form2.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| placeholder.removeChild(form1); |
| |
| assert_equals(this.form, null); |
| }, "Removing the form owner of a control with form attribute resets " + |
| "the form owner to null"); |
| |
| testControl(function() { |
| var form3 = document.createElement("form"); |
| form3.id = "form3"; |
| placeholder.appendChild(form3); |
| form3.appendChild(this); |
| assert_equals(this.form, form3); |
| |
| this.setAttribute("form", "form2"); |
| assert_equals(this.form, form2); |
| |
| this.setAttribute("form", "form1"); |
| assert_equals(this.form, form1); |
| }, "Changing form attibute of control resets form owner to correct form"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| var form3 = document.createElement("form"); |
| form3.id = "form3"; |
| |
| placeholder.appendChild(form3); |
| placeholder.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| form2.appendChild(this); |
| assert_equals(this.form, form1); |
| }, "Moving a control with form attribute within the document " + |
| "does not change the form owner"); |
| |
| testControl(function() { |
| form1.id = "form-one"; |
| this.setAttribute("form", "form1"); |
| form2.appendChild(this); |
| assert_equals(this.form, null); |
| |
| form1.id = "form1"; |
| assert_equals(this.form, form1); |
| }, "When the id of a non-ancestor form changes from not being a match for the " + |
| "form attribute to being a match, the control's form owner is reset"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| form2.id = "form1"; |
| form1.parentNode.insertBefore(form2, form1); |
| assert_equals(this.form, form2); |
| |
| form2.parentNode.removeChild(form2); |
| assert_equals(this.form, form1); |
| |
| form1.parentNode.appendChild(form2); |
| assert_equals(this.form, form1); |
| }, "When form element with same ID as the control's form attribute is inserted " + |
| "earlier in tree order, the form owner is changed to the inserted form"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| form2.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| var span = document.createElement("span"); |
| span.id = "form1"; |
| form1.parentNode.insertBefore(span, form1); |
| assert_equals(this.form, null); |
| |
| form1.parentNode.appendChild(span); |
| assert_equals(this.form, form1); |
| }, "When non-form element with same ID as the control's form attribute is " + |
| "inserted earlier in tree order, the control does not have a form owner"); |
| |
| testControl(function() { |
| this.setAttribute("form", "form1"); |
| form1.appendChild(this); |
| assert_equals(this.form, form1); |
| |
| form1.parentNode.removeChild(form1); |
| assert_equals(this.form, form1); |
| }, "A control that is not in the document but has the form attribute set " + |
| "is associated with the nearest ancestor form if one exists"); |
| |
| }); |
| </script> |
| </body> |
| </html> |
