| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
| 5 </head> | 5 </head> |
| 6 <body> | 6 <body> |
| 7 <p id="description"></p> | 7 <p id="description"></p> |
| 8 <div id="console"></div> | 8 <div id="console"></div> |
| 9 <script> | 9 <script> |
| 10 description("This test checks the form attribute of the form-associated elements
."); | 10 description("This test checks the form attribute of the form-associated elements
."); |
| 11 | 11 |
| 12 var container = document.createElement('div'); | 12 var container = document.createElement('div'); |
| 13 document.body.appendChild(container); | 13 document.body.appendChild(container); |
| 14 | 14 |
| 15 debug('- Checks the existence of the form attribute for each form-associated ele
ments.'); | 15 debug('- Checks the existence of the form attribute for each form-associated ele
ments.'); |
| 16 container.innerHTML = '<form id=owner></form>' + | 16 container.innerHTML = '<form id=owner></form>' + |
| 17 '<button name=victim form=owner />' + | 17 '<button name=victim form=owner />' + |
| 18 '<fieldset name=victim form=owner />' + | 18 '<fieldset name=victim form=owner />' + |
| 19 '<input name=victim form=owner />' + | 19 '<input name=victim form=owner />' + |
| 20 '<keygen name=victim form=owner />' + | 20 '<keygen name=victim form=owner />' + |
| 21 '<label name=victim form=owner />' + | 21 '<label name=victim form=owner></label>' + |
| 22 '<object name=victim form=owner></object>' + | 22 '<object name=victim form=owner></object>' + |
| 23 '<output name=victim form=owner />' + | 23 '<output name=victim form=owner />' + |
| 24 '<select name=victim form=owner />' + | 24 '<select name=victim form=owner />' + |
| 25 '<textarea name=victim form=owner />'; | 25 '<textarea name=victim form=owner />'; |
| 26 | 26 |
| 27 var owner = document.getElementById('owner'); | 27 var owner = document.getElementById('owner'); |
| 28 shouldBe('document.getElementsByTagName("button")[0].form', 'owner'); | 28 shouldBe('document.getElementsByTagName("button")[0].form', 'owner'); |
| 29 shouldBe('document.getElementsByTagName("fieldset")[0].form', 'owner'); | 29 shouldBe('document.getElementsByTagName("fieldset")[0].form', 'owner'); |
| 30 shouldBe('document.getElementsByTagName("input")[0].form', 'owner'); | 30 shouldBe('document.getElementsByTagName("input")[0].form', 'owner'); |
| 31 shouldBe('document.getElementsByTagName("keygen")[0].form', 'owner'); | 31 shouldBe('document.getElementsByTagName("keygen")[0].form', 'owner'); |
| 32 shouldBe('document.getElementsByTagName("label")[0].form', 'owner'); | 32 shouldBeNull('document.getElementsByTagName("label")[0].form'); |
| 33 shouldBe('document.getElementsByTagName("object")[0].form', 'owner'); | 33 shouldBe('document.getElementsByTagName("object")[0].form', 'owner'); |
| 34 shouldBe('document.getElementsByTagName("output")[0].form', 'owner'); | 34 shouldBe('document.getElementsByTagName("output")[0].form', 'owner'); |
| 35 shouldBe('document.getElementsByTagName("select")[0].form', 'owner'); | 35 shouldBe('document.getElementsByTagName("select")[0].form', 'owner'); |
| 36 shouldBe('document.getElementsByTagName("textarea")[0].form', 'owner'); | 36 shouldBe('document.getElementsByTagName("textarea")[0].form', 'owner'); |
| 37 | 37 |
| 38 debug(''); | 38 debug(''); |
| 39 debug('- Ensures that the form attribute points the form owner even if the eleme
nt is within another form element.'); | 39 debug('- Ensures that the form attribute points the form owner even if the eleme
nt is within another form element.'); |
| 40 container.innerHTML = '<form id=owner></form>' + | 40 container.innerHTML = '<form id=owner></form>' + |
| 41 '<form id=shouldNotBeOwner>' + | 41 '<form id=shouldNotBeOwner>' + |
| 42 ' <input id=inputElement name=victim form=owner />' + | 42 ' <input id=inputElement name=victim form=owner />' + |
| 43 ' <label id=labelElement name=victim form=owner />' + | 43 ' <label id=labelElement name=victim for=inputElement />' + |
| 44 '</form>'; | 44 '</form>'; |
| 45 owner = document.getElementById('owner'); | 45 owner = document.getElementById('owner'); |
| 46 var inputElement = document.getElementById('inputElement'); | 46 var inputElement = document.getElementById('inputElement'); |
| 47 var labelElement = document.getElementById('labelElement'); | 47 var labelElement = document.getElementById('labelElement'); |
| 48 shouldBe('inputElement.form', 'owner'); | 48 shouldBe('inputElement.form', 'owner'); |
| 49 shouldBe('labelElement.form', 'owner'); | 49 shouldBe('labelElement.form', 'owner'); |
| 50 | 50 |
| 51 | 51 |
| 52 debug(''); | 52 debug(''); |
| 53 debug('- Ensures that the form attribute of all form-associated element with or
witout form attribute points the form owner.'); | 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>' + | 54 container.innerHTML = '<form id=owner>' + |
| 55 ' <input id=inputElement1 name=victim />' + | 55 ' <input id=inputElement1 name=victim />' + |
| 56 ' <input id=inputElement2 name=victim form=owner />' + | 56 ' <input id=inputElement2 name=victim form=owner />' + |
| 57 ' <input id=inputElement3 name=victim />' + | 57 ' <input id=inputElement3 name=victim />' + |
| 58 ' <label id=labelElement1 name=victim />' + | 58 ' <label id=labelElement1 name=victim />' + |
| 59 ' <label id=labelElement2 name=victim form=owner />' + | 59 ' <label id=labelElement2 name=victim form=owner />' + |
| 60 ' <label id=labelElement3 name=victim />' + | 60 ' <label id=labelElement3 name=victim />' + |
| 61 '</form>'; | 61 '</form>'; |
| 62 owner = document.getElementById('owner'); | 62 owner = document.getElementById('owner'); |
| 63 var inputElement1 = document.getElementById('inputElement1'); | 63 var inputElement1 = document.getElementById('inputElement1'); |
| 64 var inputElement2 = document.getElementById('inputElement2'); | 64 var inputElement2 = document.getElementById('inputElement2'); |
| 65 var inputElement3 = document.getElementById('inputElement3'); | 65 var inputElement3 = document.getElementById('inputElement3'); |
| 66 var labelElement1 = document.getElementById('labelElement1'); | 66 var labelElement1 = document.getElementById('labelElement1'); |
| 67 var labelElement2 = document.getElementById('labelElement2'); | 67 var labelElement2 = document.getElementById('labelElement2'); |
| 68 var labelElement3 = document.getElementById('labelElement3'); | 68 var labelElement3 = document.getElementById('labelElement3'); |
| 69 shouldBe('inputElement1.form', 'owner'); | 69 shouldBe('inputElement1.form', 'owner'); |
| 70 shouldBe('inputElement2.form', 'owner'); | 70 shouldBe('inputElement2.form', 'owner'); |
| 71 shouldBe('inputElement3.form', 'owner'); | 71 shouldBe('inputElement3.form', 'owner'); |
| 72 shouldBe('labelElement1.form', 'owner'); | 72 shouldBeNull('labelElement1.form'); |
| 73 shouldBe('labelElement2.form', 'owner'); | 73 shouldBeNull('labelElement2.form'); |
| 74 shouldBe('labelElement3.form', 'owner'); | 74 shouldBeNull('labelElement3.form'); |
| 75 | 75 |
| 76 debug(''); | 76 debug(''); |
| 77 debug('- Ensures that the form attribute points the form owner even if the form
element is nested another form element.'); | 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 eac
h form-associated elements associate with the outmost form element.'); | 78 debug('NOTE: It seems that nesting form elements is not allowed so we ensure eac
h form-associated elements associate with the outmost form element.'); |
| 79 container.innerHTML = '<form id=owner>' + | 79 container.innerHTML = '<form id=owner>' + |
| 80 ' <form>' + | 80 ' <form>' + |
| 81 ' <input id=inputElement1 name=victim form=owner />' + | 81 ' <input id=inputElement1 name=victim form=owner />' + |
| 82 ' <input id=inputElement2 name=victim />' + | 82 ' <input id=inputElement2 name=victim />' + |
| 83 ' <input id=inputElement3 name=victim form=owner />' + | 83 ' <input id=inputElement3 name=victim form=owner />' + |
| 84 ' <label id=labelElement1 name=victim form=owner />' + | 84 ' <label id=labelElement1 name=victim form=owner />' + |
| 85 ' <label id=labelElement2 name=victim />' + | 85 ' <label id=labelElement2 name=victim />' + |
| 86 ' <label id=labelElement3 name=victim form=owner />' + | 86 ' <label id=labelElement3 name=victim form=owner />' + |
| 87 ' </form>' + | 87 ' </form>' + |
| 88 '</form>'; | 88 '</form>'; |
| 89 owner = document.getElementById('owner'); | 89 owner = document.getElementById('owner'); |
| 90 inputElement1 = document.getElementById('inputElement1'); | 90 inputElement1 = document.getElementById('inputElement1'); |
| 91 inputElement2 = document.getElementById('inputElement2'); | 91 inputElement2 = document.getElementById('inputElement2'); |
| 92 inputElement3 = document.getElementById('inputElement3'); | 92 inputElement3 = document.getElementById('inputElement3'); |
| 93 labelElement1 = document.getElementById('labelElement1'); | 93 labelElement1 = document.getElementById('labelElement1'); |
| 94 labelElement2 = document.getElementById('labelElement2'); | 94 labelElement2 = document.getElementById('labelElement2'); |
| 95 labelElement3 = document.getElementById('labelElement3'); | 95 labelElement3 = document.getElementById('labelElement3'); |
| 96 shouldBe('inputElement1.form', 'owner'); | 96 shouldBe('inputElement1.form', 'owner'); |
| 97 shouldBe('inputElement2.form', 'owner'); | 97 shouldBe('inputElement2.form', 'owner'); |
| 98 shouldBe('inputElement3.form', 'owner'); | 98 shouldBe('inputElement3.form', 'owner'); |
| 99 shouldBe('labelElement1.form', 'owner'); | 99 shouldBeNull('labelElement1.form'); |
| 100 shouldBe('labelElement2.form', 'owner'); | 100 shouldBeNull('labelElement2.form'); |
| 101 shouldBe('labelElement3.form', 'owner'); | 101 shouldBeNull('labelElement3.form'); |
| 102 | 102 |
| 103 debug(''); | 103 debug(''); |
| 104 debug('- Ensures whether the form owner is set correctly when the value of form
attribute of a form-associated element changed.'); | 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>' + | 105 container.innerHTML = '<form id=form1></form>' + |
| 106 '<form id=form2></form>' + | 106 '<form id=form2></form>' + |
| 107 '<input id=inputElement name=victim form=form1 />' + | 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>'; | 108 '<object id=objectElement name=victim form=form1></object>'; |
| 110 var form1 = document.getElementById('form1'); | 109 var form1 = document.getElementById('form1'); |
| 111 var form2 = document.getElementById('form2'); | 110 var form2 = document.getElementById('form2'); |
| 112 inputElement = document.getElementById('inputElement'); | 111 inputElement = document.getElementById('inputElement'); |
| 113 shouldBe('inputElement.form', 'form1'); | 112 shouldBe('inputElement.form', 'form1'); |
| 114 inputElement.attributes['form'].value = 'form2'; | 113 inputElement.attributes['form'].value = 'form2'; |
| 115 shouldBe('inputElement.form', 'form2'); | 114 shouldBe('inputElement.form', 'form2'); |
| 116 | 115 |
| 117 // HTMLabelElement has its own implementation of formAttr processing and so need
s 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 ne
eds its own test. | 116 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. |
| 124 objectElement = document.getElementById('objectElement'); | 117 objectElement = document.getElementById('objectElement'); |
| 125 shouldBe('objectElement.form', 'form1'); | 118 shouldBe('objectElement.form', 'form1'); |
| 126 objectElement.attributes['form'].value = 'form2'; | 119 objectElement.attributes['form'].value = 'form2'; |
| 127 shouldBe('objectElement.form', 'form2'); | 120 shouldBe('objectElement.form', 'form2'); |
| 128 | 121 |
| 129 debug(''); | 122 debug(''); |
| 130 debug('- Ensures whether the form owner is set correctly when the value of form
attribute is added/removed.'); | 123 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>' + | 124 container.innerHTML = '<form id=owner name=firstOwner></form>' + |
| 132 '<input id=inputElement name=victim />' + | 125 '<input id=inputElement name=victim />' + |
| 133 '<label id=labelElement name=victim />' + | |
| 134 '<object id=objectElement name=victim></object>'; | 126 '<object id=objectElement name=victim></object>'; |
| 135 owner = document.getElementById('owner'); | 127 owner = document.getElementById('owner'); |
| 136 inputElement = document.getElementById('inputElement'); | 128 inputElement = document.getElementById('inputElement'); |
| 137 shouldBe('inputElement.form', 'null'); | 129 shouldBe('inputElement.form', 'null'); |
| 138 var formAttribute = document.createAttribute('form'); | 130 var formAttribute = document.createAttribute('form'); |
| 139 inputElement.setAttribute('form', 'owner'); | 131 inputElement.setAttribute('form', 'owner'); |
| 140 shouldBe('inputElement.form', 'owner'); | 132 shouldBe('inputElement.form', 'owner'); |
| 141 inputElement.removeAttribute('form'); | 133 inputElement.removeAttribute('form'); |
| 142 shouldBe('inputElement.form', 'null'); | 134 shouldBe('inputElement.form', 'null'); |
| 143 | 135 |
| 144 // HTMLLabelElement has its own implementation of formAttr processing and so nee
ds 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 ne
eds its own test. | 136 // HTMLObjectElement has its own implementation of formAttr processing and so ne
eds its own test. |
| 153 objectElement = document.getElementById('objectElement'); | 137 objectElement = document.getElementById('objectElement'); |
| 154 shouldBe('objectElement.form', 'null'); | 138 shouldBe('objectElement.form', 'null'); |
| 155 objectElement.setAttribute('form', 'owner'); | 139 objectElement.setAttribute('form', 'owner'); |
| 156 shouldBe('objectElement.form', 'owner'); | 140 shouldBe('objectElement.form', 'owner'); |
| 157 objectElement.removeAttribute('form'); | 141 objectElement.removeAttribute('form'); |
| 158 shouldBe('objectElement.form', 'null'); | 142 shouldBe('objectElement.form', 'null'); |
| 159 | 143 |
| 160 debug(''); | 144 debug(''); |
| 161 debug('- Ensures whether the form owner is set correctly when the form owner is
added/removed.'); | 145 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>' + | 146 container.innerHTML = '<form id=owner name=firstOwner></form>' + |
| 163 '<form id=owner name=secondOwner></form>' + | 147 '<form id=owner name=secondOwner></form>' + |
| 164 '<input id=inputElement name=victim form=owner />' + | 148 '<input id=inputElement name=victim form=owner />'; |
| 165 '<label id=labelElement name=victim form=owner />'; | |
| 166 owner = document.getElementById('owner'); | 149 owner = document.getElementById('owner'); |
| 167 shouldBeEqualToString('owner.name', 'firstOwner'); | 150 shouldBeEqualToString('owner.name', 'firstOwner'); |
| 168 inputElement = document.getElementById('inputElement'); | 151 inputElement = document.getElementById('inputElement'); |
| 169 labelElement = document.getElementById('labelElement'); | |
| 170 container.removeChild(owner); | 152 container.removeChild(owner); |
| 171 owner = document.getElementById('owner'); | 153 owner = document.getElementById('owner'); |
| 172 shouldBeEqualToString('owner.name', 'secondOwner'); | 154 shouldBeEqualToString('owner.name', 'secondOwner'); |
| 173 shouldBe('inputElement.form', 'owner'); | 155 shouldBe('inputElement.form', 'owner'); |
| 174 shouldBe('labelElement.form', 'owner'); | |
| 175 container.removeChild(owner); | 156 container.removeChild(owner); |
| 176 shouldBe('inputElement.form', 'null'); | 157 shouldBe('inputElement.form', 'null'); |
| 177 shouldBe('labelElement.form', 'null'); | |
| 178 container.appendChild(owner); | 158 container.appendChild(owner); |
| 179 shouldBe('inputElement.form', 'owner'); | 159 shouldBe('inputElement.form', 'owner'); |
| 180 shouldBe('labelElement.form', 'owner'); | |
| 181 | 160 |
| 182 debug(''); | 161 debug(''); |
| 183 debug('- Check if a form and a control are disassociated when they are removed f
rom the document together.'); | 162 debug('- Check if a form and a control are disassociated when they are removed f
rom the document together.'); |
| 184 container.innerHTML = '<div><input form=owner><form id=owner></form></div>'; | 163 container.innerHTML = '<div><input form=owner><form id=owner></form></div>'; |
| 185 owner = document.getElementById('owner'); | 164 owner = document.getElementById('owner'); |
| 186 shouldBe('owner.elements.length', '1'); | 165 shouldBe('owner.elements.length', '1'); |
| 187 container.firstChild.remove(); | 166 container.firstChild.remove(); |
| 188 shouldBe('owner.elements.length', '0'); | 167 shouldBe('owner.elements.length', '0'); |
| 189 | 168 |
| 190 debug(''); | 169 debug(''); |
| (...skipping 15 matching lines...) Expand all Loading... |
| 206 form1 = document.querySelectorAll('form')[0]; | 185 form1 = document.querySelectorAll('form')[0]; |
| 207 form2 = document.querySelectorAll('form')[1]; | 186 form2 = document.querySelectorAll('form')[1]; |
| 208 var control = document.querySelector('select'); | 187 var control = document.querySelector('select'); |
| 209 shouldBe('control.form', 'form1'); | 188 shouldBe('control.form', 'form1'); |
| 210 shouldBe('form1.setAttribute("id", "b"); control.form', 'form2'); | 189 shouldBe('form1.setAttribute("id", "b"); control.form', 'form2'); |
| 211 | 190 |
| 212 container.remove(); | 191 container.remove(); |
| 213 </script> | 192 </script> |
| 214 </body> | 193 </body> |
| 215 </html> | 194 </html> |
| OLD | NEW |