<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src="../../../resources/js-test.js"></script>
    <script src="../form-validation.js"></script>
    <script>
    jsTestIsAsync = true;

    function getTapAtPointUIScript(x, y)
    {
        return `
            (function() {
                uiController.singleTapAtPoint(${x}, ${y}, function() {
                    uiController.uiScriptComplete('');
                });
            })();`
    }

    function doTap()
    {
        return new Promise((resolve) => {
            testRunner.runUIScript(getTapAtPointUIScript(70, 70), function() {
                resolve();
            });
        });
    }

    function tapUntilBubbleIsDismissed()
    {
        // There is a small amount of time after we ask to show the popover before the popover is actually shown on screen.
        // During this period, clicks are eaten and not reported to the view. For this reason, we keep tapping until the
        // popup is dismissed.
        return new Promise((resolve) => {
            doTap().then(() => {
                getValidationMessage().then((message) => {
                    if (message === "") {
                        resolve();
                        return;
                    }
                    tapUntilBubbleIsDismissed().then(resolve);
                });
            });
        });
    }

    function doTest()
    {
        if (!testRunner.runUIScript)
            return;

        description("Tests that tapping the view dismisses the HTML form validation popover.");

        document.getElementById("testSubmitButton").click();

        getValidationMessage().then((_message) => {
            if (_message !==  "Select this checkbox")
                testFailed("Unexpected validation message: " + _message);

            tapUntilBubbleIsDismissed().then(() => {
                testPassed("Validation bubble was dismissed on tap");
                finishJSTest();
            });
        });
    }

    window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
<form>
<input type="checkbox" id="testInput" required><input type="submit" id="testSubmitButton">
</form>
</body>
</html>