LayoutTests/fast/forms/script-tests/textarea-maxlength.js

   1 description('Tests for HTMLTextAreaElement.maxLength behaviors.');
   2
   3 var textArea = document.createElement('textarea');
   4 document.body.appendChild(textArea);
   5
   6 // No maxlength attribute
   7 shouldBe('textArea.maxLength', '-1');
   8
   9 // Invalid maxlength attributes
  10 textArea.setAttribute('maxlength', '-3');
  11 shouldBe('textArea.maxLength', '-1');
  12 textArea.setAttribute('maxlength', 'xyz');
  13 shouldBe('textArea.maxLength', '-1');
  14
  15 // Valid maxlength attributes
  16 textArea.setAttribute('maxlength', '1');
  17 shouldBe('textArea.maxLength', '1');
  18 textArea.setAttribute('maxlength', '256');
  19 shouldBe('textArea.maxLength', '256');
  20
  21 // Set values to .maxLength
  22 textArea.maxLength = 13;
  23 shouldBe('textArea.getAttribute("maxlength")', '"13"');
  24
  25 shouldThrow('textArea.maxLength = -1', '"Error: INDEX_SIZE_ERR: DOM Exception 1"');
  26 shouldBe('textArea.getAttribute("maxlength")', '"13"');  // Not changed
  27
  28 textArea.maxLength = null;
  29 shouldBe('textArea.maxLength', '0');
  30 shouldBe('textArea.getAttribute("maxlength")', '"0"');
  31
  32 // maxLength doesn't truncate the default value.
  33 textArea = document.createElement('textarea');
  34 textArea.setAttribute('maxlength', '3');
  35 textArea.innerHTML = 'abcd';
  36 document.body.appendChild(textArea);
  37 shouldBe('textArea.value', '"abcd"');
  38
  39 // maxLength doesn't truncate .value
  40 textArea.maxLength = 3;
  41 textArea.value = 'abcde';
  42 shouldBe('textArea.value', '"abcde"');
  43
  44 // Set up for user-input tests
  45 function createFocusedTextAreaWithMaxLength(maxLength) {
  46     if (textArea)
  47         document.body.removeChild(textArea);
  48     textArea = document.createElement('textarea');
  49     textArea.setAttribute('maxlength', maxLength);
  50     document.body.appendChild(textArea);
  51     textArea.focus();
  52 }
  53
  54 // Insert text of which length is maxLength.
  55 createFocusedTextAreaWithMaxLength(3);
  56 document.execCommand('insertText', false, 'abc');
  57 shouldBe('textArea.value', '"abc"');
  58
  59 // Try to add characters to maxLength characters.
  60 createFocusedTextAreaWithMaxLength(3);
  61 textArea.value = 'abc';
  62 document.execCommand('insertText', false, 'def');
  63 shouldBe('textArea.value', '"abc"');
  64
  65 // Replace text
  66 createFocusedTextAreaWithMaxLength(3);
  67 textArea.value = 'abc';
  68 document.execCommand('selectAll');
  69 document.execCommand('insertText', false, 'def');
  70 shouldBe('textArea.value', '"def"');
  71
  72 // Existing value is longer than maxLength.  We can't add text.
  73 createFocusedTextAreaWithMaxLength(3);
  74 textArea.value = 'abcdef';
  75 document.execCommand('insertText', false, 'ghi');
  76 shouldBe('textArea.value', '"abcdef"');
  77
  78 // We can delete a character in the longer value.
  79 createFocusedTextAreaWithMaxLength(3);
  80 textArea.value = 'abcdef';
  81 document.execCommand('delete');
  82 shouldBe('textArea.value', '"abcde"');
  83
  84 // A linebreak is 1 character.
  85 createFocusedTextAreaWithMaxLength(3);
  86 document.execCommand('insertText', false, 'A');
  87 document.execCommand('insertLineBreak');
  88 document.execCommand('insertText', false, 'B');
  89 shouldBe('textArea.value', '"A\\nB"');
  90
  91 // Confirms correct count for close linebreaks inputs.
  92 createFocusedTextAreaWithMaxLength(3);
  93 textArea.innerHTML = 'a\n\n';
  94 document.execCommand('insertLineBreak');
  95 shouldBe('textArea.value', '"a\\n\\n"');
  96
  97 // Confirms correct count for open consecutive linebreaks inputs.
  98 createFocusedTextAreaWithMaxLength(3);
  99 document.execCommand('insertLineBreak');
 100 document.execCommand('insertLineBreak');
 101 document.execCommand('insertLineBreak');
 102 document.execCommand('insertLineBreak');
 103 shouldBe('textArea.value', '"\\n\\n\\n"');
 104
 105 // According to the HTML5 specification, maxLength is code-point length.
 106 // However WebKit handles it as grapheme length.
 107
 108 // fancyX should be treated as 1 grapheme.
 109 var fancyX = "x\u0305\u0332";// + String.fromCharCode(0x305) + String.fromCharCode(0x332);
 110 // u10000 is one character consisted of a surrogate pair.
 111 var u10000 = "\ud800\udc00";
 112
 113 // Inserts 5 code-points in UTF-16
 114 createFocusedTextAreaWithMaxLength(3);
 115 document.execCommand('insertText', false, 'AB' + fancyX);
 116 shouldBe('textArea.value', '"AB" + fancyX');
 117 shouldBe('textArea.value.length', '5');
 118
 119 createFocusedTextAreaWithMaxLength(3);
 120 textArea.value = 'AB' + fancyX;
 121 textArea.setSelectionRange(2, 5);  // Select fancyX
 122 document.execCommand('insertText', false, 'CDE');
 123 shouldBe('textArea.value', '"ABC"');
 124
 125 // Inserts 4 code-points in UTF-16
 126 createFocusedTextAreaWithMaxLength(3);
 127 document.execCommand('insertText', false, 'AB' + u10000);
 128 shouldBe('textArea.value', '"AB" + u10000');
 129 shouldBe('textArea.value.length', '4');
 130
 131 createFocusedTextAreaWithMaxLength(3);
 132 textArea.value = 'AB' + u10000;
 133 textArea.setSelectionRange(2, 4);  // Select u10000
 134 document.execCommand('insertText', false, 'CDE');
 135 shouldBe('textArea.value', '"ABC"');
 136
 137 // In the case maxlength=0
 138 createFocusedTextAreaWithMaxLength(0);
 139 textArea.value = '';
 140 document.execCommand('insertText', false, 'ABC');
 141 shouldBe('textArea.value', '""');
 142
 143 // In the case maxlength=''
 144 createFocusedTextAreaWithMaxLength('');
 145 textArea.value = '';
 146 document.execCommand('insertText', false, 'ABC');
 147 shouldBe('textArea.value', '"ABC"');
 148
 149 // In the case maxlength='invalid'
 150 createFocusedTextAreaWithMaxLength('invalid');
 151 textArea.value = '';
 152 document.execCommand('insertText', false, 'ABC');
 153 shouldBe('textArea.value', '"ABC"');