<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
</head>
<body id="body">

<select name="suite" id="suite" multiple="multiple" size="24">

<optgroup label="main">
<option value="881">Item1</option>
<option value="938">Item2</option>
</optgroup>
<optgroup label="primary">
<option value="1027">Item3</option>
<option value="1049">Item4</option>
<option value="1050">Item5</option>
</optgroup>
</select>

<p id="description"></p>
<div id="console"></div>

<script>
description("This tests that setting selection within a list box works correctly if there are optgroups");

if (window.accessibilityController) {
    window.jsTestIsAsync = true;
    document.getElementById("suite").focus();

    window.selectElement = accessibilityController.focusedElement;
    shouldBe("selectElement.selectedChildrenCount", "0");

    window.option1 = selectElement.childAtIndex(1);
    window.option2 = selectElement.childAtIndex(2);
    window.option3 = selectElement.childAtIndex(4);

    // Selection operations happen after a delay so they don't hang. Check the result on a timeout.
    selectElement.setSelectedChild(option1);
    setTimeout(async function() {
        await waitFor(() => {
            return selectElement.selectedChildAtIndex(0).isEqual(option1);
        });
        shouldBeTrue("selectElement.selectedChildAtIndex(0).isEqual(option1)");

        selectElement.setSelectedChild(option2);
        await waitFor(() => {
            return selectElement.selectedChildAtIndex(0).isEqual(option2);
        });
        shouldBeTrue("selectElement.selectedChildAtIndex(0).isEqual(option2)");

        selectElement.setSelectedChild(option3);
        await waitFor(() => {
            return selectElement.selectedChildAtIndex(0).isEqual(option3);
        });
        shouldBeTrue("selectElement.selectedChildAtIndex(0).isEqual(option3)");

        finishJSTest();
    }, 0);
} else
    debug("window.accessibilityController is not present");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>