1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=827161
-->
<head>
<title>Test validation of number control input</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="test_input_number_data.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<meta charset="UTF-8">
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=827161">Mozilla Bug 827161</a>
<p id="display"></p>
<div id="content">
<input id="input" type="number" step="0.01" oninvalid="invalidEventHandler(event);">
<input id="requiredinput" type="number" step="0.01" required
oninvalid="invalidEventHandler(event);">
</div>
<pre id="test">
<script type="application/javascript">
/**
* Test for Bug 827161.
* This test checks that validation works correctly for <input type=number>.
**/
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
startTests();
SimpleTest.finish();
});
var elem;
function runTest(test) {
elem.lang = test.langTag;
gInvalid = false; // reset
var desc = `${test.desc} (lang='${test.langTag}', id='${elem.id}')`;
elem.value = 0;
elem.focus();
elem.select();
sendString(test.inputWithGrouping);
checkIsInvalid(elem, `${desc} with grouping separator`);
sendChar("a");
checkIsInvalid(elem, `${desc} with grouping separator`);
gInvalid = false; // reset
elem.value = 0;
elem.select();
sendString(test.inputWithoutGrouping);
checkIsValid(elem, `${desc} without grouping separator`);
sendChar("a");
checkIsInvalid(elem, `${desc} without grouping separator`);
}
function runInvalidInputTest(test) {
elem.lang = test.langTag;
gInvalid = false; // reset
var desc = `${test.desc} (lang='${test.langTag}', id='${elem.id}')`;
elem.value = 0;
elem.focus();
elem.select();
sendString(test.input);
checkIsInvalid(elem, `${desc} with invalid input ${test.input}`);
}
function startTests() {
elem = document.getElementById("input");
for (var test of tests) {
runTest(test);
}
for (var test of invalidTests) {
runInvalidInputTest(test);
}
elem = document.getElementById("requiredinput");
for (var test of tests) {
runTest(test);
}
gInvalid = false; // reset
elem.value = "";
checkIsInvalidEmptyValue(elem, "empty value");
}
var gInvalid = false;
function invalidEventHandler(e)
{
is(e.type, "invalid", "Invalid event type should be 'invalid'");
gInvalid = true;
}
function checkIsValid(element, infoStr)
{
ok(!element.validity.badInput,
"Element should not suffer from bad input for " + infoStr);
ok(element.validity.valid, "Element should be valid for " + infoStr);
ok(element.checkValidity(), "checkValidity() should return true for " + infoStr);
ok(!gInvalid, "The invalid event should not have been thrown for " + infoStr);
is(element.validationMessage, '',
"Validation message should be the empty string for " + infoStr);
ok(element.matches(":valid"), ":valid pseudo-class should apply for " + infoStr);
}
function checkIsInvalid(element, infoStr)
{
ok(element.validity.badInput,
"Element should suffer from bad input for " + infoStr);
ok(!element.validity.valid, "Element should not be valid for " + infoStr);
ok(!element.checkValidity(), "checkValidity() should return false for " + infoStr);
ok(gInvalid, "The invalid event should have been thrown for " + infoStr);
is(element.validationMessage, "Please enter a number.",
"Validation message is not the expected message for " + infoStr);
ok(element.matches(":invalid"), ":invalid pseudo-class should apply for " + infoStr);
}
function checkIsInvalidEmptyValue(element, infoStr)
{
ok(!element.validity.badInput,
"Element should not suffer from bad input for " + infoStr);
ok(element.validity.valueMissing,
"Element should suffer from value missing for " + infoStr);
ok(!element.validity.valid, "Element should not be valid for " + infoStr);
ok(!element.checkValidity(), "checkValidity() should return false for " + infoStr);
ok(gInvalid, "The invalid event should have been thrown for " + infoStr);
is(element.validationMessage, "Please enter a number.",
"Validation message is not the expected message for " + infoStr);
ok(element.matches(":invalid"), ":invalid pseudo-class should apply for " + infoStr);
}
</script>
</pre>
</body>
</html>
|
