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