| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div role="main"> |
| <div id="comboBox" |
| role="combobox" |
| aria-autocomplete="list" |
| aria-expanded="true" |
| aria-haspopup="listbox"> |
| <input id="comboBoxInput" |
| type="text" |
| aria-controls="states-list" |
| aria-activedescendant="state2"> |
| </div> |
| |
| <ul id="stateList" |
| role="listbox" |
| style="display: none;"> |
| <li id="state1" role="option">Alabama</li> |
| <li id="state2" role="option">Alaska</li> |
| </ul> |
| </div> |
| |
| <script> |
| setup(() => { |
| window.comboBoxInput = accessibilityController.accessibleElementById('comboBoxInput'); |
| document.querySelector('input').focus(); |
| document.querySelector('ul').style.display = 'block'; |
| }); |
| |
| async_test((t) => { |
| t.step_timeout(() => { |
| assert_true(window.comboBoxInput.isFocused, 'Combo box should be focused.'); |
| let state1 = accessibilityController.accessibleElementById('state1'); |
| assert_false(state1.isSelected, 'State1 should not be selected.'); |
| assert_false(state1.isFocused, 'State1 should not be focused.'); |
| |
| let state2 = accessibilityController.accessibleElementById('state2'); |
| assert_equals(window.comboBoxInput.activeDescendant, state2, 'State2 should be the active descendant.'); |
| assert_true(state2.isSelected, 'State2 should be selected.'); |
| assert_false(state2.isFocused, 'State2 should not be focused.'); |
| |
| t.done(); |
| }, 0); |
| }, 'An option with an activedescendant pointing to it is selected.'); |
| |
| async_test((t) => { |
| t.step_timeout(() => { |
| document.querySelector('input').setAttribute('aria-activedescendant', 'state1'); |
| |
| assert_true(window.comboBoxInput.isFocused, 'Combo box should be focused.'); |
| let state1 = accessibilityController.accessibleElementById('state1'); |
| assert_equals(window.comboBoxInput.activeDescendant, state1, 'State1 should be the active descendant.'); |
| assert_true(state1.isSelected, 'State1 should be selected.'); |
| assert_false(state1.isFocused, 'State1 should not be focused.'); |
| |
| let state2 = accessibilityController.accessibleElementById('state2'); |
| assert_false(state2.isSelected, 'State2 should not be selected.'); |
| assert_false(state2.isFocused, 'State2 should not be focused.'); |
| |
| document.querySelector('input').setAttribute('aria-activedescendant', 'state2'); |
| t.done(); |
| }, 0); |
| }, 'Changing the activedescendant should change the item that is selected.'); |
| </script> |