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
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/openui/open-ui/issues/687">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<selectmenu id=useragent>
<option id=useragentoptionone>one</option>
<option id=useragentoptiontwo>two</option>
</selectmenu>
<selectmenu id=custom>
<div id=custombutton slot=button behavior=button>button</div>
<div id=customlistbox popover=auto slot=listbox behavior=listbox>listbox</div>
</selectmenu>
<selectmenu id=customwithselection style="user-select:auto">
<div id=custombuttonwithselection slot=button behavior=button>button</div>
<div id=customlistboxwithselection popover=auto slot=listbox behavior=listbox>listbox</div>
</selectmenu>
<selectmenu id=customwithmixedselection>
<div id=custombuttonwithmixedselection slot=button behavior=button style="user-select:auto">button</div>
<div id=customlistboxwithmixedselection popover=auto slot=listbox behavior=listbox style="user-select:auto">listbox</div>
</selectmenu>
<script>
test(() => {
assert_equals(getComputedStyle(useragent).userSelect, 'none',
'The selectmenu should have user-select:none.');
assert_equals(getComputedStyle(useragentoptionone).userSelect, 'none',
'The first option should have user-select:none.');
assert_equals(getComputedStyle(useragentoptiontwo).userSelect, 'none',
'The second option should have user-select:none.');
}, 'Option elements should have user-select:none without slotting buttons or listboxes.');
test(() => {
assert_equals(getComputedStyle(custom).userSelect, 'none',
'The selectmenu should have user-select:none.');
assert_equals(getComputedStyle(custombutton).userSelect, 'none',
'The custom button should have user-select:none.');
assert_equals(getComputedStyle(customlistbox).userSelect, 'none',
'The custom listbox should have user-select:none.');
}, 'Slotted in buttons and listboxes should have user-select:none.');
test(() => {
assert_equals(getComputedStyle(customwithselection).userSelect, 'auto',
'The selectmenu should have user-select:auto.');
assert_equals(getComputedStyle(custombuttonwithselection).userSelect, 'auto',
'The custom button should have user-select:auto.');
assert_equals(getComputedStyle(customlistboxwithselection).userSelect, 'auto',
'The custom listbox should have user-select:auto.');
}, 'Setting user-select:auto on selectmenus should re-enable selection.');
test(() => {
assert_equals(getComputedStyle(customwithmixedselection).userSelect, 'none',
'The selectmenu should have user-select:none.');
assert_equals(getComputedStyle(custombuttonwithmixedselection).userSelect, 'auto',
'The custom button should have user-select:auto.');
assert_equals(getComputedStyle(customlistboxwithmixedselection).userSelect, 'auto',
'The custom listbox should have user-select:auto.');
}, 'Children of selectmenu should be able to opt-in to user-select.');
</script>
|
