<!DOCTYPE html>

<html>
<head>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function getDragUIScript(startX, startY, endX, endY)
        {
            return `
            (function() {
                uiController.dragFromPointToPoint(${startX}, ${startY}, ${endX}, ${endY}, 0.15, function() {
                    uiController.uiScriptComplete("Done");
                });
            })();`
        }

        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);
            window.addEventListener('scroll', 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>';

                    if (event.type === 'touchmove')
                        event.preventDefault();
                }
            }

            let target1 = document.getElementById('eventTarget1');
            target1.addEventListener('touchstart', getLogEvent("target1"), { 'passive': true });
            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"));
            target3.addEventListener('touchend', getLogEvent("target3"));
            target3.addEventListener('touchcancel', getLogEvent("target3"));

            output += "<h1>Cancelled drag on Target1 (green)</h1>";
            testRunner.runUIScript(getDragUIScript(50, 50, 100, 100), function(result) {
                output += result;
                output += "<h1>Cancelled drag on Target2 (red)</h1>";
                testRunner.runUIScript(getDragUIScript(150, 50, 200, 100), function(result) {
                    output += result;
                    output += "<h1>Cancelled drag on Target3 (blue)</h1>";
                    testRunner.runUIScript(getDragUIScript(250, 50, 300, 100), function(result) {
                        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;
        }
        body {
            height: 5000px;
        }
    </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>