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

<!--

Accessibility Object Model
Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md
Spec: https://wicg.github.io/aom/spec/

-->

<script>
test(function(t) {
    assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);
}, "Make sure that Accessibility Object Model is enabled");
</script>

<div role="listbox" id="listbox" tabindex=0>
  <div role="option" id="option1">Option 1</div>
  <div role="option" id="option2">Option 2</div>
  <div role="option" id="option3">Option 3</div>
</div>

<script>
test(function(t) {
    var listbox = document.getElementById("listbox");
    var option1 = document.getElementById("option1");
    listbox.focus();
    var axListbox = accessibilityController.accessibleElementById("listbox");
    var axOption1 = accessibilityController.accessibleElementById("option1");
    assert_false(axOption1.isSelected);
    assert_equals(axListbox.ariaActiveDescendantElement(), undefined);

    listbox.accessibleNode.activeDescendant = option1.accessibleNode;

    assert_true(axListbox.ariaActiveDescendantElement().isEqual(axOption1));
    // Active Descendant also makes the option selected.
    assert_true(axOption1.isSelected);
}, "AccessibleNode.activeDescendant");
</script>

<input id="input1">
<div id="details">Details</div>

<script>
test(function(t) {
    var input1 = document.getElementById("input1");
    var details = document.getElementById("details");
    var axInput1 = accessibilityController.accessibleElementById("input1");
    var axDetails = accessibilityController.accessibleElementById("details");
    assert_equals(axInput1.ariaDetailsElement(), undefined);

    input1.accessibleNode.details = details.accessibleNode;

    assert_true(axInput1.ariaDetailsElement().isEqual(axDetails));
}, "AccessibleNode.details");
</script>

<input id="input2">
<div id="errorMessage">ErrorMessage</div>

<script>
test(function(t) {
    var input2 = document.getElementById("input2");
    var errorMessage = document.getElementById("errorMessage");
    var axInput2 = accessibilityController.accessibleElementById("input2");
    var axErrorMessage = accessibilityController.accessibleElementById("errorMessage");
    assert_equals(axInput2.ariaErrorMessageElement(), undefined);

    input2.accessibleNode.errorMessage = errorMessage.accessibleNode;

    assert_true(axInput2.ariaErrorMessageElement().isEqual(axErrorMessage));
}, "AccessibleNode.errorMessage");
</script>