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