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
content / test / data / accessibility / event / select-selected-add-remove.html [blame]
<!--
@UIA-WIN-DENY:*
@UIA-WIN-ALLOW:SelectionItem_Element*
@UIA-WIN-ALLOW:SelectionItemIsSelected*
@UIA-WIN-ALLOW:Selection_Invalidated*
-->
<!DOCTYPE html>
<html>
<body>
<select multiple aria-label="Combo1">
<option id='opt1'>Option1</option>
<option id='opt2'>Option2</option>
<option id='opt3'>Option3</option>
</select>
<select multiple aria-label="Combo2">
<option id='opt4' selected>Option4</option>
<option id='opt5' selected>Option5</option>
<option id='opt6' selected>Option6</option>
</select>
<select aria-label="Combo3">
<option id='opt7' selected>Option7</option>
<option id='opt8'>Option8</option>
<option id='opt9'>Option9</option>
</select>
<select multiple aria-label="Combo4">
<option id='opt10'>Option10</option>
<option id='opt11'>Option11</option>
<option id='opt12'>Option12</option>
<option id='opt13'>Option13</option>
<option id='opt14'>Option14</option>
<option id='opt15'>Option15</option>
<option id='opt16'>Option16</option>
<option id='opt17'>Option17</option>
<option id='opt18'>Option18</option>
<option id='opt19'>Option19</option>
<option id='opt20'>Option20</option>
<option id='opt21'>Option21</option>
<option id='opt22'>Option22</option>
<option id='opt23'>Option23</option>
<option id='opt24'>Option24</option>
<option id='opt25'>Option25</option>
<option id='opt26'>Option26</option>
<option id='opt27'>Option27</option>
<option id='opt28'>Option28</option>
<option id='opt29'>Option29</option>
<option id='opt30'>Option30</option>
<option id='opt31'>Option31</option>
<option id='opt32'>Option32</option>
<option id='opt33'>Option33</option>
<option id='opt34'>Option34</option>
<option id='opt35'>Option35</option>
<option id='opt36'>Option36</option>
<option id='opt37'>Option37</option>
<option id='opt38'>Option38</option>
<option id='opt39'>Option39</option>
</select>
<script>
var go_passes = [
// Select opt2 & opt3; the first should fire 'ElementSelected' (on opt2,
// the only item selected), and then the second should fire
// 'ElementAdded'.
() => document.getElementById('opt2').setAttribute('selected', 'true'),
() => document.getElementById('opt3').setAttribute('selected', 'true'),
// Deselect opt4 & opt5; the first should fire 'ElementRemoved' (because
// there are still multiple elements selected), and the second should
// fire 'ElementSelected' (on opt6, the only item that remains
// selected).
() => document.getElementById('opt4').removeAttribute('selected'),
() => document.getElementById('opt5').removeAttribute('selected'),
// Select opt8 from the third <select>; since this element only supports
// single select, it should simply fire 'ElementSelected'.
() => document.getElementById('opt8').setAttribute('selected', 'true'),
// Select a bunch of items from the fourth <select>; beyond 20 changes,
// we should just get a 'SelectionInvalidated' event.
() => {
for(var i = 10; i < 35; ++i)
document.getElementById(`opt${i}`).setAttribute('selected', 'true');
},
];
var current_pass = 0;
function go() {
go_passes[current_pass++].call();
return current_pass < go_passes.length;
}
</script>
</body>
</html>