| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div role="main"> |
| <input id="comboBox" |
| role="combobox" |
| type="search" |
| aria-autocomplete="list" |
| aria-expanded="true" |
| aria-haspopup="true" |
| aria-activedescendant="state2" |
| aria-owns="stateList"> |
| |
| <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(() => { |
| document.body.offsetTop; |
| window.comboBox = accessibilityController.accessibleElementById('comboBox'); |
| document.querySelector('input').focus(); |
| document.querySelector('ul').style.display = 'block'; |
| }); |
| |
| test((t) => { |
| assert_true(window.comboBox.isFocused, 'Combo box should be focused.'); |
| let state1 = accessibilityController.accessibleElementById('state1'); |
| assert_false(state1.isSelected, 'State1 should not be selected.'); |
| assert_true(state1.isFocusable, 'State1 should be focusable.'); |
| assert_false(state1.isFocused, 'State1 should not be focused.'); |
| |
| let state2 = accessibilityController.accessibleElementById('state2'); |
| assert_equals(window.comboBox.activeDescendant, state2, 'State2 should be the active descendant.'); |
| assert_true(state2.isSelected, 'State2 should be selected.'); |
| assert_true(state2.isFocusable, 'State2 should be focusable.'); |
| assert_false(state2.isFocused, 'State2 should not be focused.'); |
| }, 'An option with an activedescendant pointing to it is selected.'); |
| |
| test((t) => { |
| document.querySelector('input').setAttribute('aria-activedescendant', 'state1'); |
| |
| assert_true(window.comboBox.isFocused, 'Combo box should be focused.'); |
| let state1 = accessibilityController.accessibleElementById('state1'); |
| assert_equals(window.comboBox.activeDescendant, state1, 'State1 should be the active descendant.'); |
| assert_true(state1.isSelected, 'State1 should be selected.'); |
| assert_true(state1.isFocusable, 'State1 should be focusable.'); |
| assert_false(state1.isFocused, 'State1 should not be focused.'); |
| |
| let state2 = accessibilityController.accessibleElementById('state2'); |
| assert_false(state2.isSelected, 'State2 should not be selected.'); |
| assert_true(state2.isFocusable, 'State2 should be focusable.'); |
| assert_false(state2.isFocused, 'State2 should not be focused.'); |
| |
| document.querySelector('input').setAttribute('aria-activedescendant', 'state2'); |
| }, 'Changing the activedescendant should change the item that is selected.'); |
| </script> |