<!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>