third_party/WebKit/LayoutTests/fast/forms/ValidityState-tooLong-textarea.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 tooLong flag with &lt;textarea> elements.');
  11
  12 var textarea = document.createElement('textarea');
  13 document.body.appendChild(textarea);
  14
  15 debug('No maxlength and no value');
  16 shouldBeFalse('textarea.validity.tooLong');
  17
  18 debug('');
  19 debug('Non-dirty value');
  20 textarea.defaultValue = 'abcde';
  21 textarea.maxLength = 3;
  22 shouldBe('textarea.value.length', '5');
  23 shouldBeFalse('textarea.validity.tooLong');
  24
  25 textarea.defaultValue = 'abcdef';
  26 shouldBe('textarea.value.length', '6');
  27 shouldBeFalse('textarea.validity.tooLong');
  28
  29 debug('');
  30 debug('Dirty value and longer than maxLength');
  31 textarea = document.createElement('textarea');
  32 document.body.appendChild(textarea);
  33 textarea.defaultValue = 'abcde';
  34 textarea.maxLength = 3;
  35 textarea.focus();
  36 textarea.setSelectionRange(5, 5);  // Move the cursor at the end.
  37 document.execCommand('delete');
  38 shouldBe('textarea.value.length', '4');
  39 shouldBeTrue('textarea.validity.tooLong');
  40 // Make the value <=maxLength.
  41 document.execCommand('delete');
  42 shouldBeFalse('textarea.validity.tooLong');
  43
  44 debug('');
  45 debug('Sets a value via DOM property');
  46 textarea = document.createElement('textarea');
  47 document.body.appendChild(textarea);
  48 textarea.maxLength = 3;
  49 textarea.value = 'abcde';
  50 shouldBeFalse('textarea.validity.tooLong');
  51
  52 debug('');
  53 debug('Disabling makes the control valid');
  54 textarea.focus();
  55 textarea.setSelectionRange(5, 5);  // Move the cursor at the end.
  56 document.execCommand('delete');
  57 shouldBeTrue('textarea.validity.tooLong');
  58 shouldBeFalse('textarea.disabled = true; textarea.validity.tooLong');
  59 shouldBeTrue('textarea.disabled = false; textarea.validity.tooLong');
  60
  61 // FIXME: The grapheme test below doesn't do its job because initial value is
  62 // always valid. After making a modificaton to trigger validity check, one can
  63 // see that the test would fail, which possibly reveals a code issue.
  64 // https://code.google.com/p/chromium/issues/detail?id=421727
  65 // Once this is figured out, implement a similar test in
  66 // ValidityState-tooShort-textarea.html
  67 debug('');
  68 debug('Grapheme length is not greater than maxLength though character length is greater');
  69 // fancyX should be treated as 1 grapheme.
  70 // U+0305 COMBINING OVERLINE
  71 // U+0332 COMBINING LOW LINE
  72 var fancyX = "x\u0305\u0332";
  73 textarea = document.createElement('textarea');
  74 document.body.appendChild(textarea);
  75 textarea.value = fancyX; // 3 characters, 1 grapheme cluster.
  76 textarea.maxLength = 1;
  77 shouldBeFalse('textarea.validity.tooLong');
  78
  79 debug('');
  80 debug('A value set by resetting a form doesn\'t make tooLong true.');
  81 // Make a dirty textarea.
  82 var parent = document.createElement('div');
  83 document.body.appendChild(parent);
  84 parent.innerHTML = '<form><textarea maxlength=2>abcdef</textarea></form>';
  85 textarea = parent.firstChild.firstChild;
  86 textarea.focus();
  87 textarea.setSelectionRange(6, 6);
  88 document.execCommand('delete');
  89 shouldBeTrue('textarea.validity.tooLong');
  90 parent.firstChild.reset();
  91 shouldBe('textarea.value', '"abcdef"');
  92 shouldBeFalse('textarea.validity.tooLong');
  93
  94 debug('');
  95 debug('A value set by a child node change doesn\'t make tooLong true.');
  96 parent.innerHTML = '<textarea maxlength=2>abc</textarea>';
  97 textarea = parent.firstChild;
  98 shouldBeFalse('textarea.validity.tooLong');
  99 parent.firstChild.innerHTML = 'abcdef';
 100 shouldBe('textarea.value', '"abcdef"');
 101 shouldBeFalse('textarea.validity.tooLong');
 102
 103 debug('');
 104 debug('minlength and maxlength together');
 105 textarea.maxLength = 3;
 106 textarea.minLength = 3;
 107 textarea.value = 'abcde';
 108 textarea.focus();
 109 textarea.setSelectionRange(5, 5);
 110 document.execCommand('delete');
 111 shouldBeTrue('textarea.validity.tooLong');
 112 shouldBeFalse('textarea.validity.tooShort');
 113 document.execCommand('delete');
 114 shouldBeFalse('textarea.validity.tooLong');
 115 shouldBeFalse('textarea.validity.tooShort');
 116 document.execCommand('delete');
 117 shouldBeFalse('textarea.validity.tooLong');
 118 shouldBeTrue('textarea.validity.tooShort');
 119
 120 debug('');
 121 debug('minlength and maxlength clashing');
 122 textarea.setAttribute('maxlength', '2');
 123 textarea.setAttribute('minlength', '4');
 124 textarea.value = 'abcde';
 125 textarea.focus();
 126 textarea.setSelectionRange(5, 5);
 127 document.execCommand('delete');
 128 shouldBeTrue('textarea.validity.tooLong');
 129 shouldBeFalse('textarea.validity.tooShort');
 130 document.execCommand('delete');
 131 shouldBeTrue('textarea.validity.tooLong');
 132 shouldBeTrue('textarea.validity.tooShort');
 133 document.execCommand('delete');
 134 shouldBeFalse('textarea.validity.tooLong');
 135 shouldBeTrue('textarea.validity.tooShort');
 136 document.execCommand('delete');
 137 document.execCommand('delete');
 138 shouldBeFalse('textarea.validity.tooLong');
 139 shouldBeFalse('textarea.validity.tooShort');
 140
 141 </script>
 142 </body>
 143 </html>