src/third_party/WebKit/LayoutTests/fast/forms/resources/input-live-pseudo-selectors.js

   1 description("This test performs a check that :valid/:invalid CSS psudo selectors are lively applied.");
   2
   3 // Setup for static elements.
   4 var form = document.createElement('form');
   5 document.body.appendChild(form);
   6 var nonForm = document.createElement('div');
   7 document.body.appendChild(nonForm);
   8
   9 function makeInvalid() {
  10     var i = document.createElement('input');
  11     i.name = 'foo';
  12     i.required = true;
  13     i.value = '';
  14     form.appendChild(i);
  15     return i;
  16 }
  17
  18 function backgroundOf(el) {
  19     return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
  20 }
  21
  22 var elBackground = 'backgroundOf(el)';
  23 var invalidColor = 'rgb(255, 0, 0)';
  24 var normalColor = 'rgb(255, 255, 255)';
  25 var disabledColor = 'rgb(0, 0, 0)';
  26 var readOnlyColor = 'rgb(0, 255, 0)';
  27 var validColor = 'rgb(0, 0, 255)';
  28
  29 // --------------------------------
  30 //     willValidate change
  31 // --------------------------------
  32 var el = makeInvalid();
  33 // Confirm this element is invalid.
  34 debug('Chheck the initial state:');
  35 shouldBe(elBackground, 'invalidColor');
  36
  37 debug('Change name:');
  38 el.name = '';
  39 shouldBe(elBackground, 'invalidColor');
  40 el.name = 'bar';
  41 shouldBe(elBackground, 'invalidColor');
  42
  43 debug('Change disabled:');
  44 el = makeInvalid();
  45 el.disabled = true;
  46 shouldBe(elBackground, 'disabledColor');
  47 el.disabled = false;
  48 shouldBe(elBackground, 'invalidColor');
  49
  50 debug('Change readOnly:');
  51 el = makeInvalid();
  52 el.readOnly = true;
  53 shouldBe(elBackground, 'readOnlyColor');
  54 el.readOnly = false;
  55 shouldBe(elBackground, 'invalidColor');
  56
  57 debug('Inside/outside of a form:');
  58 el = makeInvalid();
  59 nonForm.appendChild(el);
  60 shouldBe(elBackground, 'invalidColor');
  61 form.appendChild(el);
  62 shouldBe(elBackground, 'invalidColor');
  63
  64 // --------------------------------
  65 //     value change
  66 // --------------------------------
  67 debug('Change the value by DOM attribute:');
  68 el = makeInvalid();
  69 el.value = 'abc';
  70 shouldBe(elBackground, 'validColor');
  71 el.value = '';
  72 shouldBe(elBackground, 'invalidColor');
  73
  74 debug('Change the value by DOM attribute for a focused text field:');
  75 el = makeInvalid();
  76 el.focus();
  77 el.value = 'abc';
  78 shouldBe(elBackground, 'validColor');
  79
  80 debug('Change the value by key input:');
  81 el = makeInvalid();
  82 el.focus();
  83 eventSender.keyDown('a');
  84 shouldBe(elBackground, 'validColor');
  85 eventSender.keyDown('backspace', []);
  86 shouldBe(elBackground, 'invalidColor');
  87
  88 // --------------------------------
  89 //     Constraints change
  90 // --------------------------------
  91 debug('Change required:');
  92 el = makeInvalid();
  93 el.required = false;
  94 shouldBe(elBackground, 'validColor');
  95 el.required = true;
  96 shouldBe(elBackground, 'invalidColor');
  97
  98 debug('Change pattern:');
  99 el = makeInvalid();
 100 el.value = 'abc';
 101 shouldBe(elBackground, 'validColor');
 102 el.pattern = 'a..c';
 103 shouldBe(elBackground, 'invalidColor');
 104 el.pattern = 'a.c';
 105 shouldBe(elBackground, 'validColor');
 106
 107 debug('Change step:');
 108 el = makeInvalid();
 109 el.value = '1';
 110 el.type = 'number';
 111 shouldBe(elBackground, 'validColor');
 112 el.step = '2';
 113 shouldBe(elBackground, 'invalidColor');
 114 el.step = '0.5';
 115 shouldBe(elBackground, 'validColor');