third_party/WebKit/LayoutTests/fast/forms/number/number-validity-badinput.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <style>
   6 :invalid {
   7   background-color: #ff0000;
   8 }
   9 </style>
  10 </head>
  11 <body>
  12 <div id=parent>
  13 <input type=number id=number>
  14 <input id=another>
  15 </div>
  16 <script>
  17 description('A number input fields with a bad input string should make validity.badInput true and have :invalid style.');
  18
  19 function colorOf(el) {
  20     return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
  21 }
  22 var invalidStyleColor = 'rgb(255, 0, 0)';
  23
  24 var number = document.getElementById('number');
  25 number.focus();
  26 debug('Initial state. The elment has no value.');
  27 shouldNotBe('colorOf(number)', 'invalidStyleColor');
  28 shouldBeFalse('number.validity.badInput');
  29
  30 debug("Type '-'. The element becomes badInput.");
  31 document.execCommand('InsertText', false, '-');
  32 shouldBe('colorOf(number)', 'invalidStyleColor');
  33 shouldBeFalse('number.validity.valid');
  34 shouldBeTrue('number.validity.badInput');
  35 shouldBeEqualToString('number.value', '');
  36
  37 debug("Type '1' additionally. The element becomes valid.");
  38 document.execCommand('InsertText', false, '1');
  39 shouldNotBe('colorOf(number)', 'invalidStyleColor');
  40 shouldBeFalse('number.validity.badInput');
  41 shouldBeEqualToString('number.value', '-1');
  42
  43 debug("Type '-' additionally. The element becomes badInput again.");
  44 document.execCommand('InsertText', false, '-');
  45 shouldBe('colorOf(number)', 'invalidStyleColor');
  46 shouldBeTrue('number.validity.badInput');
  47 shouldBeEqualToString('number.value', '');
  48
  49 debug("The element losts focus. The element state should not be changed.");
  50 document.getElementById('another').focus();
  51 shouldBe('colorOf(number)', 'invalidStyleColor');
  52 shouldBeTrue('number.validity.badInput');
  53 // Visible value is '-1-'.
  54 number.focus();
  55 document.execCommand('SelectAll');
  56 shouldBeEqualToString('document.getSelection().toString()', '-1-');
  57 shouldBeEqualToString('number.value', '');
  58
  59 debug("The element losts a renderer. The element state should not be changed.");
  60 shouldBeTrue('number.style.display = "none"; number.validity.badInput');
  61
  62 number.style.display = 'inline-block';
  63 number.focus();
  64 debug('A bad input should be cleared by value="".');
  65 shouldBeEqualToString('number.value = ""; document.execCommand("SelectAll"); document.getSelection().toString()', '');
  66
  67 debug('Setting a valud value via |value| IDL attribute should clear badInput.');
  68 document.execCommand('InsertText', false, 'non-number');
  69 shouldBeTrue('number.validity.badInput');
  70 shouldBeFalse('number.checkValidity()');
  71 number.value = '123';
  72 shouldBeFalse('number.validity.badInput');
  73 shouldBeTrue('number.checkValidity()');
  74
  75 document.getElementById('parent').innerHTML = '';
  76 </script>
  77 </body>
  78 </html>