<!DOCTYPE html>

<html>
<head>
    <script src="../../../../resources/ui-helper.js"></script>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        async function runTest()
        {
            if (!testRunner.runUIScript)
                return;

            function fail(event) {
                output += 'FAILED!: No mouse event should be receive, we got a ' + event.type;
            }
            window.addEventListener('mouseover', fail);
            window.addEventListener('mouseout', fail);
            window.addEventListener('mouseenter', fail);
            window.addEventListener('mouseleave', fail);
            window.addEventListener('mousedown', fail);
            window.addEventListener('mousemove', fail);
            window.addEventListener('mouseup', fail);
            window.addEventListener('click', fail);

            let output = '';
            function getLogEvent(listener) {
                return function logEvent(event) {
                    output += 'Listener ' + listener + ' received' + (event.cancelable ? ' cancelable' : '') + ' event ' + event.type + ' targetting ' + event.target.id;
                    if (event.touches[0] && event.touches[0].clientX) {
                        output += ' at ' + event.touches[0].clientX + ', ' + event.touches[0].clientY;
                    }
                    output += '<br>';
                    output += 'defaultPrevented before preventDefault(): ' + event.defaultPrevented + '<br>';
                    event.preventDefault();
                    output += 'defaultPrevented after preventDefault(): ' + event.defaultPrevented + '<br>';
                }
            }

            let target1 = document.getElementById('eventTarget1');
            target1.addEventListener('touchstart', getLogEvent("target1"));
            target1.addEventListener('touchmove', getLogEvent("target1"));
            target1.addEventListener('touchend', getLogEvent("target1"));
            target1.addEventListener('touchcancel', getLogEvent("target1"));
            let target3 = document.getElementById('eventTarget3');
            target3.addEventListener('touchstart', getLogEvent("target3"), { 'passive': true });
            target3.addEventListener('touchmove', getLogEvent("target3"), { 'passive': true });
            target3.addEventListener('touchend', getLogEvent("target3"), { 'passive': true });
            target3.addEventListener('touchcancel', getLogEvent("target3"), { 'passive': true });

            output += "<h1>Tap on Target1 (green)</h1>";
            await UIHelper.tapAt(50, 50);

            output += "<br><h1>Tap on Target2 (red)</h1>";
            await UIHelper.tapAt(150, 50);

            output += "<br><h1>Tap on Target3 (blue)</h1>";
            await UIHelper.tapAt(250, 50);

            document.getElementById('output').innerHTML = output;
            testRunner.notifyDone();
        }

        window.addEventListener('load', runTest, false);
    </script>
    <style>
        * { touch-action: manipulation; }
        body {
            margin: 0;
        }
        #eventTarget1, #eventTarget2, #eventTarget3 {
            width: 100px;
            height: 100px;
        }
        #eventTarget1 {
            background-color: green;
        }
        #eventTarget2 {
            background-color: red;
            position: absolute;
            left: 100px;
        }
        #eventTarget3 {
            background-color: blue;
            position: absolute;
            left: 100px;
        }
    </style>
    <meta name="viewport" content="initial-scale=1">
</head>
<body>
    <div id=eventTarget1>
        <div id=eventTarget2>
            <div id=eventTarget3>
            </div>
        </div>
    </div>
    <div id=output>
    This test requires UIScriptController to run.
    </div>
</body>
</html>