third_party/WebKit/LayoutTests/fast/forms/form-attribute.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description("This test checks the form attribute of the form-associated elements.");
  11
  12 var container = document.createElement('div');
  13 document.body.appendChild(container);
  14
  15 debug('- Checks the existence of the form attribute for each form-associated elements.');
  16 container.innerHTML = '<form id=owner></form>' +
  17     '<button name=victim form=owner />' +
  18     '<fieldset name=victim form=owner />' +
  19     '<input name=victim form=owner />' +
  20     '<keygen name=victim form=owner />' +
  21     '<label name=victim form=owner />' +
  22     '<object name=victim form=owner></object>' +
  23     '<output name=victim form=owner />' +
  24     '<select name=victim form=owner />' +
  25     '<textarea name=victim form=owner />';
  26
  27 var owner = document.getElementById('owner');
  28 shouldBe('document.getElementsByTagName("button")[0].form', 'owner');
  29 shouldBe('document.getElementsByTagName("fieldset")[0].form', 'owner');
  30 shouldBe('document.getElementsByTagName("input")[0].form', 'owner');
  31 shouldBe('document.getElementsByTagName("keygen")[0].form', 'owner');
  32 shouldBe('document.getElementsByTagName("label")[0].form', 'owner');
  33 shouldBe('document.getElementsByTagName("object")[0].form', 'owner');
  34 shouldBe('document.getElementsByTagName("output")[0].form', 'owner');
  35 shouldBe('document.getElementsByTagName("select")[0].form', 'owner');
  36 shouldBe('document.getElementsByTagName("textarea")[0].form', 'owner');
  37
  38 debug('');
  39 debug('- Ensures that the form attribute points the form owner even if the element is within another form element.');
  40 container.innerHTML = '<form id=owner></form>' +
  41     '<form id=shouldNotBeOwner>' +
  42     '    <input id=inputElement name=victim form=owner />' +
  43     '    <label id=labelElement name=victim form=owner />' +
  44     '</form>';
  45 owner = document.getElementById('owner');
  46 var inputElement = document.getElementById('inputElement');
  47 var labelElement = document.getElementById('labelElement');
  48 shouldBe('inputElement.form', 'owner');
  49 shouldBe('labelElement.form', 'owner');
  50
  51
  52 debug('');
  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>' +
  55     '    <input id=inputElement1 name=victim />' +
  56     '    <input id=inputElement2 name=victim form=owner />' +
  57     '    <input id=inputElement3 name=victim />' +
  58     '    <label id=labelElement1 name=victim />' +
  59     '    <label id=labelElement2 name=victim form=owner />' +
  60     '    <label id=labelElement3 name=victim />' +
  61     '</form>';
  62 owner = document.getElementById('owner');
  63 var inputElement1 = document.getElementById('inputElement1');
  64 var inputElement2 = document.getElementById('inputElement2');
  65 var inputElement3 = document.getElementById('inputElement3');
  66 var labelElement1 = document.getElementById('labelElement1');
  67 var labelElement2 = document.getElementById('labelElement2');
  68 var labelElement3 = document.getElementById('labelElement3');
  69 shouldBe('inputElement1.form', 'owner');
  70 shouldBe('inputElement2.form', 'owner');
  71 shouldBe('inputElement3.form', 'owner');
  72 shouldBe('labelElement1.form', 'owner');
  73 shouldBe('labelElement2.form', 'owner');
  74 shouldBe('labelElement3.form', 'owner');
  75
  76 debug('');
  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 each form-associated elements associate with the outmost form element.');
  79 container.innerHTML = '<form id=owner>' +
  80     '    <form>' +
  81     '        <input id=inputElement1 name=victim form=owner />' +
  82     '        <input id=inputElement2 name=victim />' +
  83     '        <input id=inputElement3 name=victim form=owner />' +
  84     '        <label id=labelElement1 name=victim form=owner />' +
  85     '        <label id=labelElement2 name=victim />' +
  86     '        <label id=labelElement3 name=victim form=owner />' +
  87     '    </form>' +
  88     '</form>';
  89 owner = document.getElementById('owner');
  90 inputElement1 = document.getElementById('inputElement1');
  91 inputElement2 = document.getElementById('inputElement2');
  92 inputElement3 = document.getElementById('inputElement3');
  93 labelElement1 = document.getElementById('labelElement1');
  94 labelElement2 = document.getElementById('labelElement2');
  95 labelElement3 = document.getElementById('labelElement3');
  96 shouldBe('inputElement1.form', 'owner');
  97 shouldBe('inputElement2.form', 'owner');
  98 shouldBe('inputElement3.form', 'owner');
  99 shouldBe('labelElement1.form', 'owner');
 100 shouldBe('labelElement2.form', 'owner');
 101 shouldBe('labelElement3.form', 'owner');
 102
 103 debug('');
 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>' +
 106     '<form id=form2></form>' +
 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>';
 110 var form1 = document.getElementById('form1');
 111 var form2 = document.getElementById('form2');
 112 inputElement = document.getElementById('inputElement');
 113 shouldBe('inputElement.form', 'form1');
 114 inputElement.attributes['form'].value = 'form2';
 115 shouldBe('inputElement.form', 'form2');
 116
 117 // HTMLabelElement has its own implementation of formAttr processing and so needs 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 needs its own test.
 124 objectElement = document.getElementById('objectElement');
 125 shouldBe('objectElement.form', 'form1');
 126 objectElement.attributes['form'].value = 'form2';
 127 shouldBe('objectElement.form', 'form2');
 128
 129 debug('');
 130 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>' +
 132     '<input id=inputElement name=victim />' +
 133     '<label id=labelElement name=victim />' +
 134     '<object id=objectElement name=victim></object>';
 135 owner = document.getElementById('owner');
 136 inputElement = document.getElementById('inputElement');
 137 shouldBe('inputElement.form', 'null');
 138 var formAttribute = document.createAttribute('form');
 139 inputElement.setAttribute('form', 'owner');
 140 shouldBe('inputElement.form', 'owner');
 141 inputElement.removeAttribute('form');
 142 shouldBe('inputElement.form', 'null');
 143
 144 // HTMLLabelElement has its own implementation of formAttr processing and so needs 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 needs its own test.
 153 objectElement = document.getElementById('objectElement');
 154 shouldBe('objectElement.form', 'null');
 155 objectElement.setAttribute('form', 'owner');
 156 shouldBe('objectElement.form', 'owner');
 157 objectElement.removeAttribute('form');
 158 shouldBe('objectElement.form', 'null');
 159
 160 debug('');
 161 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>' +
 163     '<form id=owner name=secondOwner></form>' +
 164     '<input id=inputElement name=victim form=owner />' +
 165     '<label id=labelElement name=victim form=owner />';
 166 owner = document.getElementById('owner');
 167 shouldBeEqualToString('owner.name', 'firstOwner');
 168 inputElement = document.getElementById('inputElement');
 169 labelElement = document.getElementById('labelElement');
 170 container.removeChild(owner);
 171 owner = document.getElementById('owner');
 172 shouldBeEqualToString('owner.name', 'secondOwner');
 173 shouldBe('inputElement.form', 'owner');
 174 shouldBe('labelElement.form', 'owner');
 175 container.removeChild(owner);
 176 shouldBe('inputElement.form', 'null');
 177 shouldBe('labelElement.form', 'null');
 178 container.appendChild(owner);
 179 shouldBe('inputElement.form', 'owner');
 180 shouldBe('labelElement.form', 'owner');
 181
 182 debug('');
 183 debug('- Check if a form and a control are disassociated when they are removed from the document together.');
 184 container.innerHTML = '<div><input form=owner><form id=owner></form></div>';
 185 owner = document.getElementById('owner');
 186 shouldBe('owner.elements.length', '1');
 187 container.firstChild.remove();
 188 shouldBe('owner.elements.length', '0');
 189
 190 debug('');
 191 debug('- Checks if option.form is only set if it has a &lt;select&gt; parent.');
 192 container.innerHTML = '<form id=firstOwner><option id=firstOption></option></form>' +
 193     '<form id=secondOwner><optgroup><option id=secondOption></option></optgroup></form>' +
 194     '<form id=thirdOwner><select><optgroup><option id=thirdOption></option></optgroup></select></form>';
 195 var option1 = document.getElementById('firstOption');
 196 shouldBe('option1.form', 'null');
 197 var option2 = document.getElementById('secondOption');
 198 shouldBe('option2.form', 'null');
 199 owner = document.getElementById('thirdOwner');
 200 var option3 = document.getElementById('thirdOption');
 201 shouldBe('option3.form', 'owner');
 202
 203 debug('');
 204 debug('- Checks if updating form[id] correctly works');
 205 container.innerHTML = '<form id="a"></form><form id="a"><select form="a"></select></form>';
 206 form1 = document.querySelectorAll('form')[0];
 207 form2 = document.querySelectorAll('form')[1];
 208 var control = document.querySelector('select');
 209 shouldBe('control.form', 'form1');
 210 shouldBe('form1.setAttribute("id", "b"); control.form', 'form2');
 211
 212 container.remove();
 213 </script>
 214 </body>
 215 </html>