radio_checked_dynamic.html | Explore in Territory

<html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id="log"></div>

<input type="radio" name="group1" id="radio1" checked="checked">
<input type="radio" name="group1" id="radio2">
<form id="test1">
</form>

<form>
<input type="radio" name="group2" id="radio3" checked="checked">
<input type="radio" name="group2" id="radio4">
</form>

<form>
<input type="radio" name="group3" id="radio5" checked="checked">
<input type="radio" name="group3" id="radio6">
</form>

<form>
<input type="radio" name="group4" id="radio7" checked="checked" style="outline:1px solid red">
<input type="radio" name="group4" id="radio8" style="outline:1px solid blue">
</form>
<form id="test4">
<input type="radio" name="group4" id="radio9" checked="checked" style="outline:1px solid green">
</form>

<script>
// This will test that radio buttons can be moved in and out of forms while
// maintaining only one checked button per group, per form.

test(function() {
    var radio1 = document.getElementById("radio1");
    var radio2 = document.getElementById("radio2");
    var form = document.getElementById("test1");
    var result1 = document.getElementById("result1");
    form.appendChild(radio1);
    form.appendChild(radio2);
    radio2.checked = true;
    assert_false(radio1.checked);
    assert_true(radio2.checked);
}, "Transfer radio buttons from <body> to <form>.");

test(function() {    
    var radio3 = document.getElementById("radio3");
    var radio4 = document.getElementById("radio4");
    document.body.appendChild(radio3);
    document.body.appendChild(radio4);
    radio4.checked = true;
    assert_false(radio3.checked);
    assert_true(radio4.checked);
}, "Transfer radio buttons from <form> to <body>.");

test(function() {    
    var radio5 = document.getElementById("radio5");
    var radio6 = document.getElementById("radio6");
    radio5.parentNode.removeChild(radio5);
    radio6.parentNode.removeChild(radio6);
    document.body.appendChild(radio5);
    document.body.appendChild(radio6);
    radio6.checked = true;
    assert_false(radio5.checked);
    assert_true(radio6.checked);
}, "Transfer radio buttons from <form> to <body> with a dormant state in the middle.");

test(function() {
    var radio7 = document.getElementById("radio7");
    var radio8 = document.getElementById("radio8");
    var radio9wasChecked = true;
    var form4 = document.getElementById("test4");
    form4.appendChild(radio7);
    form4.appendChild(radio8);
    radio9wasChecked = radio9.checked;
    radio8.checked = true;
    assert_false(radio7.checked);
    assert_true(radio8.checked);
    assert_false(radio9.checked);
    assert_false(radio9wasChecked);
}, "Transfer from <form> to <form>.");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/radio/radio_checked_dynamic.html
