<!DOCTYPE html>
<body>
<script src="../../../resources/js-test.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'));
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>

</body>