third_party/WebKit/LayoutTests/fast/forms/resources/textarea-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('textarea');
  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 key input:');
  75 el = makeInvalid();
  76 el.focus();
  77 eventSender.keyDown('a');
  78 shouldBe(elBackground, 'validColor');
  79 eventSender.keyDown('backspace', []);
  80 shouldBe(elBackground, 'invalidColor');
  81
  82 // --------------------------------
  83 //     Constraints change
  84 // --------------------------------
  85 debug('Change required:');
  86 el = makeInvalid();
  87 el.required = false;
  88 shouldBe(elBackground, 'validColor');
  89 el.required = true;
  90 shouldBe(elBackground, 'invalidColor');
  91
  92 debug('Change maxlength:');
  93 el = makeInvalid();
  94 el.value = '1234567890';
  95 shouldBe(elBackground, 'validColor');
  96 // Make the value dirty by deleting the last character.
  97 el.focus();
  98 el.setSelectionRange(10, 10);
  99 document.execCommand('delete');
 100 el.maxLength = 5;
 101 shouldBe(elBackground, 'invalidColor');
 102 el.maxLength = 10;
 103 shouldBe(elBackground, 'validColor');