<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<p id="description"></p>
<div id="sandbox"></div>
<pre id="console"></pre>
<script>
description("Tests to ensure that all kinds of events are not stopeed at shadow boundary if created by users.");

var eventRecords = {};

function dispatchedEvent(eventType)
{
    var events = eventRecords[eventType];
    if (!events)
        return [];
    return events;
}

function dumpDispatchedEvent(eventType)
{
    debug('\n  ' + eventType);
    var events = dispatchedEvent(eventType);
    for (var i = 0; i < events.length; ++i)
        debug('    ' + events[i])
}

function recordEvent(event)
{
    var eventType = event.type
    if (!eventRecords[eventType]) {
        eventRecords[eventType] = []
    }
    var eventString = '';
    if (event.currentTarget)
        eventString += ' @' + event.currentTarget.id;
    if (event.target)
        eventString += ' (target: ' + event.target.id + ')';
    if (event.relatedTarget)
        eventString += ' (related: ' + event.relatedTarget.id + ')';
    if (event.eventPhase == 1)
        eventString += '(capturing phase)';
    if (event.target && event.currentTarget && event.target.id == event.currentTarget.id)
        shouldBe("event.eventPhase", "2", true);
    eventRecords[eventType].push(eventString);
}

debug('None of the events should be stopped at a Shadow boundary if created by users.'); 

var events = ['abort', 'select', 'change', 'reset', 'resize', 'scroll', 'selectstart', 'load', 'click'];

function addEventListeners(nodes)
{
    for (var i = 0; i < nodes.length; ++i) {
        var node = getNodeInTreeOfTrees(nodes[i]);
        for (var j = 0; j < events.length; ++j)
            node.addEventListener(events[j], recordEvent, false);
    }
}

function testEventsShouldNotBeStoppedAtShadowBoundary()
{
    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {'id': 'top'},
                  createDOM('div', {'id': 'host'},
                            createShadowRoot(
                                createDOM('div', {'id': 'parent-of-target'},
                                          createDOM('div', {'id': 'target'})),
                                createDOM('div', {'id': 'parent-of-content'},
                                          createDOM('content', {'id': 'content'}))),
                            createDOM('div', {'id': 'distributed-child'}))));
    document.body.offsetLeft;

    addEventListeners(['top', 'host', 'host/parent-of-target', 'host/target', 'host/parent-of-content', 'host/content', 'distributed-child']);

    for (var i = 0; i < events.length; ++i) {
        eventRecords = {};
        var event = document.createEvent('UIEvent');
        event.initEvent(events[i], true, false);
        getNodeInTreeOfTrees('host/target').dispatchEvent(event);
        dumpDispatchedEvent(events[i]);
    }

}

function testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary()
{
    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {'id': 'host1'},
                  createShadowRoot(
                      createDOM('div', {'id': 'host2'},
                                createShadowRoot(
                                    createDOM('div', {'id': 'parent-of-content'},
                                              createDOM('content', {'id': 'content'}))),
                                createDOM('div', {'id': 'distributed-child'})))));
    document.body.offsetLeft;

    addEventListeners(['host1', 'host1/host2', 'host1/host2/parent-of-content', 'host1/host2/content', 'host1/distributed-child']);

    debug('\nAn event fired on a distributed child should not be stopped at the shadow boundary of its host (host2), but should be stopped at the nearest shadow boundary (host1).');
    eventRecords = {};
    var event = document.createEvent('UIEvent');
    event.initEvent('selectstart', true, false);
    getNodeInTreeOfTrees('host1/distributed-child').dispatchEvent(event);
    dumpDispatchedEvent('selectstart');
}

function testEventsInMultipleShadowTrees()
{
    debug("\nAn event is dispatched on a node in an older shadow tree. The older and the younger shadow root should receive the event, however, the shadow host shouldn't");

    var sandbox = document.getElementById('sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
          createDOM('div', {'id': 'shadow-host'},
                    createShadowRoot({'id': 'older-shadow-root'},
                                     createDOM('div', {'id': 'target'})),
                    createShadowRoot({'id': 'younger-shadow-root'},
                        createDOM('shadow', {'id': 'shadow-insertion-point'}))));
    document.body.offsetLeft;

    addEventListeners(['shadow-host', 'shadow-host/', 'shadow-host/target', 'shadow-host//', 'shadow-host//shadow-insertion-point']);

    eventRecords = {};
    var event = document.createEvent('UIEvent');
    event.initEvent('selectstart', true, false);
    getNodeInTreeOfTrees('shadow-host/target').dispatchEvent(event);
    dumpDispatchedEvent('selectstart');
}

function test()
{
    testEventsShouldNotBeStoppedAtShadowBoundary();
    testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary();
    testEventsInMultipleShadowTrees();
}
test();
</script>
</body>
</html>