test_bug610687.html (6139B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=610687 5 --> 6 <head> 7 <title>Test for Bug 610687</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=610687">Mozilla Bug 610687</a> 13 <p id="display"></p> 14 <div id="content"> 15 <form> 16 <input type='radio' name='a'> 17 <input type='radio' name='a'> 18 <input type='radio' name='b'> 19 </form> 20 <input type='radio' name='a'> 21 <input type='radio' name='a'> 22 <input type='radio' name='b'> 23 </div> 24 <pre id="test"> 25 <script type="application/javascript"> 26 27 /** Test for Bug 610687 */ 28 29 function checkPseudoClasses(aElement, aValid, aValidUI, aInvalidUI) 30 { 31 if (aValid) { 32 ok(aElement.matches(":valid"), ":valid should apply"); 33 } else { 34 ok(aElement.matches(":invalid"), ":invalid should apply"); 35 } 36 37 is(aElement.matches(":user-valid"), aValidUI, 38 aValid ? ":user-valid should apply" : ":user-valid should not apply"); 39 40 is(aElement.matches(":user-invalid"), aInvalidUI, 41 aInvalidUI ? ":user-invalid should apply" : ":user-invalid should not apply"); 42 43 if (aInvalidUI && (aValid || aValidUI)) { 44 ok(false, ":invalid can't apply with :valid or :user-valid"); 45 } 46 } 47 48 /** 49 * r1 and r2 should be in the same group. 50 * r3 should be in another group. 51 * form can be null. 52 */ 53 function checkRadios(r1, r2, r3, form) 54 { 55 // Default state. 56 checkPseudoClasses(r1, true, false, false); 57 checkPseudoClasses(r2, true, false, false); 58 checkPseudoClasses(r3, true, false, false); 59 60 // Suffering from being missing (without ui-invalid). 61 r1.required = true; 62 checkPseudoClasses(r1, false, false, false); 63 checkPseudoClasses(r2, false, false, false); 64 checkPseudoClasses(r3, true, false, false); 65 66 // Do not suffer from being missing (with ui-valid). 67 r1.click(); 68 checkPseudoClasses(r1, true, true, false); 69 checkPseudoClasses(r2, true, false, false); 70 checkPseudoClasses(r3, true, false, false); 71 72 // Do not suffer from being missing (with ui-valid). 73 r1.checked = false; 74 r1.required = false; 75 checkPseudoClasses(r1, true, true, false); 76 checkPseudoClasses(r2, true, false, false); 77 checkPseudoClasses(r3, true, false, false); 78 79 // Suffering from being missing (with ui-invalid) with required set on one radio 80 // and the checked state changed on another. 81 r1.required = true; 82 r2.checked = false; 83 checkPseudoClasses(r1, false, false, true); 84 checkPseudoClasses(r2, false, false, false); 85 checkPseudoClasses(r3, true, false, false); 86 87 // Do not suffer from being missing (with ui-valid) by checking the radio which 88 // hasn't the required attribute. 89 r2.checked = true; 90 checkPseudoClasses(r1, true, true, false); 91 checkPseudoClasses(r2, true, false, false); 92 checkPseudoClasses(r3, true, false, false); 93 94 // .setCustomValidity() should not affect the entire group. 95 r1.checked = false; r2.checked = false; r3.checked = false; 96 r1.required = false; 97 r1.setCustomValidity('foo'); 98 checkPseudoClasses(r1, false, false, true); 99 checkPseudoClasses(r2, true, false, false); 100 checkPseudoClasses(r3, true, false, false); 101 102 r1.setCustomValidity(''); 103 r2.setCustomValidity('foo'); 104 checkPseudoClasses(r1, true, true, false); 105 checkPseudoClasses(r2, false, false, false); 106 checkPseudoClasses(r3, true, false, false); 107 108 r2.setCustomValidity(''); 109 r3.setCustomValidity('foo'); 110 checkPseudoClasses(r1, true, true, false); 111 checkPseudoClasses(r2, true, false, false); 112 checkPseudoClasses(r3, false, false, false); 113 114 // Removing the radio with the required attribute should make the group valid. 115 r1.setCustomValidity(''); 116 r2.setCustomValidity(''); 117 r1.required = false; 118 r2.required = true; 119 r1.checked = r2.checked = false; 120 checkPseudoClasses(r1, false, false, true); 121 checkPseudoClasses(r2, false, false, false); 122 123 var p = r2.parentNode; 124 p.removeChild(r2); 125 checkPseudoClasses(r1, true, true, false); 126 checkPseudoClasses(r2, false, false, false); 127 128 p.appendChild(r2); 129 checkPseudoClasses(r1, false, false, true); 130 checkPseudoClasses(r2, false, false, false); 131 132 // Adding a radio element to an invalid group should make it invalid. 133 p.removeChild(r1); 134 checkPseudoClasses(r1, true, true, false); 135 checkPseudoClasses(r2, false, false, false); 136 137 p.appendChild(r1); 138 checkPseudoClasses(r1, false, false, true); 139 checkPseudoClasses(r2, false, false, false); 140 141 // Adding a checked radio element to an invalid group should make it valid. 142 p.removeChild(r1); 143 checkPseudoClasses(r1, true, true, false); 144 checkPseudoClasses(r2, false, false, false); 145 146 r1.checked = true; 147 p.appendChild(r1); 148 checkPseudoClasses(r1, true, true, false); 149 checkPseudoClasses(r2, true, false, false); 150 r1.checked = false; 151 152 // Adding an invalid radio element by changing the name attribute. 153 r2.name = 'c'; 154 checkPseudoClasses(r1, true, true, false); 155 checkPseudoClasses(r2, false, false, false); 156 157 r2.name = 'a'; 158 checkPseudoClasses(r1, false, false, true); 159 checkPseudoClasses(r2, false, false, false); 160 161 // Adding an element to an invalid radio group by changing the name attribute. 162 r1.name = 'c'; 163 checkPseudoClasses(r1, true, true, false); 164 checkPseudoClasses(r2, false, false, false); 165 166 r1.name = 'a'; 167 checkPseudoClasses(r1, false, false, true); 168 checkPseudoClasses(r2, false, false, false); 169 170 // Adding a checked element to an invalid radio group with the name attribute. 171 r1.name = 'c'; 172 checkPseudoClasses(r1, true, true, false); 173 checkPseudoClasses(r2, false, false, false); 174 175 r1.checked = true; 176 r1.name = 'a'; 177 checkPseudoClasses(r1, true, true, false); 178 checkPseudoClasses(r2, true, false, false); 179 r1.checked = false; 180 } 181 182 var r1 = document.getElementsByTagName('input')[0]; 183 var r2 = document.getElementsByTagName('input')[1]; 184 var r3 = document.getElementsByTagName('input')[2]; 185 checkRadios(r1, r2, r3); 186 187 r1 = document.getElementsByTagName('input')[3]; 188 r2 = document.getElementsByTagName('input')[4]; 189 r3 = document.getElementsByTagName('input')[5]; 190 checkRadios(r1, r2, r3); 191 192 </script> 193 </pre> 194 </body> 195 </html>