test_validation.html (15674B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=345624 5 --> 6 <head> 7 <title>Test for Bug 345624</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style> 11 input, textarea, fieldset, button, select, output, object { background-color: rgb(0,0,0) !important; } 12 :valid { background-color: rgb(0,255,0) !important; } 13 :invalid { background-color: rgb(255,0,0) !important; } 14 </style> 15 </head> 16 <body> 17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=345624">Mozilla Bug 345624</a> 18 <p id="display"></p> 19 <div id="content" style="display: none"> 20 <fieldset id='f'></fieldset> 21 <input id='i' oninvalid="invalidEventHandler(event);"> 22 <button id='b' oninvalid="invalidEventHandler(event);"></button> 23 <select id='s' oninvalid="invalidEventHandler(event);"></select> 24 <textarea id='t' oninvalid="invalidEventHandler(event);"></textarea> 25 <output id='o' oninvalid="invalidEventHandler(event);"></output> 26 <object id='obj'></object> 27 </div> 28 <pre id="test"> 29 <script type="application/javascript"> 30 31 /** Test for Bug 345624 */ 32 33 var gInvalid = false; 34 35 function invalidEventHandler(aEvent) 36 { 37 function checkInvalidEvent(event) 38 { 39 is(event.type, "invalid", "Invalid event type should be invalid"); 40 ok(!event.bubbles, "Invalid event should not bubble"); 41 ok(event.cancelable, "Invalid event should be cancelable"); 42 } 43 44 checkInvalidEvent(aEvent); 45 46 gInvalid = true; 47 } 48 49 function checkConstraintValidationAPIExist(element) 50 { 51 ok('willValidate' in element, "willValidate is not available in the DOM"); 52 ok('validationMessage' in element, "validationMessage is not available in the DOM"); 53 ok('validity' in element, "validity is not available in the DOM"); 54 55 if ('validity' in element) { 56 validity = element.validity; 57 ok('valueMissing' in validity, "validity.valueMissing is not available in the DOM"); 58 ok('typeMismatch' in validity, "validity.typeMismatch is not available in the DOM"); 59 ok('badInput' in validity, "validity.badInput is not available in the DOM"); 60 ok('patternMismatch' in validity, "validity.patternMismatch is not available in the DOM"); 61 ok('tooLong' in validity, "validity.tooLong is not available in the DOM"); 62 ok('rangeUnderflow' in validity, "validity.rangeUnderflow is not available in the DOM"); 63 ok('rangeOverflow' in validity, "validity.rangeOverflow is not available in the DOM"); 64 ok('stepMismatch' in validity, "validity.stepMismatch is not available in the DOM"); 65 ok('customError' in validity, "validity.customError is not available in the DOM"); 66 ok('valid' in validity, "validity.valid is not available in the DOM"); 67 } 68 } 69 70 function checkConstraintValidationAPIDefaultValues(element) 71 { 72 // Not checking willValidate because the default value depends of the element 73 74 is(element.validationMessage, "", "validationMessage default value should be empty string"); 75 76 ok(!element.validity.valueMissing, "The element should not suffer from a constraint validation"); 77 ok(!element.validity.typeMismatch, "The element should not suffer from a constraint validation"); 78 ok(!element.validity.badInput, "The element should not suffer from a constraint validation"); 79 ok(!element.validity.patternMismatch, "The element should not suffer from a constraint validation"); 80 ok(!element.validity.tooLong, "The element should not suffer from a constraint validation"); 81 ok(!element.validity.rangeUnderflow, "The element should not suffer from a constraint validation"); 82 ok(!element.validity.rangeOverflow, "The element should not suffer from a constraint validation"); 83 ok(!element.validity.stepMismatch, "The element should not suffer from a constraint validation"); 84 ok(!element.validity.customError, "The element should not suffer from a constraint validation"); 85 ok(element.validity.valid, "The element should be valid by default"); 86 87 ok(element.checkValidity(), "The element should be valid by default"); 88 } 89 90 function checkDefaultPseudoClass() 91 { 92 is(window.getComputedStyle(document.getElementById('f')) 93 .getPropertyValue('background-color'), "rgb(0, 255, 0)", 94 ":valid should apply"); 95 96 is(window.getComputedStyle(document.getElementById('o')) 97 .getPropertyValue('background-color'), "rgb(0, 0, 0)", 98 "Nor :valid and :invalid should apply"); 99 100 is(window.getComputedStyle(document.getElementById('obj')) 101 .getPropertyValue('background-color'), "rgb(0, 0, 0)", 102 "Nor :valid and :invalid should apply"); 103 104 is(window.getComputedStyle(document.getElementById('s')) 105 .getPropertyValue('background-color'), "rgb(0, 255, 0)", 106 ":valid pseudo-class should apply"); 107 108 is(window.getComputedStyle(document.getElementById('i')) 109 .getPropertyValue('background-color'), "rgb(0, 255, 0)", 110 ":valid pseudo-class should apply"); 111 112 is(window.getComputedStyle(document.getElementById('t')) 113 .getPropertyValue('background-color'), "rgb(0, 255, 0)", 114 ":valid pseudo-class should apply"); 115 116 is(window.getComputedStyle(document.getElementById('b')) 117 .getPropertyValue('background-color'), "rgb(0, 255, 0)", 118 ":valid pseudo-class should apply"); 119 } 120 121 function checkSpecificWillValidate() 122 { 123 // fieldset, output, object (TODO) and select elements 124 ok(!document.getElementById('f').willValidate, "Fielset element should be barred from constraint validation"); 125 ok(!document.getElementById('obj').willValidate, "Object element should be barred from constraint validation"); 126 ok(!document.getElementById('o').willValidate, "Output element should be barred from constraint validation"); 127 ok(document.getElementById('s').willValidate, "Select element should not be barred from constraint validation"); 128 129 // input element 130 i = document.getElementById('i'); 131 i.type = "hidden"; 132 ok(!i.willValidate, "Hidden state input should be barred from constraint validation"); 133 is(window.getComputedStyle(i).getPropertyValue('background-color'), 134 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 135 i.type = "reset"; 136 ok(!i.willValidate, "Reset button state input should be barred from constraint validation"); 137 is(window.getComputedStyle(i).getPropertyValue('background-color'), 138 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 139 i.type = "button"; 140 ok(!i.willValidate, "Button state input should be barred from constraint validation"); 141 is(window.getComputedStyle(i).getPropertyValue('background-color'), 142 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 143 i.type = "image"; 144 ok(i.willValidate, "Image state input should not be barred from constraint validation"); 145 is(window.getComputedStyle(i).getPropertyValue('background-color'), 146 "rgb(0, 255, 0)", ":valid and :invalid should apply"); 147 i.type = "submit"; 148 ok(i.willValidate, "Submit state input should not be barred from constraint validation"); 149 is(window.getComputedStyle(i).getPropertyValue('background-color'), 150 "rgb(0, 255, 0)", ":valid and :invalid should apply"); 151 i.type = "number"; 152 ok(i.willValidate, "Number state input should not be barred from constraint validation"); 153 is(window.getComputedStyle(i).getPropertyValue('background-color'), 154 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 155 i.type = ""; 156 i.readOnly = 'true'; 157 ok(!i.willValidate, "Readonly input should be barred from constraint validation"); 158 is(window.getComputedStyle(i).getPropertyValue('background-color'), 159 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 160 i.removeAttribute('readOnly'); 161 ok(i.willValidate, "Default input element should not be barred from constraint validation"); 162 is(window.getComputedStyle(i).getPropertyValue('background-color'), 163 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 164 165 // button element 166 b = document.getElementById('b'); 167 b.type = "reset"; 168 ok(!b.willValidate, "Reset state button should be barred from constraint validation"); 169 is(window.getComputedStyle(b).getPropertyValue('background-color'), 170 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 171 b.type = "button"; 172 ok(!b.willValidate, "Button state button should be barred from constraint validation"); 173 is(window.getComputedStyle(b).getPropertyValue('background-color'), 174 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 175 b.type = "submit"; 176 ok(b.willValidate, "Submit state button should not be barred from constraint validation"); 177 is(window.getComputedStyle(b).getPropertyValue('background-color'), 178 "rgb(0, 255, 0)", ":valid and :invalid should apply"); 179 b.type = ""; 180 ok(b.willValidate, "Default button element should not be barred from constraint validation"); 181 is(window.getComputedStyle(b).getPropertyValue('background-color'), 182 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 183 184 // textarea element 185 t = document.getElementById('t'); 186 t.readOnly = true; 187 ok(!t.willValidate, "Readonly textarea should be barred from constraint validation"); 188 is(window.getComputedStyle(t).getPropertyValue('background-color'), 189 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 190 t.removeAttribute('readOnly'); 191 ok(t.willValidate, "Default textarea element should not be barred from constraint validation"); 192 is(window.getComputedStyle(t).getPropertyValue('background-color'), 193 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 194 195 // TODO: PROGRESS 196 // TODO: METER 197 } 198 199 function checkCommonWillValidate(element) 200 { 201 // Not checking the default value because it has been checked previously. 202 203 element.disabled = true; 204 ok(!element.willValidate, "Disabled element should be barred from constraint validation"); 205 206 is(window.getComputedStyle(element).getPropertyValue('background-color'), 207 "rgb(0, 0, 0)", "Nor :valid and :invalid should apply"); 208 209 element.removeAttribute('disabled'); 210 211 // TODO: If an element has a datalist element ancestor, it is barred from constraint validation. 212 } 213 214 function checkCustomError(element, isBarred) 215 { 216 element.setCustomValidity("message"); 217 if (!isBarred) { 218 is(element.validationMessage, "message", 219 "When the element has a custom validity message, validation message should return it"); 220 } else { 221 is(element.validationMessage, "", 222 "An element barred from constraint validation can't have a validation message"); 223 } 224 ok(element.validity.customError, "The element should suffer from a custom error"); 225 ok(!element.validity.valid, "The element should not be valid with a custom error"); 226 227 if (element.tagName == "FIELDSET") { 228 is(window.getComputedStyle(element).getPropertyValue('background-color'), 229 isBarred ? "rgb(0, 255, 0)" : "rgb(255, 0, 0)", 230 ":invalid pseudo-classs should apply to " + element.tagName); 231 } 232 else { 233 is(window.getComputedStyle(element).getPropertyValue('background-color'), 234 isBarred ? "rgb(0, 0, 0)" : "rgb(255, 0, 0)", 235 ":invalid pseudo-classs should apply to " + element.tagName); 236 } 237 238 element.setCustomValidity(""); 239 is(element.validationMessage, "", "The element should not have a validation message when reseted"); 240 ok(!element.validity.customError, "The element should not suffer anymore from a custom error"); 241 ok(element.validity.valid, "The element should now be valid"); 242 243 is(window.getComputedStyle(element).getPropertyValue('background-color'), 244 isBarred && element.tagName != "FIELDSET" ? "rgb(0, 0, 0)" : "rgb(0, 255, 0)", 245 ":valid pseudo-classs should apply"); 246 } 247 248 function checkCheckValidity(element) 249 { 250 element.setCustomValidity("message"); 251 ok(!element.checkValidity(), "checkValidity() should return false when the element is not valid"); 252 253 ok(gInvalid, "Invalid event should have been handled"); 254 255 gInvalid = false; 256 element.setCustomValidity(""); 257 258 ok(element.checkValidity(), "Element should be valid"); 259 ok(!gInvalid, "Invalid event should not have been handled"); 260 } 261 262 function checkValidityStateObjectAliveWithoutElement(element) 263 { 264 // We are creating a temporary element and getting it's ValidityState object. 265 // Then, we make sure it is removed by the garbage collector and we check the 266 // ValidityState default values (it should not crash). 267 268 var v = document.createElement(element).validity; 269 SpecialPowers.gc(); 270 271 ok(!v.valueMissing, 272 "When the element is not alive, it shouldn't suffer from constraint validation"); 273 ok(!v.typeMismatch, 274 "When the element is not alive, it shouldn't suffer from constraint validation"); 275 ok(!v.badInput, 276 "When the element is not alive, it shouldn't suffer from constraint validation"); 277 ok(!v.patternMismatch, 278 "When the element is not alive, it shouldn't suffer from constraint validation"); 279 ok(!v.tooLong, 280 "When the element is not alive, it shouldn't suffer from constraint validation"); 281 ok(!v.rangeUnderflow, 282 "When the element is not alive, it shouldn't suffer from constraint validation"); 283 ok(!v.rangeOverflow, 284 "When the element is not alive, it shouldn't suffer from constraint validation"); 285 ok(!v.stepMismatch, 286 "When the element is not alive, it shouldn't suffer from constraint validation"); 287 ok(!v.customError, 288 "When the element is not alive, it shouldn't suffer from constraint validation"); 289 ok(v.valid, "When the element is not alive, it should be valid"); 290 } 291 292 checkConstraintValidationAPIExist(document.getElementById('f')); 293 checkConstraintValidationAPIExist(document.getElementById('i')); 294 checkConstraintValidationAPIExist(document.getElementById('b')); 295 checkConstraintValidationAPIExist(document.getElementById('s')); 296 checkConstraintValidationAPIExist(document.getElementById('t')); 297 checkConstraintValidationAPIExist(document.getElementById('o')); 298 checkConstraintValidationAPIExist(document.getElementById('obj')); 299 300 checkConstraintValidationAPIDefaultValues(document.getElementById('f')); 301 checkConstraintValidationAPIDefaultValues(document.getElementById('i')); 302 checkConstraintValidationAPIDefaultValues(document.getElementById('b')); 303 checkConstraintValidationAPIDefaultValues(document.getElementById('s')); 304 checkConstraintValidationAPIDefaultValues(document.getElementById('t')); 305 checkConstraintValidationAPIDefaultValues(document.getElementById('o')); 306 checkConstraintValidationAPIDefaultValues(document.getElementById('obj')); 307 308 checkDefaultPseudoClass(); 309 310 checkSpecificWillValidate(); 311 312 // Not checking button, fieldset, output and object 313 // because they are always barred from constraint validation. 314 checkCommonWillValidate(document.getElementById('i')); 315 checkCommonWillValidate(document.getElementById('s')); 316 checkCommonWillValidate(document.getElementById('t')); 317 318 checkCustomError(document.getElementById('i'), false); 319 checkCustomError(document.getElementById('s'), false); 320 checkCustomError(document.getElementById('t'), false); 321 checkCustomError(document.getElementById('o'), true); 322 checkCustomError(document.getElementById('b'), false); 323 checkCustomError(document.getElementById('f'), true); 324 checkCustomError(document.getElementById('obj'), true); 325 326 // Not checking button, fieldset, output and object 327 // because they are always barred from constraint validation. 328 checkCheckValidity(document.getElementById('i')); 329 checkCheckValidity(document.getElementById('s')); 330 checkCheckValidity(document.getElementById('t')); 331 332 checkValidityStateObjectAliveWithoutElement("fieldset"); 333 checkValidityStateObjectAliveWithoutElement("input"); 334 checkValidityStateObjectAliveWithoutElement("button"); 335 checkValidityStateObjectAliveWithoutElement("select"); 336 checkValidityStateObjectAliveWithoutElement("textarea"); 337 checkValidityStateObjectAliveWithoutElement("output"); 338 checkValidityStateObjectAliveWithoutElement("object"); 339 340 </script> 341 </pre> 342 </body> 343 </html>