select-selected-add-remove.html | Explore in Territory

<!--
@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>
chromium/content/test/data/accessibility/event/select-selected-add-remove.html
