| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <input role="combobox" |
| type="search" |
| aria-autocomplete="list" |
| aria-expanded="true" |
| aria-haspopup="true" |
| aria-activedescendant="state20" |
| aria-owns="stateList0"> |
| |
| <ul id="stateList0" |
| role="listbox"> |
| <li id="state10" role="option">Alabama</li> |
| <li id="state20" role="option">Alaska</li> |
| </ul> |
| |
| <input role="combobox" |
| type="search" |
| aria-autocomplete="list" |
| aria-expanded="true" |
| aria-haspopup="true" |
| aria-activedescendant="state21" |
| aria-controls="stateList1"> |
| |
| <ul id="stateList1" |
| role="listbox"> |
| <li id="state11" role="option">Alabama</li> |
| <li id="state21" role="option">Alaska</li> |
| </ul> |
| |
| <input role="combobox" |
| type="search" |
| aria-autocomplete="list" |
| aria-expanded="true" |
| aria-haspopup="true" |
| aria-activedescendant="state22" |
| aria-controls="stateList2" |
| aria-owns="stateList2"> |
| |
| <ul id="stateList2" |
| role="listbox"> |
| <li id="state12" role="option">Alabama</li> |
| <li id="state22" role="option">Alaska</li> |
| </ul> |
| |
| <script> |
| test(() => { |
| for (let i = 0; i < 3; ++i) { |
| document.querySelectorAll('input')[i].focus(); |
| |
| let state1 = accessibilityController.accessibleElementById('state1' + i); |
| 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' + i); |
| assert_equals(accessibilityController.focusedElement.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(() => { |
| for (let i = 0; i < 3; ++i) { |
| document.querySelectorAll('input')[i].focus(); |
| document.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state1' + i); |
| |
| let state1 = accessibilityController.accessibleElementById('state1' + i); |
| assert_equals(accessibilityController.focusedElement.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' + i); |
| 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.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state2' + i); |
| } |
| }, 'Changing the activedescendant should change the item that is selected.'); |
| </script> |
