1description("This test performs a check that :valid/:invalid CSS psudo selectors are lively applied.");
2
3// Setup for static elements.
4var form = document.createElement('form');
5document.body.appendChild(form);
6var nonForm = document.createElement('div');
7document.body.appendChild(nonForm);
8
9function makeInvalid() {
10 var select = document.createElement('select');
11 select.name = 'foo';
12 select.required = true;
13 select.value = '';
14 form.appendChild(select);
15 return select;
16}
17
18function appendOption(value, select) {
19 var option = document.createElement('option');
20 option.value = value;
21 option.innerText = value;
22 select.add(option);
23 return option;
24}
25
26function insertOptionBefore(value, select, before) {
27 var option = document.createElement('option');
28 option.value = value;
29 option.innerText = value;
30 select.add(option, before);
31 return option;
32}
33
34function removeOption(option, select) {
35 select.remove(option);
36 return option;
37}
38
39function backgroundOf(el) {
40 return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
41}
42
43var elBackground = 'backgroundOf(el)';
44var invalidColor = 'rgb(255, 0, 0)';
45var normalColor = 'rgb(255, 255, 255)';
46var disabledColor = 'rgb(0, 0, 0)';
47var readOnlyColor = 'rgb(0, 255, 0)'
48var validColor = 'rgb(0, 0, 255)';
49
50// --------------------------------
51// willValidate change
52// --------------------------------
53var el = makeInvalid();
54var o1 = appendOption('', el);
55var o2 = appendOption('X', el);
56o1.selected = true;
57// Confirm this element is invalid.
58debug('Check the initial state:');
59shouldBe(elBackground, 'invalidColor');
60
61debug('Change name:');
62el.name = '';
63shouldBe(elBackground, 'invalidColor');
64el.name = 'bar';
65shouldBe(elBackground, 'invalidColor');
66
67debug('Change disabled:');
68el = makeInvalid();
69o1 = appendOption('', el);
70o2 = appendOption('X', el);
71o1.selected = true;
72el.disabled = true;
73shouldBe(elBackground, 'disabledColor');
74el.disabled = false;
75shouldBe(elBackground, 'invalidColor');
76
77debug('Inside/outside of a form:');
78el = makeInvalid();
79o1 = appendOption('', el);
80o2 = appendOption('X', el);
81o1.selected = true;
82nonForm.appendChild(el);
83shouldBe(elBackground, 'invalidColor');
84form.appendChild(el);
85shouldBe(elBackground, 'invalidColor');
86
87// --------------------------------
88// value change
89// --------------------------------
90debug('Change the value with a placeholder label option:');
91el = makeInvalid();
92o1 = appendOption('', el);
93o2 = appendOption('X', el);
94o2.selected = true;
95shouldBe(elBackground, 'validColor');
96o1.selected = true;
97shouldBe(elBackground, 'invalidColor');
98
99debug('Change the value without a placeholder label option:');
100el = makeInvalid();
101o1 = appendOption('X', el);
102o2 = appendOption('', el);
103o2.selected = true;
104shouldBe(elBackground, 'validColor');
105o1.selected = true;
106shouldBe(elBackground, 'validColor');
107
108debug('Insert/remove options:');
109el = makeInvalid();
110o1 = appendOption('', el);
111o2 = appendOption('X', el);
112o1.selected = true;
113shouldBe(elBackground, 'invalidColor');
114o3 = insertOptionBefore('Y', el, el.firstChild);
115shouldBe(elBackground, 'validColor');
116removeOption(o3, el);
117shouldBe(elBackground, 'invalidColor');
118o3 = appendOption('Z', el);
119o3.selected = true;
120shouldBe(elBackground, 'validColor');
121el.length = 2;
122shouldBe(elBackground, 'invalidColor');
123
124debug('Set an attribute: multiple:');
125el = makeInvalid();
126o1 = appendOption('', el);
127o2 = appendOption('X', el);
128o1.selected = true;
129shouldBe(elBackground, 'invalidColor');
130el.multiple = true;
131shouldBe(elBackground, 'validColor');
132el.removeAttribute('multiple');
133shouldBe(elBackground, 'invalidColor');
134
135debug('Set an attribute: size:');
136el = makeInvalid();
137o1 = appendOption('', el);
138o2 = appendOption('X', el);
139o1.selected = true;
140shouldBe(elBackground, 'invalidColor');
141el.size = 2;
142shouldBe(elBackground, 'validColor');
143el.removeAttribute('size');
144shouldBe(elBackground, 'invalidColor');
145
146debug('SelectAll:');
147el = makeInvalid();
148o1 = appendOption('', el);
149o2 = appendOption('X', el);
150el.multiple = true;
151o1.selected = false;
152o2.selected = false;
153shouldBe(elBackground, 'invalidColor');
154el.focus();
155document.execCommand("SelectAll");
156shouldBe(elBackground, 'validColor');
157el.multiple = false;
158o1.selected = false;
159o2.selected = true;
160
161debug('Reset:');
162el = makeInvalid();
163o1 = appendOption('', el);
164o2 = appendOption('X', el);
165o2.selected = true;
166shouldBe(elBackground, 'validColor');
167form.reset();
168shouldBe(elBackground, 'invalidColor');
169
170// --------------------------------
171// Constraints change
172// --------------------------------
173debug('Change required:');
174el = makeInvalid();
175o1 = appendOption('', el);
176o2 = appendOption('X', el);
177o1.selected = true;
178el.required = false;
179shouldBe(elBackground, 'validColor');
180el.required = true;
181shouldBe(elBackground, 'invalidColor');
182
183var successfullyParsed = true;