| <!DOCTYPE html> |
| <body> |
| <script src="../../../resources/js-test-pre.js"></script> |
| |
| <div id="parent"></div> |
| |
| <script> |
| description('Various tests about radio button group.'); |
| |
| const Checked = true; |
| const Unchecked = false; |
| |
| function createRadio(name, checked, id) { |
| var input = document.createElement('input'); |
| input.type = 'radio'; |
| input.name = name; |
| input.checked = !!checked; |
| input.id = id; |
| return input; |
| } |
| |
| function $(id) { |
| return document.getElementById(id); |
| } |
| |
| var parent = $('parent'); |
| |
| debug('Changing the name attribute of a radio button:'); |
| parent.innerHTML = '<form>' + |
| '<input type=radio name=name1 checked id=radio1-1>' + |
| '<input type=radio name=name2 checked id=radio1-2>' + |
| '</form>'; |
| shouldBeTrue('$("radio1-1").checked'); |
| shouldBeTrue('$("radio1-2").checked'); |
| $('radio1-2').name = 'name1'; |
| shouldBeFalse('$("radio1-1").checked'); |
| shouldBeTrue('$("radio1-2").checked'); |
| shouldBeTrue('$("radio1-1").checked = true; $("radio1-1").checked'); |
| shouldBeFalse('$("radio1-2").checked'); |
| |
| debug('\nDetach the from from the document tree:'); |
| var orphanForm = parent.firstChild; |
| parent.removeChild(orphanForm); |
| var radioButtons = orphanForm.getElementsByTagName('input'); |
| shouldBeTrue('radioButtons[0].checked'); |
| shouldBeFalse('radioButtons[1].checked'); |
| shouldBeFalse('radioButtons[1].checked = true; radioButtons[0].checked'); |
| shouldBeTrue('radioButtons[1].checked'); |
| |
| debug(''); |
| debug('Changing the type of an input element to radio:'); |
| parent.innerHTML = '<form>' + |
| '<input type=radio name=name1 checked id=radio1-1>' + |
| '<input type=text name=name1 checked id=text1-2>' + |
| '</form>'; |
| shouldBeTrue('$("radio1-1").checked'); |
| $('text1-2').type = 'radio'; |
| shouldBeFalse('$("radio1-1").checked'); |
| shouldBeTrue('$("text1-2").checked'); |
| |
| debug(''); |
| debug('Moving a checked radio button to another form:'); |
| parent.innerHTML = '<input type="radio" name="name1" checked id="outside">' + |
| '<form id="form1">' + |
| '<input type="radio" name="name1" checked id="inside">' + |
| '</form>' + |
| '<form id="form2">' + |
| '<input type="radio" name="name1" checked id="inside2">' + |
| '</form>' |
| shouldBeTrue('$("outside").checked'); |
| shouldBeTrue('$("inside").checked'); |
| shouldBeTrue('$("inside2").checked'); |
| $('form1').appendChild($('inside2')); |
| shouldBeTrue('$("outside").checked'); |
| shouldBeFalse('$("inside").checked'); |
| shouldBeTrue('$("inside2").checked'); |
| debug('When a radio in a form is removed, it should not affect Document-level groups:'); |
| parent.removeChild($('form1')); |
| shouldBeTrue('$("outside").checked'); |
| |
| debug(''); |
| debug('Removing an ancestor owner form:'); |
| parent.innerHTML = '<input type=radio name=name0 checked id=radio0-1>' + |
| '<form id=form1><input type=radio name=name0 checked id=radio0-2></form>'; |
| parent.removeChild($('form1')); |
| gc(); |
| shouldBeTrue('$("radio0-1").checked'); |
| |
| debug(''); |
| debug('Changing form attribute'); |
| parent.innerHTML = '<input type=radio name=name1 checked id=radio1-1>' + |
| '<form id=form1><input type=radio name=name1 checked id=radio1-2></form>' + |
| '<form id=form2><input type=radio name=name1 checked id=radio1-3></form>'; |
| $('radio1-3').setAttribute('form', 'form1'); |
| shouldBeTrue('$("radio1-1").checked'); |
| shouldBeFalse('$("radio1-2").checked'); |
| shouldBeTrue('$("radio1-3").checked'); |
| |
| debug('Removing a non-ancestor owner form:'); |
| $('form2').appendChild(createRadio('name1', Checked, 'radio1-4')); |
| shouldBeTrue('$("radio1-3").checked'); |
| // If there is no elements with ID specified by form= attribute, the form |
| // control is not associated to any forms. |
| parent.removeChild($('form1')); |
| // FIXME: We need to call gc() twice on Apple Mac. |
| gc(); |
| gc(); |
| shouldBeTrue('$("radio1-4").checked'); |
| debug('(The following test depends on gc(). It might fail on a real browser.)'); |
| shouldBeFalse('$("radio1-1").checked'); |
| shouldBeTrue('$("radio1-3").checked'); |
| |
| debug(''); |
| debug('Adding a radio button to an orphan tree:'); |
| var orphanDiv = document.createElement('div'); |
| orphanDiv.appendChild(createRadio('name2', Checked, '')); |
| orphanDiv.appendChild(createRadio('name2', Checked, '')); |
| shouldBeTrue('orphanDiv.getElementsByTagName("input")[0].checked'); |
| shouldBeTrue('orphanDiv.getElementsByTagName("input")[1].checked'); |
| debug('Adding the orphan tree to a document:'); |
| document.body.appendChild(orphanDiv); |
| shouldBeFalse('orphanDiv.getElementsByTagName("input")[0].checked'); |
| shouldBeTrue('orphanDiv.getElementsByTagName("input")[1].checked'); |
| |
| debug('Parsing an orphan form:'); |
| document.body.removeChild(orphanDiv); |
| orphanDiv.innerHTML = '<form><input type=radio name=name3 checked><input type=radio name=name3 checked></form>'; |
| shouldBeFalse('orphanDiv.getElementsByTagName("input")[0].checked'); |
| shouldBeTrue('orphanDiv.getElementsByTagName("input")[1].checked'); |
| |
| debug(''); |
| debug('Moving a radio button to another Document:'); |
| parent.innerHTML = '<input type=radio name=name4 checked id=radio4-1>'; |
| var doc = document.implementation.createHTMLDocument(); |
| doc.body.innerHTML = '<input type=radio name=name4 checked id=radio4-2>'; |
| doc.body.appendChild(doc.adoptNode($('radio4-1'))); |
| shouldBeFalse('doc.getElementById("radio4-2").checked'); |
| shouldBeTrue('doc.getElementById("radio4-1").checked'); |
| parent.appendChild(createRadio('name4', Checked, '')); |
| shouldBeTrue('doc.getElementById("radio4-1").checked'); |
| |
| debug(''); |
| debug('Cloning a radio button:'); |
| var original = createRadio('name5', Checked, ''); |
| parent.innerHTML = ''; |
| parent.appendChild(original); |
| var clonedRadio = original.cloneNode(true); |
| shouldBeTrue('original.checked'); |
| shouldBeTrue('clonedRadio.checked'); |
| |
| parent.innerHTML = ''; |
| debug(''); |
| </script> |
| |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
