<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="container">
<form id="testForm">
    Radio button array:
    <input type="radio" name="type1" value="value1">
    <input type="radio" name="type1" value="value2">
    <input type="radio" name="type2" value="value4">
    <input type="radio" name="type2" value="value5">
    <br>
    Single checkbox:
    <input type="checkbox" name="chkbox" value="chkboxvalue">
    <br>
</form>
<div id="external-elements">
<input type="radio" form="testForm" name="type1" value="value3">
<input type="radio" form="testForm" name="type2" value="value6">
</div>
</div>
<div id="console"></div>
<script>

description("RadioNodeList should be rooted at form itself if detached from dom tree");
debug("");
var owner = document.getElementById('testForm');
var radioNodeList1 = owner.elements['type1'];
var radioNodeList2 = owner.elements['type2'];
var container = document.getElementById('container');

function testRadioNodeList(expectedNumberOfItems) {
    shouldBe('radioNodeList1.length', expectedNumberOfItems + '');
    shouldBe('radioNodeList2.length', expectedNumberOfItems + '');

    shouldBe('radioNodeList1[0].value', "'value1'");
    shouldBe('radioNodeList1[1].value', "'value2'");
    if (expectedNumberOfItems == 3)
        shouldBe('radioNodeList1[2].value', "'value3'");
    shouldBe('radioNodeList2[0].value', "'value4'");
    shouldBe('radioNodeList2[1].value', "'value5'");
    if (expectedNumberOfItems == 3)
        shouldBe('radioNodeList2[2].value', "'value6'");
}

debug("form in dom tree");
testRadioNodeList(3);

debug("Check RadioNodeList.value");
shouldBe('radioNodeList1.value', '""');
shouldBe('radioNodeList2.value', '""');
shouldBe('radioNodeList1[2].checked = true; radioNodeList1.value', "'value3'");

container.removeChild(owner);

debug("");
debug("form detached from dom tree");
testRadioNodeList(2);

debug("Check RadioNodeList.value");
shouldBe('radioNodeList1[1].checked = true; radioNodeList1.value', "'value2'");

container.appendChild(owner);
var externalElements = document.getElementById('external-elements');
externalElements.parentNode.removeChild(externalElements);
container.appendChild(externalElements);

debug("");
debug("form again added to dom tree");
testRadioNodeList(3);

container.parentNode.removeChild(container);

debug("");
debug("form's ancestor detached from dom tree");
testRadioNodeList(2);

debug("Check RadioNodeList.value");
shouldBe('radioNodeList1[1].checked = true; radioNodeList1.value', "'value2'");

document.body.appendChild(container);

debug("");
debug("form again added to dom tree");
testRadioNodeList(3);

container.parentNode.removeChild(container);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>