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

<div id="contenteditable-textbox" role="textbox" contenteditable="true"
    aria-expanded="true" aria-haspopup="true" aria-autocomplete="list"
    aria-activedescendant="list1-option1">
    <ul id="list1" role="listbox">
        <li id="list1-option1" role="option">Option 1</li>
        <li id="list1-option2" role="option">Option 2</li>
        <li id="list1-option3" role="option">Option 3</li>
    </ul>
</div>

<input id="input-textbox" role="textbox" type="text" aria-expanded="true"
    aria-haspopup="true" aria-autocomplete="list"
    aria-activedescendant="list2-option1" aria-owns="list2">

<ul id="list2" role="listbox">
    <li id="list2-option1" role="option">Option 1</li>
    <li id="list2-option2" role="option">Option 2</li>
    <li id="list2-option3" role="option">Option 3</li>
</ul>

<input id="input-combobox" role="combobox" type="search" aria-expanded="true"
    aria-haspopup="true" aria-autocomplete="list"
    aria-activedescendant="list3-option1" aria-owns="list3">

<ul id="list3" role="listbox">
    <li id="list3-option1" role="option">Option 1</li>
    <li id="list3-option2" role="option">Option 2</li>
    <li id="list3-option3" role="option">Option 3</li>
</ul>

<textarea id="textarea-searchbox" role="searchbox" aria-expanded="true"
    aria-haspopup="true" aria-autocomplete="list"
    aria-activedescendant="list4-option1" aria-owns="list4"></textarea>

<ul id="list4" role="listbox">
    <li id="list4-option1" role="option">Option 1</li>
    <li id="list4-option2" role="option">Option 2</li>
    <li id="list4-option3" role="option">Option 3</li>
</ul>

<input id="pure-native-input-textbox" type="text" aria-expanded="true"
    aria-haspopup="true" aria-autocomplete="list"
    aria-activedescendant="list5-option1" aria-owns="list5">

<ul id="list5" role="listbox">
    <li id="list5-option1" role="option">Option 1</li>
    <li id="list5-option2" role="option">Option 2</li>
    <li id="list5-option3" role="option">Option 3</li>
</ul>

<script>
    function testEventExpectations(t, widgetId, listboxId)
    {
        var listbox = document.getElementById(listboxId);
        var widget = document.getElementById(widgetId);
        var axWidget = accessibilityController.accessibleElementById(widgetId);
        var focusChangedEventCount = 0;
        var markDirtyEventCount = 0;
        axWidget.addNotificationListener(function(notification)
        {
            if (notification == "Focus")
                ++focusChangedEventCount;
            if (notification == "MarkDirty")
                ++markDirtyEventCount;
            if (focusChangedEventCount == 1 && markDirtyEventCount == 3) {
                widget.style.display = "none";
                listbox.style.display = "none";
                t.done();
            }
        });

        widget.focus();
        widget.setAttribute("aria-activedescendant", listboxId + "-option2");
        widget.setAttribute("aria-activedescendant", listboxId + "-option3");
        widget.removeAttribute("aria-activedescendant");
    }
</script>

<script>
    async_test(function(t)
    {
        testEventExpectations(t, "contenteditable-textbox", "list1");
    }, "Changing active descendant on a content editable.");
</script>

<script>
    async_test(function(t)
    {
        testEventExpectations(t, "input-textbox", "list2");
    }, "Changing active descendant on an input with role=textbox.");
</script>

<script>
    async_test(function(t)
    {
        testEventExpectations(t, "input-combobox", "list3");
    }, "Changing active descendant on an input of type=search with role=combobox.");
</script>

<script>
    async_test(function(t)
    {
        testEventExpectations(t, "textarea-searchbox", "list4");
    }, "Changing active descendant on a textarea with role=searchbox.");
</script>

<script>
    async_test(function(t)
    {
        testEventExpectations(t, "pure-native-input-textbox", "list5");
    }, "Changing active descendant on an input with no role attribute.");
</script>