<!DOCTYPE html>
<html>
<body>
<p>Tests for retargeting touch targets. This test requires touch events support and runUIScript.</p>
<script>

function block(width, height, color) {
    return {display: 'block', width: width + 'px', height: height + 'px', backgroundColor: color};
}

function inlineBlock(width, height, color) {
    return {display: 'inline-block', width: width + 'px', height: height + 'px', backgroundColor: color};
}

function addChildren(parent, children) {
    for (var child of children) {
        if (typeof(child) == 'string')
            child = document.createTextNode(child);
        parent.appendChild(child);
    }
}

function element(name, children) {
    var element = document.createElement(name);
    element.treeName = name;
    if (children)
        addChildren(element, children);
    return element;
}

function elementWithStyle(name, style, children) {
    var newElement = element(name, children);
    for (var name in style)
        newElement.style[name] = style[name];
    return newElement;
}

function attachShadow(name, element, shadowChildren) {
    var shadowRoot = element.attachShadow({mode: 'closed'});
    shadowRoot.treeName = name;
    element.shadowTree = shadowRoot;
    addChildren(shadowRoot, shadowChildren);
    return shadowRoot;
}

/*
parent
 + left-host -- (left-shadow)
 |               + left-shadow-target
 + right-upper-host --------------------------------- (right-upper-shadow)
 | + right-lower-host -- (right-lower-shadow)          + right-shadow-child
 |   + right-target       + right-lower-shadow-child     + slot
 |                          + slot
 + bottomTarget
*/

var leftHost = elementWithStyle('left-host', block(200, 150, 'yellow'));
var leftTarget = elementWithStyle('left-shadow-target', block(100, 100, 'red'));
var leftShadowRoot = attachShadow('left-shadow', leftHost, [leftTarget]);

var rightTarget = elementWithStyle('right-target', block(50, 50, 'blue'));
var rightLowerHost = elementWithStyle('right-lower-host', block(100, 100, 'purple'), [rightTarget]);
var rightLowerShadowRoot = attachShadow('right-lower-shadow', rightLowerHost, [
    elementWithStyle('right-lower-shadow-child', block(100, 100, 'pink'), [
        element('slot')
    ])]);

var rightUpperHost = elementWithStyle('right-upper-host', block(250, 250, 'green'), [rightLowerHost]);
var rightUpperShadowRoot = attachShadow('right-upper-shadow', rightUpperHost, [
    elementWithStyle('right-shadow-child', block(200, 200, 'purple'), [
        element('slot')
    ])]);

var bottomTarget = elementWithStyle('bottom-target', block(100, 100, '#666'));

document.body.appendChild(elementWithStyle('host-parent', block(500, 500, '#eee'), [leftHost, rightUpperHost, bottomTarget]));

function getUIScript()
{
    function xCenter(element) { return element.offsetLeft + element.offsetWidth / 2; }
    function yCenter(element) { return element.offsetTop + element.offsetHeight / 2; }

    return `
    (function() {
        uiController.touchDownAtPoint(${xCenter(leftTarget)}, ${yCenter(leftTarget)}, 1, function() {
            uiController.touchDownAtPoint(${xCenter(rightTarget)}, ${yCenter(rightTarget)}, 2, function() {
                uiController.touchDownAtPoint(${xCenter(bottomTarget)}, ${yCenter(bottomTarget)}, 3, function() {
                    uiController.liftUpAtPoint(${xCenter(leftTarget)}, ${yCenter(leftTarget)}, 2, function () {
                        uiController.liftUpAtPoint(${xCenter(rightTarget)}, ${yCenter(rightTarget)}, 1, function () {
                            uiController.liftUpAtPoint(${xCenter(bottomTarget)}, ${yCenter(bottomTarget)}, 0, function () {
                                uiController.uiScriptComplete("Done");
                            });
                        });
                    });
                });
            });
        });
    })();`
}

window.onload = function runTest()
{
    if (window.testRunner)
        testRunner.dumpAsText();

    function formatTouchList(list) {
        var text = '';
        for (var i = 0; i < list.length; i++) {
            if (text)
                text += ', ';
            text += `${i}: ${list[i].target.treeName}`;
        }
        return `[${text}]`;
    }

    var output = '';

    function logger(event) {
        output += `${event.type} at ${this.treeName} with
    target: ${event.target.treeName}
    touches: ${formatTouchList(event.touches)}
    targetTouches: ${formatTouchList(event.targetTouches)}
    changedTouches: ${formatTouchList(event.changedTouches)}

`;
    }

    function attachLoggers(node) {
        node.addEventListener('touchstart', logger);
        node.addEventListener('touchmove', logger);
        node.addEventListener('touchend', logger);
    }

    document.body.treeName = 'body';
    document.treeName = 'document';
    attachLoggers(document);
    attachLoggers(leftShadowRoot);
    attachLoggers(rightUpperShadowRoot);
    attachLoggers(rightLowerShadowRoot);

    if (window.testRunner && testRunner.runUIScript) {
        testRunner.waitUntilDone();
        testRunner.runUIScript(getUIScript(), function(result) {
            var pre = document.createElement('pre');
            pre.textContent = output;
            document.body.appendChild(pre);
            testRunner.notifyDone();
        });
    }
}

</script>
</body>
</html>