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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=345624
-->
<head>
<title>Test for Bug 345624</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
input, textarea { background-color: rgb(0,0,0) !important; }
:-moz-any(input,textarea):valid { background-color: rgb(0,255,0) !important; }
:-moz-any(input,textarea):invalid { background-color: rgb(255,0,0) !important; }
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=345624">Mozilla Bug 345624</a>
<p id="display"></p>
<div id="content">
<input id='i'>
<textarea id='t'></textarea>
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 345624 **/
/**
* This test is checking only tooShort related features
* related to constraint validation.
*/
function checkTooShortValidity(element)
{
element.value = "foo";
ok(!element.validity.tooShort,
"Element should not be too short when minlength is not set");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
ok(element.checkValidity(), "The element should be valid");
element.minLength = 5;
ok(!element.validity.tooShort,
"Element should not be too short unless the user edits it");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
ok(element.checkValidity(), "The element should be valid");
element.focus();
synthesizeKey("o", {});
is(element.value, "fooo", "value should have changed");
ok(element.validity.tooShort,
"Element should be too short after a user edit that does not make it short enough");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(255, 0, 0)", ":invalid pseudo-class should apply");
ok(!element.validity.valid, "Element should be invalid");
ok(!element.checkValidity(), "The element should not be valid");
is(element.validationMessage,
"Please use at least 5 characters (you are currently using 4 characters).",
"The validation message text is not correct");
synthesizeKey("o", {});
is(element.value, "foooo", "value should have changed");
ok(!element.validity.tooShort,
"Element should not be too short after a user edit makes it long enough");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
element.minLength = 2;
ok(!element.validity.tooShort,
"Element should remain valid if minlength changes but minlength < length");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
element.minLength = 1;
ok(!element.validity.tooShort,
"Element should remain valid if minlength changes but minlength = length");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
ok(element.checkValidity(), "The element should be valid");
element.minLength = 6;
ok(element.validity.tooShort,
"Element should become invalid if minlength changes and minlength > length");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(255, 0, 0)", ":invalid pseudo-class should apply");
ok(!element.validity.valid, "Element should be invalid");
ok(!element.checkValidity(), "The element should not be valid");
is(element.validationMessage,
"Please use at least 6 characters (you are currently using 5 characters).",
"The validation message text is not correct");
element.minLength = 5;
ok(!element.validity.tooShort,
"Element should become valid if minlength changes and minlength = length");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
ok(element.checkValidity(), "The element should be valid");
element.value = "test";
ok(!element.validity.tooShort,
"Element should stay valid after programmatic edit (even if value is too short)");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(0, 255, 0)", ":valid pseudo-class should apply");
ok(element.validity.valid, "Element should be valid");
ok(element.checkValidity(), "The element should be valid");
element.setCustomValidity("custom message");
is(window.getComputedStyle(element, null).getPropertyValue('background-color'),
"rgb(255, 0, 0)", ":invalid pseudo-class should apply");
is(element.validationMessage, "custom message",
"Custom message should be shown instead of too short one");
}
checkTooShortValidity(document.getElementById('i'));
checkTooShortValidity(document.getElementById('t'));
</script>
</pre>
</body>
</html>
|
