third_party/WebKit/LayoutTests/fast/forms/setCustomValidity.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 [name=victim] {
   7   background-color: #0f0;
   8 }
   9
  10 [name=victim]:invalid {
  11   background-color: #f00;
  12 }
  13
  14 </style>
  15 <script src="../../resources/js-test.js"></script>
  16 </head>
  17 <body>
  18 <p id="description"></p>
  19
  20 <select name="victim"></select>
  21 <textarea name="victim"></textarea>
  22 <input name="victim">
  23
  24 <div id="console"></div>
  25 <script>
  26
  27 description('This test checks if setCustomValidity causes CSS to get applied correctly.');
  28
  29 var v = document.getElementsByName('victim');
  30 var test;
  31
  32 for (var i = 0; i < v.length; i++) {
  33     test = v[i];
  34
  35     shouldBeFalse('test.validity.customError');
  36     shouldBeEqualToString('test.validationMessage', '');
  37     shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)');
  38
  39     var message = 'Custom validation message';
  40     test.setCustomValidity(message);
  41     shouldBeTrue('test.validity.customError');
  42     shouldBeEqualToString('test.validationMessage', message);
  43     shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(255, 0, 0)');
  44
  45     test.setCustomValidity('');
  46     shouldBeFalse('test.validity.customError');
  47     shouldBeEqualToString('test.validationMessage', '');
  48     shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)');
  49 }
  50
  51 </script>
  52 </body>
  53 </html>