src/third_party/WebKit/LayoutTests/fast/forms/resources/select-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 mouseDownOnSelect(selId, index, modifier) {
  10     var sl = document.getElementById(selId);
  11     var itemHeight = Math.floor(sl.offsetHeight / sl.size);
  12     var border = 1;
  13     var y = border + index * itemHeight;
  14
  15     sl.focus();
  16     if (window.eventSender) {
  17         eventSender.mouseMoveTo(sl.offsetLeft + border, sl.offsetTop + y - window.pageYOffset);
  18         eventSender.mouseDown(0, [modifier]);
  19         eventSender.mouseUp(0, [modifier]);
  20     }
  21 }
  22
  23 function makeInvalid() {
  24     var select = document.createElement('select');
  25     select.name = 'foo';
  26     select.required = true;
  27     select.value = '';
  28     form.appendChild(select);
  29     return select;
  30 }
  31
  32 function appendOption(value, select) {
  33     var option = document.createElement('option');
  34     option.value = value;
  35     option.innerText = value;
  36     select.add(option);
  37     return option;
  38 }
  39
  40 function insertOptionBefore(value, select, before) {
  41     var option = document.createElement('option');
  42     option.value = value;
  43     option.innerText = value;
  44     select.add(option, before);
  45     return option;
  46 }
  47
  48 function removeOption(option, select) {
  49     select.remove(option);
  50     return option;
  51 }
  52
  53 function backgroundOf(el) {
  54     if (typeof(el) == 'string')
  55         el = document.getElementById(el);
  56     return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
  57 }
  58
  59 var elBackground = 'backgroundOf(el)';
  60 var invalidColor = 'rgb(255, 0, 0)';
  61 var normalColor = 'rgb(255, 255, 255)';
  62 var disabledColor = 'rgb(0, 0, 0)';
  63 var transparentColor = 'rgba(0, 0, 0, 0)';
  64 var validColor = 'rgb(0, 0, 255)';
  65
  66 // --------------------------------
  67 //     willValidate change
  68 // --------------------------------
  69 var el = makeInvalid();
  70 var o1 = appendOption('', el);
  71 var o2 = appendOption('X', el);
  72 o1.selected = true;
  73 // Confirm this element is invalid.
  74 debug('Check the initial state:');
  75 shouldBe(elBackground, 'invalidColor');
  76
  77 debug('Change name:');
  78 el.name = '';
  79 shouldBe(elBackground, 'invalidColor');
  80 el.name = 'bar';
  81 shouldBe(elBackground, 'invalidColor');
  82
  83 debug('Change disabled:');
  84 el = makeInvalid();
  85 o1 = appendOption('', el);
  86 o2 = appendOption('X', el);
  87 o1.selected = true;
  88 el.disabled = true;
  89 shouldBe(elBackground, 'disabledColor');
  90 el.disabled = false;
  91 shouldBe(elBackground, 'invalidColor');
  92
  93 debug('Inside/outside of a form:');
  94 el = makeInvalid();
  95 o1 = appendOption('', el);
  96 o2 = appendOption('X', el);
  97 o1.selected = true;
  98 nonForm.appendChild(el);
  99 shouldBe(elBackground, 'invalidColor');
 100 form.appendChild(el);
 101 shouldBe(elBackground, 'invalidColor');
 102
 103 // --------------------------------
 104 //     value change
 105 // --------------------------------
 106
 107 debug('Change the values of select elements without explicit initializing values by clicking:');
 108 form.innerHTML = '<select id="select-multiple" multiple required size="4">' +
 109 '  <option id="multiple-empty">empty</option>' +
 110 '  <option id="multiple-another">another</option>' +
 111 '</select>' +
 112 '<select id="select-size4" size="4" required>' +
 113 '  <option id="size4-empty">empty</option>' +
 114 '  <option id="size4-another">another</option>' +
 115 '</select>';
 116 mouseDownOnSelect('select-multiple', 0);
 117 mouseDownOnSelect('select-size4', 0);
 118 shouldBe('backgroundOf("select-multiple")', 'validColor');
 119 shouldBe('backgroundOf("select-size4")', 'validColor');
 120
 121 debug('Change the value with a placeholder label option:');
 122 el = makeInvalid();
 123 o1 = appendOption('', el);
 124 o2 = appendOption('X', el);
 125 o2.selected = true;
 126 shouldBe(elBackground, 'validColor');
 127 o1.selected = true;
 128 shouldBe(elBackground, 'invalidColor');
 129
 130 debug('Change the value without a placeholder label option:');
 131 el = makeInvalid();
 132 o1 = appendOption('X', el);
 133 o2 = appendOption('', el);
 134 o2.selected = true;
 135 shouldBe(elBackground, 'validColor');
 136 o1.selected = true;
 137 shouldBe(elBackground, 'validColor');
 138
 139 debug('Insert/remove options:');
 140 el = makeInvalid();
 141 o1 = appendOption('', el);
 142 o2 = appendOption('X', el);
 143 o1.selected = true;
 144 shouldBe(elBackground, 'invalidColor');
 145 o3 = insertOptionBefore('Y', el, el.firstChild);
 146 shouldBe(elBackground, 'validColor');
 147 removeOption(o3, el);
 148 shouldBe(elBackground, 'invalidColor');
 149 o3 = appendOption('Z', el);
 150 o3.selected = true;
 151 shouldBe(elBackground, 'validColor');
 152 el.length = 2;
 153 shouldBe(elBackground, 'invalidColor');
 154
 155 debug('Set an attribute: multiple:');
 156 el = makeInvalid();
 157 o1 = appendOption('', el);
 158 o2 = appendOption('X', el);
 159 o1.selected = true;
 160 shouldBe(elBackground, 'invalidColor');
 161 el.multiple = true;
 162 shouldBe(elBackground, 'validColor');
 163 el.removeAttribute('multiple');
 164 shouldBe(elBackground, 'invalidColor');
 165
 166 debug('Set an attribute: size:');
 167 el = makeInvalid();
 168 o1 = appendOption('', el);
 169 o2 = appendOption('X', el);
 170 o1.selected = true;
 171 shouldBe(elBackground, 'invalidColor');
 172 el.size = 2;
 173 shouldBe(elBackground, 'validColor');
 174 el.removeAttribute('size');
 175 shouldBe(elBackground, 'invalidColor');
 176
 177 debug('SelectAll:');
 178 el = makeInvalid();
 179 o1 = appendOption('', el);
 180 o2 = appendOption('X', el);
 181 el.multiple = true;
 182 o1.selected = false;
 183 o2.selected = false;
 184 shouldBe(elBackground, 'invalidColor');
 185 el.focus();
 186 document.execCommand("SelectAll");
 187 shouldBe(elBackground, 'validColor');
 188 el.multiple = false;
 189 o1.selected = false;
 190 o2.selected = true;
 191
 192 debug('Reset:');
 193 el = makeInvalid();
 194 o1 = appendOption('', el);
 195 o2 = appendOption('X', el);
 196 o2.selected = true;
 197 shouldBe(elBackground, 'validColor');
 198 form.reset();
 199 shouldBe(elBackground, 'invalidColor');
 200
 201 // --------------------------------
 202 //     Constraints change
 203 // --------------------------------
 204 debug('Change required:');
 205 el = makeInvalid();
 206 o1 = appendOption('', el);
 207 o2 = appendOption('X', el);
 208 o1.selected = true;
 209 el.required = false;
 210 shouldBe(elBackground, 'validColor');
 211 el.required = true;
 212 shouldBe(elBackground, 'invalidColor');