<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Tests for tooShort flag with <textarea> elements.');
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
debug('No minlength and no value');
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('Non-dirty value');
textarea.defaultValue = 'ab';
textarea.minLength = 3;
shouldBe('textarea.value.length', '2');
shouldBeFalse('textarea.validity.tooShort');
textarea.defaultValue = 'a';
shouldBe('textarea.value.length', '1');
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('Dirty value and longer than minLength');
textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.defaultValue = 'ab';
textarea.minLength = 3;
textarea.focus();
textarea.setSelectionRange(2, 2); // Move the cursor at the end.
eventSender.keyDown('Backspace');
shouldBe('textarea.value.length', '1');
shouldBeTrue('textarea.validity.tooShort');
// Make the value empty, which means valid.
eventSender.keyDown('Backspace');
shouldBe('textarea.value.length', '0');
shouldBeFalse('textarea.validity.tooShort');
sendString('ab');
shouldBe('textarea.value.length', '2');
shouldBeTrue('textarea.validity.tooShort');
// Make the value >=minLength.
sendString('c');
shouldBe('textarea.value.length', '3');
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('Sets a value via DOM property');
textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.minLength = 3;
textarea.defaultValue = 'ab';
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('Disabling makes the control valid');
textarea.focus();
textarea.setSelectionRange(2, 2); // Move the cursor at the end.
eventSender.keyDown('Backspace');
shouldBeTrue('textarea.validity.tooShort');
shouldBeFalse('textarea.disabled = true; textarea.validity.tooShort');
shouldBeTrue('textarea.disabled = false; textarea.validity.tooShort');
debug('');
debug('A value set by resetting a form doesn\'t make tooShort true.');
// Make a dirty textarea.
var parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = '<form><textarea minlength=3>ab</textarea></form>';
textarea = parent.firstChild.firstChild;
textarea.focus();
textarea.setSelectionRange(2, 2);
eventSender.keyDown('Backspace');
shouldBeTrue('textarea.validity.tooShort');
parent.firstChild.reset();
shouldBe('textarea.value', '"ab"');
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('A value set by a child node change doesn\'t make tooShort true.');
parent.innerHTML = '<textarea minlength=3>ab</textarea>';
textarea = parent.firstChild;
shouldBeFalse('textarea.validity.tooShort');
parent.firstChild.innerHTML = 'a';
shouldBe('textarea.value', '"a"');
shouldBeFalse('textarea.validity.tooShort');
debug('');
debug('Grapheme length is shorter than minLength though character length is greater');
// fancyX should be treated as 1 grapheme.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = 'x\u0305\u0332';
textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = fancyX + 'A'; // 4 characters, 2 grapheme cluster.
textarea.minLength = 2;
textarea.focus();
shouldBeFalse('textarea.validity.tooShort');
eventSender.keyDown('Backspace'); // Make the value dirty, 1 grapheme remains.
// Not too short because there are three characters.
shouldBe('textarea.value.length', '3');
shouldBeFalse('textarea.validity.tooShort');
textarea.remove();
</script>
</body>
</html>
Codebase Browser
chromium