<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true IOSFormControlRefreshEnabled=true ] -->
<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>
    </head>
<body>
<select id="select">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>
</body>
<script>
jsTestIsAsync = true;

addEventListener("load", async () => {
    description("This test verifies that a dropdown menu is displayed, and can be interacted with, after tapping on a select element that focuses itself inside a touchend listener.");

    select.addEventListener("touchend", event => {
        select.focus();
    });

    shouldBeEqualToString("select.value", "January");
    await UIHelper.activateElement(select);
    await UIHelper.waitForContextMenuToShow();
    await UIHelper.selectFormAccessoryPickerRow(3);
    await UIHelper.waitForContextMenuToHide();
    shouldBeEqualToString("select.value", "April");

    finishJSTest();
});
</script>
</html>
