| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.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'); |
| |
| // 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"'); |
| |
| shouldThrowErrorName('textArea.maxLength = -1', 'IndexSizeError'); |
| shouldBe('textArea.getAttribute("maxlength")', '"13"'); // Not changed |
| |
| 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. |
| // However 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"; |
| |
| // Inserts 5 code-points in UTF-16 |
| createFocusedTextAreaWithMaxLength(3); |
| document.execCommand('insertText', false, 'AB' + fancyX); |
| shouldBe('textArea.value', '"AB" + fancyX'); |
| shouldBe('textArea.value.length', '5'); |
| |
| createFocusedTextAreaWithMaxLength(3); |
| textArea.value = 'AB' + fancyX; |
| textArea.setSelectionRange(2, 5); // Select fancyX |
| document.execCommand('insertText', false, 'CDE'); |
| shouldBe('textArea.value', '"ABC"'); |
| |
| // Inserts 4 code-points in UTF-16 |
| createFocusedTextAreaWithMaxLength(3); |
| document.execCommand('insertText', false, 'AB' + u10000); |
| shouldBe('textArea.value', '"AB" + u10000'); |
| shouldBe('textArea.value.length', '4'); |
| |
| 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> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
