1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
<!DOCTYPE html>
<meta name=timeout content=long>
<link rel=author href="mailto:masonf@chromium.org">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10775">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="../../../popovers/resources/popover-utils.js"></script>
<select id=test1 style="appearance:base-select">
<option>option</option>
<option>option</option>
</select>
<style>
#test1::picker(select) {
background-color: red;
}
#test1::picker(select):popover-open {
background-color: green;
}
</style>
<script>
const select1 = document.querySelector('select#test1');
const red = 'rgb(255, 0, 0)';
const green = 'rgb(0, 128, 0)';
promise_test(async (t) => {
const style = document.createElement('style');
document.head.append(style);
t.add_cleanup(() => style.remove());
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red);
style.innerHTML = '#test1::picker(select) {appearance: base-select}';
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red,'still closed, so popover-open doesn\'t match');
// Now open the picker
assert_throws_dom('NotAllowedError',() => select1.showPicker(),'showPicker requires user activation');
assert_false(select1.matches(':open'));
await test_driver.bless('showPicker');
select1.showPicker();
assert_true(select1.matches(':open'));
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,green,'now open, so popover-open matches');
// Close the picker
await clickOn(select1);
assert_false(select1.matches(':open'));
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red,'back to closed');
}, 'Basic functionality of select picker and appearance');
promise_test(async (t) => {
const style = document.createElement('style');
document.head.append(style);
t.add_cleanup(() => style.remove());
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
style.innerHTML = '#test1::picker(select) {appearance: auto}';
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'auto');
await test_driver.bless('showPicker');
select1.showPicker();
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red,'appearance:auto picker is never open');
// Close the picker
await clickOn(select1);
assert_false(select1.matches(':open'));
}, 'Basic functionality of select picker with appearance:auto');
promise_test(async (t) => {
const style = document.createElement('style');
document.head.append(style);
t.add_cleanup(() => style.remove());
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
style.innerHTML = '#test1::picker(select) {appearance: none}';
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
await test_driver.bless('showPicker');
select1.showPicker();
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red,'appearance:none picker is never open');
// Close the picker
await clickOn(select1);
assert_false(select1.matches(':open'));
}, 'Basic functionality of select picker with appearance:none');
promise_test(async (t) => {
const style = document.createElement('style');
document.head.append(style);
t.add_cleanup(() => style.remove());
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
style.innerHTML = `
#test1::picker(select) {appearance: base-select}
#test1::picker(select):popover-open {appearance: auto}
`;
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
await test_driver.bless('showPicker');
select1.showPicker();
assert_false(select1.matches(':open'),'Switching appearance in :popover-open should re-close the picker');
assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red);
await new Promise(resolve => requestAnimationFrame(resolve));
assert_false(select1.matches(':open'),'There should be no oscillation or re-opening the picker');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_false(select1.matches(':open'),'There should be no oscillation or re-opening the picker (2)');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_false(select1.matches(':open'),'There should be no oscillation or re-opening the picker (3)');
}, 'Switching appearance in popover-open should close the picker');
promise_test(async (t) => {
const style = document.createElement('style');
document.head.append(style);
t.add_cleanup(() => style.remove());
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
style.innerHTML = '#test1::picker(select) {appearance: base-select}';
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
await test_driver.bless('showPicker');
select1.showPicker();
assert_true(select1.matches(':open'));
style.remove();
assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
await new Promise(requestAnimationFrame);
await new Promise(requestAnimationFrame);
assert_false(select1.matches(':open'),'changing appearance while the picker is open should close it');
}, 'Switching appearance in JS after picker is open should close the picker');
</script>
<button id=reset>Reset</button>
<select id=test2>
<button><selectedcontent></selectedcontent></button>
<option>option one</option>
<option>option two</option>
<option>option three</option>
</select>
<style>
#test2, #test2::picker(select) {
appearance: base-select;
}
#test2.controlswitch:open {
appearance: auto;
}
#test2.pickerswitch:open::picker(select) {
appearance: auto;
}
</style>
<script>
const select2 = document.querySelector('select#test2');
const secondOption = select2.querySelector('option:nth-of-type(2)');
promise_test(async (t) => {
assert_false(select2.matches(':open'),'setup');
assert_equals(select2.value,'option one');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(select2);
assert_true(select2.matches(':open'),'picker should open when clicked');
assert_equals(secondOption.textContent,'option two');
await test_driver.click(secondOption);
assert_false(select2.matches(':open'));
assert_equals(select2.value,'option two');
},'Test of the test harness');
promise_test(async (t) => {
assert_false(select2.matches(':open'),'setup');
assert_equals(select2.className,'');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(select2);
assert_true(select2.matches(':open'),'picker should open when clicked');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(secondOption); // Choose an option
assert_false(select2.matches(':open'));
t.add_cleanup(() => select2.removeAttribute('class'));
select2.classList.add('controlswitch');
assert_false(select2.matches(':open'));
assert_equals(getComputedStyle(select2).appearance,'base-select','appearance should not have changed yet');
await test_driver.click(select2);
assert_false(select2.matches(':open'),'picker should get closed when the appearance value changes');
assert_equals(getComputedStyle(select2).appearance,'base-select','appearance should be back to base-select');
},'The select picker is closed if the <select> appearance value is changed via CSS while the picker is open');
promise_test(async (t) => {
assert_false(select2.matches(':open'),'setup');
assert_equals(select2.className,'');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(select2);
assert_true(select2.matches(':open'),'picker should open when clicked');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(secondOption); // Choose an option
assert_false(select2.matches(':open'));
t.add_cleanup(() => select2.removeAttribute('class'));
select2.classList.add('pickerswitch');
await test_driver.click(select2);
assert_false(select2.matches(':open'),'picker should get closed when the appearance value changes');
assert_equals(getComputedStyle(select2).appearance,'base-select','appearance should be back to base-select');
},'The select picker is closed if the ::picker() appearance value is changed via CSS while the picker is open');
promise_test(async (t) => {
assert_false(select2.matches(':open'),'setup');
assert_equals(select2.className,'');
assert_equals(getComputedStyle(select2).appearance,'base-select');
await test_driver.click(select2);
assert_true(select2.matches(':open'),'picker should open when clicked');
assert_equals(getComputedStyle(select2).appearance,'base-select');
t.add_cleanup(() => select2.removeAttribute('style'));
select2.setAttribute('style','appearance:auto');
assert_equals(getComputedStyle(select2).appearance,'auto','appearance should still be auto from inline style');
assert_false(select2.matches(':open'),'Adding inline style should close the picker');
},'The select picker is closed if the <select> inline appearance value is changed while the picker is open');
</script>
|
