89 lines
2.8 KiB
HTML
89 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div { font-weight: bold; }
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
This will test that radio buttons can be moved in and out of forms while maintaining only one checked button per group, per form.
|
|
<br>
|
|
Test 1: Transfer radio buttons from <body> to <form>:
|
|
<input type="radio" name="group1" id="radio1" checked="checked">
|
|
<input type="radio" name="group1" id="radio2">
|
|
<form id="test1">
|
|
</form>
|
|
<div id="result1">Test 1 Failed</div>
|
|
<br>
|
|
Test 2: Transfer radio buttons from <form> to <body>:
|
|
<form>
|
|
<input type="radio" name="group2" id="radio3" checked="checked">
|
|
<input type="radio" name="group2" id="radio4">
|
|
</form>
|
|
<div id="result2">Test 2 Failed</div>
|
|
<br>
|
|
Test 3: Transfer radio buttons from <form> to <body> with a dormant state in the middle:
|
|
<form>
|
|
<input type="radio" name="group3" id="radio5" checked="checked">
|
|
<input type="radio" name="group3" id="radio6">
|
|
</form>
|
|
<div id="result3">Test 3 Failed</div>
|
|
<br>
|
|
Test 4: Transfer from <form> to <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>
|
|
<div id="result4">Test 4 Failed</div>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
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;
|
|
|
|
var radio3 = document.getElementById("radio3");
|
|
var radio4 = document.getElementById("radio4");
|
|
document.body.appendChild(radio3);
|
|
document.body.appendChild(radio4);
|
|
radio4.checked = true;
|
|
|
|
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;
|
|
|
|
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;
|
|
|
|
if (!radio1.checked && radio2.checked)
|
|
result1.innerHTML = "Test 1 Passed";
|
|
if (!radio3.checked && radio4.checked)
|
|
result2.innerHTML = "Test 2 Passed";
|
|
if (!radio5.checked && radio6.checked)
|
|
result3.innerHTML = "Test 3 Passed";
|
|
if (!radio7.checked && radio8.checked && !radio9.checked && !radio9wasChecked)
|
|
result4.innerHTML = "Test 4 Passed";
|
|
</script>
|
|
</body>
|
|
</html>
|