<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        let ranAllSteps = false;

        function longPress(continuation)
        {
            // We start by long-pressing on the target which should display a menu.
            testRunner.runUIScript(`
            (function() {
                uiController.longPressAtPoint(100, 100, function() {
                    uiController.uiScriptComplete();
                });
             })();`, tapToDismiss);
        }

        function tapToDismiss()
        {
            // Then we tap to dismiss the panel.
            testRunner.runUIScript(`
            (function() {
                uiController.singleTapAtPoint(0, 0, function() {
                    uiController.uiScriptComplete();
                });
             })();`, tapToClick);
        }

        function tapToClick()
        {
            // And tap again to trigger a click event.
            document.getElementById('target').addEventListener("click", event => {
                event.currentTarget.textContent = "PASS";
                testRunner.notifyDone();
            });

            testRunner.runUIScript(`
            (function() {
                uiController.singleTapAtPoint(100, 100, function() {
                    uiController.uiScriptComplete();
                });
             })();`);
        }

        window.addEventListener('load', event => {
            if (testRunner.runUIScript)
                longPress();
        });
    </script>
    <style>
        #target {
            height: 100px;
            width: 200px;
        }
    </style>
    <meta name="viewport" content="initial-scale=1">
</head>
<body>
<div id="target">
    <img src="../../../images/resources/dice.png" width="320" height="240" alt="Dice">
    FAIL.
</div>
</body>
</html>