<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true IOSFormControlRefreshEnabled=false ] -->
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="../../../resources/js-test.js"></script>
    <script src="../../../resources/ui-helper.js"></script>
    <style>
        select {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <select>
        <optgroup label="A">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </optgroup>
        <optgroup label="B">
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
        </optgroup>
        <optgroup label="C">
            <option value="10">Ten</option>
            <option value="11">Eleven</option>
            <option value="12">Twelve</option>
            <option value="13">Thirteen</option>
        </optgroup>
    </select>
</body>
<script>
jsTestIsAsync = true;

addEventListener("load", async () => {
    description("This test verifies that checking items in a single-select menu with option groups does not leave behind checked select items. To manually run the test using iPhone, focus the select element, scroll down to the bottom, select an option, then scroll back up to the top. The first option ('One') should not appear checked.");

    const select = document.querySelector("select");
    await UIHelper.activateElementAndWaitForInputSession(select);

    const swipeGesture = new UIHelper.EventStreamBuilder().begin(160, 500).move(160, 200, 0.5).end().takeResult();
    await UIHelper.sendEventStream(swipeGesture);
    await UIHelper.selectFormAccessoryPickerRow(13);

    hasCheckedItemAtIndex0 = await UIHelper.selectFormAccessoryHasCheckedItemAtRow(0);
    hasCheckedItemAtIndex13 = await UIHelper.selectFormAccessoryHasCheckedItemAtRow(13);
    shouldBeFalse("hasCheckedItemAtIndex0");
    shouldBeTrue("hasCheckedItemAtIndex13");

    select.blur();
    await UIHelper.waitForKeyboardToHide();
    finishJSTest();
});
</script>
</html>
