<!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>
var idsToTest = [ [ "contenteditable-textbox", "list1" ],
                  [ "input-textbox", "list2" ],
                  [ "input-combobox", "list3" ],
                  [ "textarea-searchbox", "list4" ],
                  [  "pure-native-input-textbox", "list5" ] ];

function testEventExpectations(t, widgetId, listboxId) {
    var focusChangedEventCount = 0;
    var markDirtyEventCount = 0;
    window.setTimeout(t.step_func(() => {
        if (focusChangedEventCount < 1 || markDirtyEventCount < 3)
            assert_unreached("Did not receive all expected notifications on " + widgetId);
    }), 500);
    var listbox = document.getElementById(listboxId);
    var widget = document.getElementById(widgetId);
    var axWidget = accessibilityController.accessibleElementById(widgetId);
    var focusChangedEventCount = 0;
    var markDirtyEventCount = 0;
    axWidget.addNotificationListener(t.step_func(function(notification) {
        if (notification == "Focus") {
            console.log("Got focus notification on " + widgetId);
            ++focusChangedEventCount;
        }
        if (notification == "MarkDirty") {
            console.log("Got MarkDirty notification on " + widgetId);
            ++markDirtyEventCount;
        }
        if (focusChangedEventCount == 1 && markDirtyEventCount == 3) {
            window.setTimeout(t.step_func(() => {
                testNext(t);
            }, 0));
        }
    }));

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

function testNext(t) {
    if (idsToTest.length == 0)
        t.done();
    let nextIds = idsToTest.shift();
    t.step(() => { testEventExpectations(t, nextIds[0], nextIds[1]) });
}

async_test(function(t) {
    testNext(t);
}, "Changing active descendant triggers MarkDirty");
</script>