test_max_attribute.html (13599B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=635499 5 --> 6 <head> 7 <title>Test for Bug 635499</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=635499">Mozilla Bug 635499</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 </div> 16 <pre id="test"> 17 <script type="application/javascript"> 18 19 /** Test for Bug 635499 */ 20 21 var data = [ 22 { type: 'hidden', apply: false }, 23 { type: 'text', apply: false }, 24 { type: 'search', apply: false }, 25 { type: 'tel', apply: false }, 26 { type: 'url', apply: false }, 27 { type: 'email', apply: false }, 28 { type: 'password', apply: false }, 29 { type: 'date', apply: true }, 30 { type: 'month', apply: true }, 31 { type: 'week', apply: true }, 32 { type: 'time', apply: true }, 33 { type: 'datetime-local', apply: true }, 34 { type: 'number', apply: true }, 35 { type: 'range', apply: true }, 36 { type: 'color', apply: false }, 37 { type: 'checkbox', apply: false }, 38 { type: 'radio', apply: false }, 39 { type: 'file', apply: false }, 40 { type: 'submit', apply: false }, 41 { type: 'image', apply: false }, 42 { type: 'reset', apply: false }, 43 { type: 'button', apply: false }, 44 ]; 45 46 var input = document.createElement("input"); 47 document.getElementById('content').appendChild(input); 48 49 /** 50 * @param {boolean} aValidity 51 * Indicates whether the element is expected to be valid 52 * (aElement.validity.valid is true) or not. The value passed is ignored and 53 * overridden with true if aApply is false. 54 * @param {boolean} aApply 55 * Indicating whether the min/max attributes apply to this element type. 56 * @param {boolean} aRangeApply 57 * Set to true if the current input type is a "[candidate] for constraint 58 * validation" and it "[has] range limitations" per 59 * http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-in-range 60 * (in other words, one of the pseudo classes :in-range and :out-of-range 61 * should apply (which, depends on aValidity)). 62 * Else (neither :in-range or :out-of-range should match) set to false. 63 */ 64 function checkValidity(aElement, aValidity, aApply, aRangeApply) 65 { 66 aValidity = aApply ? aValidity : true; 67 68 is(aElement.validity.valid, aValidity, 69 "element validity should be " + aValidity); 70 is(aElement.validity.rangeOverflow, !aValidity, 71 "element overflow status should be " + !aValidity); 72 var overflowMsg = 73 (aElement.type == "date" || aElement.type == "time" || 74 aElement.type == "month" || aElement.type == "week" || 75 aElement.type == "datetime-local") ? 76 ("Please select a value that is no later than " + aElement.max + ".") : 77 ("Please select a value that is no more than " + aElement.max + "."); 78 is(aElement.validationMessage, 79 aValidity ? "" : overflowMsg, "Checking range overflow validation message"); 80 81 is(aElement.matches(":valid"), aElement.willValidate && aValidity, 82 (aElement.willValidate && aValidity) ? ":valid should apply" : "valid shouldn't apply"); 83 is(aElement.matches(":invalid"), aElement.willValidate && !aValidity, 84 (aElement.wil && aValidity) ? ":invalid shouldn't apply" : "valid should apply"); 85 86 if (!aRangeApply) { 87 ok(!aElement.matches(":in-range"), ":in-range should not match"); 88 ok(!aElement.matches(":out-of-range"), 89 ":out-of-range should not match"); 90 } else { 91 is(aElement.matches(":in-range"), aValidity, 92 ":in-range matches status should be " + aValidity); 93 is(aElement.matches(":out-of-range"), !aValidity, 94 ":out-of-range matches status should be " + !aValidity); 95 } 96 } 97 98 for (var test of data) { 99 input.type = test.type; 100 var apply = test.apply; 101 102 // The element should be valid. Range should not apply when @min and @max are 103 // undefined, except if the input type is 'range' (since that type has a 104 // default minimum and maximum). 105 if (input.type == 'range') { 106 checkValidity(input, true, apply, true); 107 } else { 108 checkValidity(input, true, apply, false); 109 } 110 checkValidity(input, true, apply, test.type == 'range'); 111 112 switch (input.type) { 113 case 'hidden': 114 case 'text': 115 case 'search': 116 case 'password': 117 case 'url': 118 case 'tel': 119 case 'email': 120 case 'number': 121 case 'checkbox': 122 case 'radio': 123 case 'file': 124 case 'submit': 125 case 'reset': 126 case 'button': 127 case 'image': 128 case 'color': 129 input.max = '-1'; 130 break; 131 case 'date': 132 input.max = '2012-06-27'; 133 break; 134 case 'time': 135 input.max = '02:20'; 136 break; 137 case 'range': 138 // range is special, since setting max to -1 will make it invalid since 139 // it's default would then be 0, meaning it suffers from overflow. 140 input.max = '-1'; 141 checkValidity(input, false, apply, apply); 142 // Now make it something that won't cause an error below: 143 input.max = '10'; 144 break; 145 case 'month': 146 input.max = '2016-12'; 147 break; 148 case 'week': 149 input.max = '2016-W39'; 150 break; 151 case 'datetime-local': 152 input.max = '2016-12-31T23:59:59'; 153 break; 154 default: 155 ok(false, 'please, add a case for this new type (' + input.type + ')'); 156 } 157 158 checkValidity(input, true, apply, apply); 159 160 switch (input.type) { 161 case 'text': 162 case 'hidden': 163 case 'search': 164 case 'password': 165 case 'tel': 166 case 'radio': 167 case 'checkbox': 168 case 'reset': 169 case 'button': 170 case 'submit': 171 case 'image': 172 input.value = '0'; 173 checkValidity(input, true, apply, apply); 174 break; 175 case 'url': 176 input.value = 'http://mozilla.org'; 177 checkValidity(input, true, apply, apply); 178 break; 179 case 'email': 180 input.value = 'foo@bar.com'; 181 checkValidity(input, true, apply, apply); 182 break; 183 case 'file': 184 var file = new File([''], '635499_file'); 185 186 SpecialPowers.wrap(input).mozSetFileArray([file]); 187 checkValidity(input, true, apply, apply); 188 189 break; 190 case 'date': 191 input.max = '2012-06-27'; 192 input.value = '2012-06-26'; 193 checkValidity(input, true, apply, apply); 194 195 input.value = '2012-06-27'; 196 checkValidity(input, true, apply, apply); 197 198 input.value = 'foo'; 199 checkValidity(input, true, apply, apply); 200 201 input.value = '2012-06-28'; 202 checkValidity(input, false, apply, apply); 203 204 input.max = '2012-06-30'; 205 checkValidity(input, true, apply, apply); 206 207 input.value = '2012-07-05'; 208 checkValidity(input, false, apply, apply); 209 210 input.value = '1000-01-01'; 211 checkValidity(input, true, apply, apply); 212 213 input.value = '20120-01-01'; 214 checkValidity(input, false, apply, apply); 215 216 input.max = '0050-01-01'; 217 checkValidity(input, false, apply, apply); 218 219 input.value = '0049-01-01'; 220 checkValidity(input, true, apply, apply); 221 222 input.max = ''; 223 checkValidity(input, true, apply, false); 224 225 input.max = 'foo'; 226 checkValidity(input, true, apply, false); 227 228 break; 229 case 'number': 230 input.max = '2'; 231 input.value = '1'; 232 checkValidity(input, true, apply, apply); 233 234 input.value = '2'; 235 checkValidity(input, true, apply, apply); 236 237 input.value = 'foo'; 238 checkValidity(input, true, apply, apply); 239 240 input.value = '3'; 241 checkValidity(input, false, apply, apply); 242 243 input.max = '5'; 244 checkValidity(input, true, apply, apply); 245 246 input.value = '42'; 247 checkValidity(input, false, apply, apply); 248 249 input.max = ''; 250 checkValidity(input, true, apply, false); 251 252 input.max = 'foo'; 253 checkValidity(input, true, apply, false); 254 255 // Check that we correctly convert input.max to a double in validationMessage. 256 if (input.type == 'number') { 257 input.max = "4.333333333333333333333333333333333331"; 258 input.value = "5"; 259 is(input.validationMessage, 260 "Please select a value that is no more than 4.33333333333333.", 261 "validation message"); 262 } 263 264 break; 265 case 'range': 266 input.max = '2'; 267 input.value = '1'; 268 checkValidity(input, true, apply, apply); 269 270 input.value = '2'; 271 checkValidity(input, true, apply, apply); 272 273 input.value = 'foo'; 274 checkValidity(input, true, apply, apply); 275 276 input.value = '3'; 277 checkValidity(input, true, apply, apply); 278 279 is(input.value, input.max, "the value should have been set to max"); 280 281 input.max = '5'; 282 checkValidity(input, true, apply, apply); 283 284 input.value = '42'; 285 checkValidity(input, true, apply, apply); 286 287 is(input.value, input.max, "the value should have been set to max"); 288 289 input.max = ''; 290 checkValidity(input, true, apply, apply); 291 292 input.max = 'foo'; 293 checkValidity(input, true, apply, apply); 294 295 // Check that we correctly convert input.max to a double in validationMessage. 296 input.step = 'any'; 297 input.min = 5; 298 input.max = 0.6666666666666666; 299 input.value = 1; 300 is(input.validationMessage, 301 "Please select a value that is no more than 0.666666666666667.", 302 "validation message") 303 304 break; 305 case 'time': 306 // Don't worry about that. 307 input.step = 'any'; 308 309 input.max = '10:10'; 310 input.value = '10:09'; 311 checkValidity(input, true, apply, apply); 312 313 input.value = '10:10'; 314 checkValidity(input, true, apply, apply); 315 316 input.value = '10:10:00'; 317 checkValidity(input, true, apply, apply); 318 319 input.value = '10:10:00.000'; 320 checkValidity(input, true, apply, apply); 321 322 input.value = 'foo'; 323 checkValidity(input, true, apply, apply); 324 325 input.value = '10:11'; 326 checkValidity(input, false, apply, apply); 327 328 input.value = '10:10:00.001'; 329 checkValidity(input, false, apply, apply); 330 331 input.max = '01:00:00.01'; 332 input.value = '01:00:00.001'; 333 checkValidity(input, true, apply, apply); 334 335 input.value = '01:00:00'; 336 checkValidity(input, true, apply, apply); 337 338 input.value = '01:00:00.1'; 339 checkValidity(input, false, apply, apply); 340 341 input.max = ''; 342 checkValidity(input, true, apply, false); 343 344 input.max = 'foo'; 345 checkValidity(input, true, apply, false); 346 347 break; 348 case 'month': 349 input.value = '2016-06'; 350 checkValidity(input, true, apply, apply); 351 352 input.value = '2016-12'; 353 checkValidity(input, true, apply, apply); 354 355 input.value = 'foo'; 356 checkValidity(input, true, apply, apply); 357 358 input.value = '2017-01'; 359 checkValidity(input, false, apply, apply); 360 361 input.max = '2017-07'; 362 checkValidity(input, true, apply, apply); 363 364 input.value = '2017-12'; 365 checkValidity(input, false, apply, apply); 366 367 input.value = '1000-01'; 368 checkValidity(input, true, apply, apply); 369 370 input.value = '20160-01'; 371 checkValidity(input, false, apply, apply); 372 373 input.max = '0050-01'; 374 checkValidity(input, false, apply, apply); 375 376 input.value = '0049-12'; 377 checkValidity(input, true, apply, apply); 378 379 input.max = ''; 380 checkValidity(input, true, apply, false); 381 382 input.max = 'foo'; 383 checkValidity(input, true, apply, false); 384 385 break; 386 case 'week': 387 input.value = '2016-W01'; 388 checkValidity(input, true, apply, apply); 389 390 input.value = '2016-W39'; 391 checkValidity(input, true, apply, apply); 392 393 input.value = 'foo'; 394 checkValidity(input, true, apply, apply); 395 396 input.value = '2017-W01'; 397 checkValidity(input, false, apply, apply); 398 399 input.max = '2017-W01'; 400 checkValidity(input, true, apply, apply); 401 402 input.value = '2017-W52'; 403 checkValidity(input, false, apply, apply); 404 405 input.value = '1000-W01'; 406 checkValidity(input, true, apply, apply); 407 408 input.value = '2100-W01'; 409 checkValidity(input, false, apply, apply); 410 411 input.max = '0050-W01'; 412 checkValidity(input, false, apply, apply); 413 414 input.value = '0049-W52'; 415 checkValidity(input, true, apply, apply); 416 417 input.max = ''; 418 checkValidity(input, true, apply, false); 419 420 input.max = 'foo'; 421 checkValidity(input, true, apply, false); 422 423 break; 424 case 'datetime-local': 425 input.value = '2016-01-01T12:00'; 426 checkValidity(input, true, apply, apply); 427 428 input.value = '2016-12-31T23:59:59'; 429 checkValidity(input, true, apply, apply); 430 431 input.value = 'foo'; 432 checkValidity(input, true, apply, apply); 433 434 input.value = '2016-12-31T23:59:59.123'; 435 checkValidity(input, false, apply, apply); 436 437 input.value = '2017-01-01T10:00'; 438 checkValidity(input, false, apply, apply); 439 440 input.max = '2017-01-01T10:00'; 441 checkValidity(input, true, apply, apply); 442 443 input.value = '2017-01-01T10:00:30'; 444 checkValidity(input, false, apply, apply); 445 446 input.value = '1000-01-01T12:00'; 447 checkValidity(input, true, apply, apply); 448 449 input.value = '2100-01-01T12:00'; 450 checkValidity(input, false, apply, apply); 451 452 input.max = '0050-12-31T23:59:59.999'; 453 checkValidity(input, false, apply, apply); 454 455 input.value = '0050-12-31T23:59:59'; 456 checkValidity(input, true, apply, apply); 457 458 input.max = ''; 459 checkValidity(input, true, apply, false); 460 461 input.max = 'foo'; 462 checkValidity(input, true, apply, false); 463 464 break; 465 } 466 467 // Cleaning up, 468 input.removeAttribute('max'); 469 input.value = ''; 470 } 471 472 </script> 473 </pre> 474 </body> 475 </html>