<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>
<style>
select, select::picker(select) {
    appearance: base-select;
}
</style>
</head>
<body>

<select id="select">
    <option id="option1">Apple</option>
    <option id="option2" selected>Banana</option>
    <option id="option3">Cherry</option>
</select>

<script>
var output = "This test verifies basic accessibility properties of base-appearance selects (appearance: base-select).\n\n";

function expectMenuItem(axElement, expectedText) {
    var result = "";
    result += expect("(" + axElement + ").role.toLowerCase().includes('menuitem')", "true");
    window._menuItemText = platformTextAlternatives(eval(axElement));
    result += _menuItemText + "\n";
    result += expect("_menuItemText.includes('" + expectedText + "')", "true");
    return result;
}

if (window.accessibilityController) {
    window.jsTestIsAsync = true;

    var select = accessibilityController.accessibleElementById("select");

    output += "--- Select role and value ---\n";
    output += expect("select.role.toLowerCase().includes('popup')", "true");
    output += expect("select.stringValue.includes('Banana')", "true");
    output += expect("select.isExpanded", "false");

    setTimeout(async function() {
        select.press();
        output += await expectAsync("select.isExpanded", "true");

        // The select should contain a Menu which wraps the MenuItems.
        output += expect("select.childrenCount", "1");
        window.menu = select.childAtIndex(0);
        output += expect("menu.role.toLowerCase().includes('menu')", "true");
        output += expect("menu.childrenCount", "3");

        output += expectMenuItem("menu.childAtIndex(0)", "Apple");
        output += expectMenuItem("menu.childAtIndex(1)", "Banana");
        output += expectMenuItem("menu.childAtIndex(2)", "Cherry");

        output += expect("menu.childAtIndex(0).isSelected", "false");
        output += expect("menu.childAtIndex(1).isSelected", "true");
        output += expect("menu.childAtIndex(2).isSelected", "false");

        output += expect("menu.selectedChildrenCount", "1");
        output += expectMenuItem("menu.selectedChildAtIndex(0)", "Banana");

        // Press to close the picker.
        select.press();
        output += await expectAsync("select.isExpanded", "false");

        debug(output);
        finishJSTest();
    }, 0);
}
</script>
</body>
</html>