<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<!-- Start with -->
<div role="main">
<input id="comboBox"
role="combobox"
type="search"
autofocus
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="true"
aria-activedescendant="state2"
aria-controls="stateList">
<div id="container"/>
</div>
<script>
async_test((t) => {
let comboBox = accessibilityController.accessibleElementById('comboBox');
document.getElementById('container').innerHTML =
'<ul id="stateList" role="listbox"><li id="state1" role="option">Alabama</li><li id="state2" role="option">Alaska</li></ul>';
document.body.offsetTop;
t.step_timeout(() => {
assert_true(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(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.');
t.done();
}, 1);
}, 'An option with an activedescendant pointing to it is selected.');
</script>