1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
4 <script src="../../resources/js-test.js"></script>
7 <p id="description"></p>
8 <div id="console"></div>
10 description('Tests for tooLong flag with <input> elements.');
12 var input = document.createElement('input');
13 document.body.appendChild(input);
15 debug('No maxlength and no value');
16 shouldBeFalse('input.validity.tooLong');
19 debug('Non-dirty value');
20 input.setAttribute('value', 'abcde');
22 shouldBe('input.value.length', '5');
23 shouldBeFalse('input.validity.tooLong');
25 input.setAttribute('value', 'abcdef');
26 shouldBe('input.value.length', '6');
27 shouldBeFalse('input.validity.tooLong');
30 debug('Dirty value and longer than maxLength');
31 input = document.createElement('input');
32 document.body.appendChild(input);
33 input.setAttribute('value', 'abcde');
36 input.setSelectionRange(5, 5); // Move the cursor at the end.
37 document.execCommand('delete');
38 shouldBe('input.value.length', '4');
39 shouldBeTrue('input.validity.tooLong');
40 // Make the value <=maxLength.
41 document.execCommand('delete');
42 shouldBeFalse('input.validity.tooLong');
45 debug('Sets a value via DOM property');
47 input.value = 'abcde';
48 shouldBeFalse('input.validity.tooLong');
51 debug('Disabling makes the control valid');
53 input.setSelectionRange(5, 5); // Move the cursor at the end.
54 document.execCommand('delete');
55 shouldBeTrue('input.validity.tooLong');
56 shouldBeFalse('input.disabled = true; input.validity.tooLong');
57 shouldBeTrue('input.disabled = false; input.validity.tooLong');
59 // FIXME: The grapheme test below doesn't do its job because initial value is
60 // always valid. After making a modificaton to trigger validity check, one can
61 // see that the test would fail, which possibly reveals a code issue.
62 // https://code.google.com/p/chromium/issues/detail?id=421727
63 // Once this is figured out, implement a similar test in
64 // ValidityState-tooShort-input.html
66 debug('Grapheme length is not greater than maxLength though character length is greater');
67 // fancyX should be treated as 1 grapheme.
68 // U+0305 COMBINING OVERLINE
69 // U+0332 COMBINING LOW LINE
70 var fancyX = "x\u0305\u0332";
71 input = document.createElement('input');
72 document.body.appendChild(input);
73 input.value = fancyX; // 3 characters, 1 grapheme clusters.
75 shouldBeFalse('input.validity.tooLong');
78 debug('Change the type with a too long value');
80 input.value = 'abcde';
81 input.type = 'search';
83 input.setSelectionRange(5, 5);
84 document.execCommand('delete');
85 shouldBeTrue('input.validity.tooLong');
86 shouldBeFalse('input.type = "number"; input.validity.tooLong');
90 debug('minlength and maxlength together');
93 input.value = 'abcde';
95 input.setSelectionRange(5, 5);
96 document.execCommand('delete');
97 shouldBeTrue('input.validity.tooLong');
98 shouldBeFalse('input.validity.tooShort');
99 document.execCommand('delete');
100 shouldBeFalse('input.validity.tooLong');
101 shouldBeFalse('input.validity.tooShort');
102 document.execCommand('delete');
103 shouldBeFalse('input.validity.tooLong');
104 shouldBeTrue('input.validity.tooShort');
107 debug('minlength and maxlength clashing');
108 input.setAttribute('maxlength', '2');
109 input.setAttribute('minlength', '4');
110 input.value = 'abcde';
112 input.setSelectionRange(5, 5);
113 document.execCommand('delete');
114 shouldBeTrue('input.validity.tooLong');
115 shouldBeFalse('input.validity.tooShort');
116 document.execCommand('delete');
117 shouldBeTrue('input.validity.tooLong');
118 shouldBeTrue('input.validity.tooShort');
119 document.execCommand('delete');
120 shouldBeFalse('input.validity.tooLong');
121 shouldBeTrue('input.validity.tooShort');
122 document.execCommand('delete');
123 document.execCommand('delete');
124 shouldBeFalse('input.validity.tooLong');
125 shouldBeFalse('input.validity.tooShort');