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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Tests for HTMLTextAreaElement.maxLength behaviors.');
var textArea = document.createElement('textarea');
document.body.appendChild(textArea);
// No maxlength attribute
shouldBe('textArea.maxLength', '-1');
// Invalid maxlength attributes
textArea.setAttribute('maxlength', '-3');
shouldBe('textArea.maxLength', '-1');
textArea.setAttribute('maxlength', 'xyz');
shouldBe('textArea.maxLength', '-1');
// Leading whitespaces in maxlength attributes
textArea.setAttribute('maxlength', '\t \n\r1');
shouldBe('textArea.maxLength', '1');
textArea.setAttribute('maxlength', "\u20021");
shouldBe('textArea.maxLength', '-1');
textArea.setAttribute('maxlength', "\u20091");
shouldBe('textArea.maxLength', '-1');
// Valid maxlength attributes
textArea.setAttribute('maxlength', '1');
shouldBe('textArea.maxLength', '1');
textArea.setAttribute('maxlength', '256');
shouldBe('textArea.maxLength', '256');
// Set values to .maxLength
textArea.maxLength = 13;
shouldBe('textArea.getAttribute("maxlength")', '"13"');
shouldThrow('textArea.maxLength = -1', '"IndexSizeError: Failed to set the \'maxLength\' property on \'HTMLTextAreaElement\': The value provided (-1) is not positive or 0."');
shouldBe('textArea.getAttribute("maxlength")', '"13"'); // Not changed
textArea.minLength = 11;
shouldThrow('textArea.maxLength = 10', '"IndexSizeError: Failed to set the \'maxLength\' property on \'HTMLTextAreaElement\': The maxLength provided (10) is less than the minimum bound (11)."');
shouldBe('textArea.getAttribute("maxlength")', '"13"'); // Not changed
shouldBe('textArea.maxLength = 11; textArea.getAttribute("maxlength")', '"11"');
textArea.minLength = 0; // Remove the minlength value to get it out of the way of subsequent tests
textArea.maxLength = null;
shouldBe('textArea.maxLength', '0');
shouldBe('textArea.getAttribute("maxlength")', '"0"');
// maxLength doesn't truncate the default value.
textArea = document.createElement('textarea');
textArea.setAttribute('maxlength', '3');
textArea.innerHTML = 'abcd';
document.body.appendChild(textArea);
shouldBe('textArea.value', '"abcd"');
// maxLength doesn't truncate .value
textArea.maxLength = 3;
textArea.value = 'abcde';
shouldBe('textArea.value', '"abcde"');
// Set up for user-input tests
function createFocusedTextAreaWithMaxLength(maxLength) {
if (textArea)
document.body.removeChild(textArea);
textArea = document.createElement('textarea');
textArea.setAttribute('maxlength', maxLength);
document.body.appendChild(textArea);
textArea.focus();
}
// Insert text of which length is maxLength.
createFocusedTextAreaWithMaxLength(3);
document.execCommand('insertText', false, 'abc');
shouldBe('textArea.value', '"abc"');
// Try to add characters to maxLength characters.
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'abc';
document.execCommand('insertText', false, 'def');
shouldBe('textArea.value', '"abc"');
// Replace text
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'abc';
document.execCommand('selectAll');
document.execCommand('insertText', false, 'def');
shouldBe('textArea.value', '"def"');
// Existing value is longer than maxLength. We can't add text.
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'abcdef';
document.execCommand('insertText', false, 'ghi');
shouldBe('textArea.value', '"abcdef"');
// We can delete a character in the longer value.
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'abcdef';
document.execCommand('delete');
shouldBe('textArea.value', '"abcde"');
// A linebreak is 1 character.
createFocusedTextAreaWithMaxLength(4);
document.execCommand('insertText', false, 'A');
document.execCommand('insertLineBreak');
document.execCommand('insertText', false, 'B');
shouldBe('textArea.value', '"A\\nB"');
// Confirms correct count for close linebreaks inputs.
createFocusedTextAreaWithMaxLength(3);
textArea.innerHTML = 'a\n\n';
document.execCommand('insertLineBreak');
shouldBe('textArea.value', '"a\\n\\n"');
// Confirms correct count for open consecutive linebreaks inputs.
createFocusedTextAreaWithMaxLength(6);
document.execCommand('insertLineBreak');
document.execCommand('insertLineBreak');
document.execCommand('insertLineBreak');
document.execCommand('insertLineBreak');
shouldBe('textArea.value', '"\\n\\n\\n"');
// According to the HTML5 specification, maxLength is code-point length.
// Blink follows it though WebKit handles it as grapheme length.
// fancyX should be treated as 1 grapheme.
var fancyX = "x\u0305\u0332";// + String.fromCharCode(0x305) + String.fromCharCode(0x332);
// u10000 is one character consisted of a surrogate pair.
var u10000 = "\ud800\udc00";
debug('Inserts 2 normal characters + a combining letter with 3 code points into a maxlength=3 element.')
createFocusedTextAreaWithMaxLength(3);
document.execCommand('insertText', false, 'AB' + fancyX);
shouldBeEqualToString('textArea.value', 'ABx');
shouldBe('textArea.value.length', '3');
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'AB' + fancyX;
textArea.setSelectionRange(2, 5); // Select fancyX
document.execCommand('insertText', false, 'CDE');
shouldBe('textArea.value', '"ABC"');
debug('Inserts 2 normal characters + one surrogate pair into a maxlength=3 element');
createFocusedTextAreaWithMaxLength(3);
document.execCommand('insertText', false, 'AB' + u10000);
shouldBeEqualToString('textArea.value', 'AB');
shouldBe('textArea.value.length', '2');
createFocusedTextAreaWithMaxLength(3);
textArea.value = 'AB' + u10000;
textArea.setSelectionRange(2, 4); // Select u10000
document.execCommand('insertText', false, 'CDE');
shouldBe('textArea.value', '"ABC"');
// In the case maxlength=0
createFocusedTextAreaWithMaxLength(0);
textArea.value = '';
document.execCommand('insertText', false, 'ABC');
shouldBe('textArea.value', '""');
// In the case maxlength=''
createFocusedTextAreaWithMaxLength('');
textArea.value = '';
document.execCommand('insertText', false, 'ABC');
shouldBe('textArea.value', '"ABC"');
// In the case maxlength='invalid'
createFocusedTextAreaWithMaxLength('invalid');
textArea.value = '';
document.execCommand('insertText', false, 'ABC');
shouldBe('textArea.value', '"ABC"');
</script>
</body>
</html>
|
