123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475 |
- <!DOCTYPE HTML>
- <html>
- <!--
- https://bugzilla.mozilla.org/show_bug.cgi?id=635499
- -->
- <head>
- <title>Test for Bug 635499</title>
- <script type="application/javascript" src="/MochiKit/packed.js"></script>
- <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
- <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
- </head>
- <body>
- <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=635499">Mozilla Bug 635499</a>
- <p id="display"></p>
- <div id="content" style="display: none">
- </div>
- <pre id="test">
- <script type="application/javascript">
- /** Test for Bug 635499 **/
- var data = [
- { type: 'hidden', apply: false },
- { type: 'text', apply: false },
- { type: 'search', apply: false },
- { type: 'tel', apply: false },
- { type: 'url', apply: false },
- { type: 'email', apply: false },
- { type: 'password', apply: false },
- { type: 'date', apply: true },
- { type: 'month', apply: true },
- { type: 'week', apply: true },
- { type: 'time', apply: true },
- { type: 'datetime-local', apply: true },
- { type: 'number', apply: true },
- { type: 'range', apply: true },
- { type: 'color', apply: false },
- { type: 'checkbox', apply: false },
- { type: 'radio', apply: false },
- { type: 'file', apply: false },
- { type: 'submit', apply: false },
- { type: 'image', apply: false },
- { type: 'reset', apply: false },
- { type: 'button', apply: false },
- ];
- var input = document.createElement("input");
- document.getElementById('content').appendChild(input);
- /**
- * @aValidity - boolean indicating whether the element is expected to be valid
- * (aElement.validity.valid is true) or not. The value passed is ignored and
- * overridden with true if aApply is false.
- * @aApply - boolean indicating whether the min/max attributes apply to this
- * element type.
- * @aRangeApply - A boolean that's set to true if the current input type is a
- * "[candidate] for constraint validation" and it "[has] range limitations"
- * per http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-in-range
- * (in other words, one of the pseudo classes :in-range and :out-of-range
- * should apply (which, depends on aValidity)).
- * Else (neither :in-range or :out-of-range should match) set to false.
- */
- function checkValidity(aElement, aValidity, aApply, aRangeApply)
- {
- aValidity = aApply ? aValidity : true;
- is(aElement.validity.valid, aValidity,
- "element validity should be " + aValidity);
- is(aElement.validity.rangeOverflow, !aValidity,
- "element overflow status should be " + !aValidity);
- var overflowMsg =
- (aElement.type == "date" || aElement.type == "time" ||
- aElement.type == "month" || aElement.type == "week" ||
- aElement.type == "datetime-local") ?
- ("Please select a value that is no later than " + aElement.max + ".") :
- ("Please select a value that is no more than " + aElement.max + ".");
- is(aElement.validationMessage,
- aValidity ? "" : overflowMsg, "Checking range overflow validation message");
- is(aElement.matches(":valid"), aElement.willValidate && aValidity,
- (aElement.willValidate && aValidity) ? ":valid should apply" : "valid shouldn't apply");
- is(aElement.matches(":invalid"), aElement.willValidate && !aValidity,
- (aElement.wil && aValidity) ? ":invalid shouldn't apply" : "valid should apply");
- if (!aRangeApply) {
- ok(!aElement.matches(":in-range"), ":in-range should not match");
- ok(!aElement.matches(":out-of-range"),
- ":out-of-range should not match");
- } else {
- is(aElement.matches(":in-range"), aValidity,
- ":in-range matches status should be " + aValidity);
- is(aElement.matches(":out-of-range"), !aValidity,
- ":out-of-range matches status should be " + !aValidity);
- }
- }
- for (var test of data) {
- input.type = test.type;
- var apply = test.apply;
- // The element should be valid. Range should not apply when @min and @max are
- // undefined, except if the input type is 'range' (since that type has a
- // default minimum and maximum).
- if (input.type == 'range') {
- checkValidity(input, true, apply, true);
- } else {
- checkValidity(input, true, apply, false);
- }
- checkValidity(input, true, apply, test.type == 'range');
- switch (input.type) {
- case 'hidden':
- case 'text':
- case 'search':
- case 'password':
- case 'url':
- case 'tel':
- case 'email':
- case 'number':
- case 'checkbox':
- case 'radio':
- case 'file':
- case 'submit':
- case 'reset':
- case 'button':
- case 'image':
- case 'color':
- input.max = '-1';
- break;
- case 'date':
- input.max = '2012-06-27';
- break;
- case 'time':
- input.max = '02:20';
- break;
- case 'range':
- // range is special, since setting max to -1 will make it invalid since
- // it's default would then be 0, meaning it suffers from overflow.
- input.max = '-1';
- checkValidity(input, false, apply, apply);
- // Now make it something that won't cause an error below:
- input.max = '10';
- break;
- case 'month':
- input.max = '2016-12';
- break;
- case 'week':
- input.max = '2016-W39';
- break;
- case 'datetime-local':
- input.max = '2016-12-31T23:59:59';
- break;
- default:
- ok(false, 'please, add a case for this new type (' + input.type + ')');
- }
- checkValidity(input, true, apply, apply);
- switch (input.type) {
- case 'text':
- case 'hidden':
- case 'search':
- case 'password':
- case 'tel':
- case 'radio':
- case 'checkbox':
- case 'reset':
- case 'button':
- case 'submit':
- case 'image':
- input.value = '0';
- checkValidity(input, true, apply, apply);
- break;
- case 'url':
- input.value = 'http://mozilla.org';
- checkValidity(input, true, apply, apply);
- break;
- case 'email':
- input.value = 'foo@bar.com';
- checkValidity(input, true, apply, apply);
- break;
- case 'file':
- var file = new File([''], '635499_file');
- SpecialPowers.wrap(input).mozSetFileArray([file]);
- checkValidity(input, true, apply, apply);
- break;
- case 'date':
- input.max = '2012-06-27';
- input.value = '2012-06-26';
- checkValidity(input, true, apply, apply);
- input.value = '2012-06-27';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '2012-06-28';
- checkValidity(input, false, apply, apply);
- input.max = '2012-06-30';
- checkValidity(input, true, apply, apply);
- input.value = '2012-07-05';
- checkValidity(input, false, apply, apply);
- input.value = '1000-01-01';
- checkValidity(input, true, apply, apply);
- input.value = '20120-01-01';
- checkValidity(input, false, apply, apply);
- input.max = '0050-01-01';
- checkValidity(input, false, apply, apply);
- input.value = '0049-01-01';
- checkValidity(input, true, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- break;
- case 'number':
- input.max = '2';
- input.value = '1';
- checkValidity(input, true, apply, apply);
- input.value = '2';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '3';
- checkValidity(input, false, apply, apply);
- input.max = '5';
- checkValidity(input, true, apply, apply);
- input.value = '42';
- checkValidity(input, false, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- // Check that we correctly convert input.max to a double in validationMessage.
- if (input.type == 'number') {
- input.max = "4.333333333333333333333333333333333331";
- input.value = "5";
- is(input.validationMessage,
- "Please select a value that is no more than 4.33333333333333.",
- "validation message");
- }
- break;
- case 'range':
- input.max = '2';
- input.value = '1';
- checkValidity(input, true, apply, apply);
- input.value = '2';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '3';
- checkValidity(input, true, apply, apply);
- is(input.value, input.max, "the value should have been set to max");
- input.max = '5';
- checkValidity(input, true, apply, apply);
- input.value = '42';
- checkValidity(input, true, apply, apply);
- is(input.value, input.max, "the value should have been set to max");
- input.max = '';
- checkValidity(input, true, apply, apply);
- input.max = 'foo';
- checkValidity(input, true, apply, apply);
- // Check that we correctly convert input.max to a double in validationMessage.
- input.step = 'any';
- input.min = 5;
- input.max = 0.66666666666666666666666666666666666
- input.value = 1;
- is(input.validationMessage,
- "Please select a value that is no more than 0.666666666666667.",
- "validation message")
- break;
- case 'time':
- // Don't worry about that.
- input.step = 'any';
- input.max = '10:10';
- input.value = '10:09';
- checkValidity(input, true, apply, apply);
- input.value = '10:10';
- checkValidity(input, true, apply, apply);
- input.value = '10:10:00';
- checkValidity(input, true, apply, apply);
- input.value = '10:10:00.000';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '10:11';
- checkValidity(input, false, apply, apply);
- input.value = '10:10:00.001';
- checkValidity(input, false, apply, apply);
- input.max = '01:00:00.01';
- input.value = '01:00:00.001';
- checkValidity(input, true, apply, apply);
- input.value = '01:00:00';
- checkValidity(input, true, apply, apply);
- input.value = '01:00:00.1';
- checkValidity(input, false, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- break;
- case 'month':
- input.value = '2016-06';
- checkValidity(input, true, apply, apply);
- input.value = '2016-12';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '2017-01';
- checkValidity(input, false, apply, apply);
- input.max = '2017-07';
- checkValidity(input, true, apply, apply);
- input.value = '2017-12';
- checkValidity(input, false, apply, apply);
- input.value = '1000-01';
- checkValidity(input, true, apply, apply);
- input.value = '20160-01';
- checkValidity(input, false, apply, apply);
- input.max = '0050-01';
- checkValidity(input, false, apply, apply);
- input.value = '0049-12';
- checkValidity(input, true, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- break;
- case 'week':
- input.value = '2016-W01';
- checkValidity(input, true, apply, apply);
- input.value = '2016-W39';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '2017-W01';
- checkValidity(input, false, apply, apply);
- input.max = '2017-W01';
- checkValidity(input, true, apply, apply);
- input.value = '2017-W52';
- checkValidity(input, false, apply, apply);
- input.value = '1000-W01';
- checkValidity(input, true, apply, apply);
- input.value = '2100-W01';
- checkValidity(input, false, apply, apply);
- input.max = '0050-W01';
- checkValidity(input, false, apply, apply);
- input.value = '0049-W52';
- checkValidity(input, true, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- break;
- case 'datetime-local':
- input.value = '2016-01-01T12:00';
- checkValidity(input, true, apply, apply);
- input.value = '2016-12-31T23:59:59';
- checkValidity(input, true, apply, apply);
- input.value = 'foo';
- checkValidity(input, true, apply, apply);
- input.value = '2016-12-31T23:59:59.123';
- checkValidity(input, false, apply, apply);
- input.value = '2017-01-01T10:00';
- checkValidity(input, false, apply, apply);
- input.max = '2017-01-01T10:00';
- checkValidity(input, true, apply, apply);
- input.value = '2017-01-01T10:00:30';
- checkValidity(input, false, apply, apply);
- input.value = '1000-01-01T12:00';
- checkValidity(input, true, apply, apply);
- input.value = '2100-01-01T12:00';
- checkValidity(input, false, apply, apply);
- input.max = '0050-12-31T23:59:59.999';
- checkValidity(input, false, apply, apply);
- input.value = '0050-12-31T23:59:59';
- checkValidity(input, true, apply, apply);
- input.max = '';
- checkValidity(input, true, apply, false);
- input.max = 'foo';
- checkValidity(input, true, apply, false);
- break;
- }
- // Cleaning up,
- input.removeAttribute('max');
- input.value = '';
- }
- </script>
- </pre>
- </body>
- </html>
|