test_input_radio_indeterminate.html (4176B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=885359 5 --> 6 <head> 7 <title>Test for Bug 885359</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=885359">Mozilla Bug 343444</a> 13 <p id="display"></p> 14 <form> 15 <input type="radio" id='radio1'/><br/> 16 17 <input type="radio" id="g1radio1" name="group1"/> 18 <input type="radio" id="g1radio2" name="group1"/></br> 19 <input type="radio" id="g1radio3" name="group1"/></br> 20 21 <input type="radio" id="g2radio1" name="group2"/> 22 <input type="radio" id="g2radio2" name="group2" checked/></br> 23 </form> 24 <script class="testbody" type="text/javascript"> 25 26 SimpleTest.waitForExplicitFinish(); 27 28 var radio1 = document.getElementById("radio1"); 29 var g1radio1 = document.getElementById("g1radio1"); 30 var g1radio2 = document.getElementById("g1radio2"); 31 var g1radio3 = document.getElementById("g1radio3"); 32 var g2radio1 = document.getElementById("g2radio1"); 33 var g2radio2 = document.getElementById("g2radio2"); 34 35 SimpleTest.waitForFocus(function() { 36 test(); 37 SimpleTest.finish(); 38 }); 39 40 function verifyIndeterminateState(aElement, aIsIndeterminate, aMessage) { 41 is(aElement.mozMatchesSelector(':indeterminate'), aIsIndeterminate, aMessage); 42 } 43 44 function test() { 45 // Initial State. 46 verifyIndeterminateState(radio1, true, 47 "Unchecked radio in its own group (no name attribute)"); 48 verifyIndeterminateState(g1radio1, true, "No selected radio in its group"); 49 verifyIndeterminateState(g1radio2, true, "No selected radio in its group"); 50 verifyIndeterminateState(g1radio3, true, "No selected radio in its group"); 51 verifyIndeterminateState(g2radio1, false, "Selected radio in its group"); 52 verifyIndeterminateState(g2radio2, false, "Selected radio in its group"); 53 54 // Selecting radio buttion. 55 g1radio1.checked = true; 56 verifyIndeterminateState(g1radio1, false, 57 "Selecting a radio should affect all radios in the group"); 58 verifyIndeterminateState(g1radio2, false, 59 "Selecting a radio should affect all radios in the group"); 60 verifyIndeterminateState(g1radio3, false, 61 "Selecting a radio should affect all radios in the group"); 62 63 // Changing the selected radio button. 64 g1radio3.checked = true; 65 verifyIndeterminateState(g1radio1, false, 66 "Selecting a radio should affect all radios in the group"); 67 verifyIndeterminateState(g1radio2, false, 68 "Selecting a radio should affect all radios in the group"); 69 verifyIndeterminateState(g1radio3, false, 70 "Selecting a radio should affect all radios in the group"); 71 72 // Deselecting radio button. 73 g2radio2.checked = false; 74 verifyIndeterminateState(g2radio1, true, 75 "Deselecting a radio should affect all radios in the group"); 76 verifyIndeterminateState(g2radio2, true, 77 "Deselecting a radio should affect all radios in the group"); 78 79 // Move a selected radio button to another group. 80 g1radio3.name = "group2"; 81 82 // The radios' state in the original group becomes indeterminated. 83 verifyIndeterminateState(g1radio1, true, 84 "Removing a radio from a group should affect all radios in the group"); 85 verifyIndeterminateState(g1radio2, true, 86 "Removing a radio from a group should affect all radios in the group"); 87 88 // The radios' state in the new group becomes determinated. 89 verifyIndeterminateState(g1radio3, false, 90 "Adding a radio from a group should affect all radios in the group"); 91 verifyIndeterminateState(g2radio1, false, 92 "Adding a radio from a group should affect all radios in the group"); 93 verifyIndeterminateState(g2radio2, false, 94 "Adding a radio from a group should affect all radios in the group"); 95 96 // Change input type to 'text'. 97 g1radio3.type = "text"; 98 verifyIndeterminateState(g1radio3, false, 99 "Input type text does not have an indeterminate state"); 100 verifyIndeterminateState(g2radio1, true, 101 "Changing input type should affect all radios in the group"); 102 verifyIndeterminateState(g2radio2, true, 103 "Changing input type should affect all radios in the group"); 104 } 105 </script> 106 </pre> 107 </body> 108 </html>