third_party/WebKit/LayoutTests/fast/forms/textarea-maxlength.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description('Tests for HTMLTextAreaElement.maxLength behaviors.');
  11
  12 var textArea = document.createElement('textarea');
  13 document.body.appendChild(textArea);
  14
  15 // No maxlength attribute
  16 shouldBe('textArea.maxLength', '-1');
  17
  18 // Invalid maxlength attributes
  19 textArea.setAttribute('maxlength', '-3');
  20 shouldBe('textArea.maxLength', '-1');
  21 textArea.setAttribute('maxlength', 'xyz');
  22 shouldBe('textArea.maxLength', '-1');
  23
  24 // Leading whitespaces in maxlength attributes
  25 textArea.setAttribute('maxlength', '\t  \n\r1');
  26 shouldBe('textArea.maxLength', '1');
  27 textArea.setAttribute('maxlength', "\u20021");
  28 shouldBe('textArea.maxLength', '-1');
  29 textArea.setAttribute('maxlength', "\u20091");
  30 shouldBe('textArea.maxLength', '-1');
  31
  32 // Valid maxlength attributes
  33 textArea.setAttribute('maxlength', '1');
  34 shouldBe('textArea.maxLength', '1');
  35 textArea.setAttribute('maxlength', '256');
  36 shouldBe('textArea.maxLength', '256');
  37
  38 // Set values to .maxLength
  39 textArea.maxLength = 13;
  40 shouldBe('textArea.getAttribute("maxlength")', '"13"');
  41
  42 shouldThrow('textArea.maxLength = -1', '"IndexSizeError: Failed to set the \'maxLength\' property on \'HTMLTextAreaElement\': The value provided (-1) is not positive or 0."');
  43 shouldBe('textArea.getAttribute("maxlength")', '"13"');  // Not changed
  44 textArea.minLength = 11;
  45 shouldThrow('textArea.maxLength = 10', '"IndexSizeError: Failed to set the \'maxLength\' property on \'HTMLTextAreaElement\': The maxLength provided (10) is less than the minimum bound (11)."');
  46 shouldBe('textArea.getAttribute("maxlength")', '"13"');  // Not changed
  47 shouldBe('textArea.maxLength = 11; textArea.getAttribute("maxlength")', '"11"');
  48 textArea.minLength = 0;  // Remove the minlength value to get it out of the way of subsequent tests
  49
  50 textArea.maxLength = null;
  51 shouldBe('textArea.maxLength', '0');
  52 shouldBe('textArea.getAttribute("maxlength")', '"0"');
  53
  54 // maxLength doesn't truncate the default value.
  55 textArea = document.createElement('textarea');
  56 textArea.setAttribute('maxlength', '3');
  57 textArea.innerHTML = 'abcd';
  58 document.body.appendChild(textArea);
  59 shouldBe('textArea.value', '"abcd"');
  60
  61 // maxLength doesn't truncate .value
  62 textArea.maxLength = 3;
  63 textArea.value = 'abcde';
  64 shouldBe('textArea.value', '"abcde"');
  65
  66 // Set up for user-input tests
  67 function createFocusedTextAreaWithMaxLength(maxLength) {
  68     if (textArea)
  69         document.body.removeChild(textArea);
  70     textArea = document.createElement('textarea');
  71     textArea.setAttribute('maxlength', maxLength);
  72     document.body.appendChild(textArea);
  73     textArea.focus();
  74 }
  75
  76 // Insert text of which length is maxLength.
  77 createFocusedTextAreaWithMaxLength(3);
  78 document.execCommand('insertText', false, 'abc');
  79 shouldBe('textArea.value', '"abc"');
  80
  81 // Try to add characters to maxLength characters.
  82 createFocusedTextAreaWithMaxLength(3);
  83 textArea.value = 'abc';
  84 document.execCommand('insertText', false, 'def');
  85 shouldBe('textArea.value', '"abc"');
  86
  87 // Replace text
  88 createFocusedTextAreaWithMaxLength(3);
  89 textArea.value = 'abc';
  90 document.execCommand('selectAll');
  91 document.execCommand('insertText', false, 'def');
  92 shouldBe('textArea.value', '"def"');
  93
  94 // Existing value is longer than maxLength.  We can't add text.
  95 createFocusedTextAreaWithMaxLength(3);
  96 textArea.value = 'abcdef';
  97 document.execCommand('insertText', false, 'ghi');
  98 shouldBe('textArea.value', '"abcdef"');
  99
 100 // We can delete a character in the longer value.
 101 createFocusedTextAreaWithMaxLength(3);
 102 textArea.value = 'abcdef';
 103 document.execCommand('delete');
 104 shouldBe('textArea.value', '"abcde"');
 105
 106 // A linebreak is 1 character.
 107 createFocusedTextAreaWithMaxLength(4);
 108 document.execCommand('insertText', false, 'A');
 109 document.execCommand('insertLineBreak');
 110 document.execCommand('insertText', false, 'B');
 111 shouldBe('textArea.value', '"A\\nB"');
 112
 113 // Confirms correct count for close linebreaks inputs.
 114 createFocusedTextAreaWithMaxLength(3);
 115 textArea.innerHTML = 'a\n\n';
 116 document.execCommand('insertLineBreak');
 117 shouldBe('textArea.value', '"a\\n\\n"');
 118
 119 // Confirms correct count for open consecutive linebreaks inputs.
 120 createFocusedTextAreaWithMaxLength(6);
 121 document.execCommand('insertLineBreak');
 122 document.execCommand('insertLineBreak');
 123 document.execCommand('insertLineBreak');
 124 document.execCommand('insertLineBreak');
 125 shouldBe('textArea.value', '"\\n\\n\\n"');
 126
 127 // According to the HTML5 specification, maxLength is code-point length.
 128 // Blink follows it though WebKit handles it as grapheme length.
 129
 130 // fancyX should be treated as 1 grapheme.
 131 var fancyX = "x\u0305\u0332";// + String.fromCharCode(0x305) + String.fromCharCode(0x332);
 132 // u10000 is one character consisted of a surrogate pair.
 133 var u10000 = "\ud800\udc00";
 134
 135 debug('Inserts 2 normal characters + a combining letter with 3 code points into a maxlength=3 element.')
 136 createFocusedTextAreaWithMaxLength(3);
 137 document.execCommand('insertText', false, 'AB' + fancyX);
 138 shouldBeEqualToString('textArea.value', 'ABx');
 139 shouldBe('textArea.value.length', '3');
 140
 141 createFocusedTextAreaWithMaxLength(3);
 142 textArea.value = 'AB' + fancyX;
 143 textArea.setSelectionRange(2, 5);  // Select fancyX
 144 document.execCommand('insertText', false, 'CDE');
 145 shouldBe('textArea.value', '"ABC"');
 146
 147 debug('Inserts 2 normal characters + one surrogate pair into a maxlength=3 element');
 148 createFocusedTextAreaWithMaxLength(3);
 149 document.execCommand('insertText', false, 'AB' + u10000);
 150 shouldBeEqualToString('textArea.value', 'AB');
 151 shouldBe('textArea.value.length', '2');
 152
 153 createFocusedTextAreaWithMaxLength(3);
 154 textArea.value = 'AB' + u10000;
 155 textArea.setSelectionRange(2, 4);  // Select u10000
 156 document.execCommand('insertText', false, 'CDE');
 157 shouldBe('textArea.value', '"ABC"');
 158
 159 // In the case maxlength=0
 160 createFocusedTextAreaWithMaxLength(0);
 161 textArea.value = '';
 162 document.execCommand('insertText', false, 'ABC');
 163 shouldBe('textArea.value', '""');
 164
 165 // In the case maxlength=''
 166 createFocusedTextAreaWithMaxLength('');
 167 textArea.value = '';
 168 document.execCommand('insertText', false, 'ABC');
 169 shouldBe('textArea.value', '"ABC"');
 170
 171 // In the case maxlength='invalid'
 172 createFocusedTextAreaWithMaxLength('invalid');
 173 textArea.value = '';
 174 document.execCommand('insertText', false, 'ABC');
 175 shouldBe('textArea.value', '"ABC"');
 176 </script>
 177 </body>
 178 </html>