<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<select id="select" size="0">
<option id="option1">Apple</option>
<option id="option2">Orange</option>
<option id="option3">Banana</option>
</select>

<script>
function axElementById(id) {
  return accessibilityController.accessibleElementById(id);
}

test(() => {
  var select = document.querySelector('select');
  select.focus();
  select.selectedIndex = 0;

  var axSelect = axElementById('select');
  var axOption1 = axElementById('option1');
  assert_true(axSelect.isFocused);
  assert_equals(axSelect.activeDescendant, undefined);
  assert_true(axOption1.isFocusable);
  assert_true(axOption1.isSelected);
  assert_equals(axSelect.childrenCount, 1);

  var axMenuListPopup = axSelect.childAtIndex(0);
  assert_equals(axMenuListPopup.role, 'AXRole: AXMenuListPopup');
  assert_equals(axMenuListPopup.activeDescendant, axOption1);
}, 'An active descendant should be exposed on the menu list popup when an option is selected and the select element is focused.');

test(() => {
  var select = document.querySelector('select');
  select.blur();
  select.selectedIndex = 1;

  var axSelect = axElementById('select');
  var axOption2 = axElementById('option2');
  assert_false(axSelect.isFocused);
  assert_equals(axSelect.activeDescendant, undefined);
  assert_true(axOption2.isFocusable);
  assert_true(axOption2.isSelected);
  assert_equals(axSelect.childrenCount, 1);

  var axMenuListPopup = axSelect.childAtIndex(0);
  assert_equals(axMenuListPopup.role, 'AXRole: AXMenuListPopup');
}, 'An active descendant should not be exposed on the menu list popup when the select element is not focused.');
</script>