<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.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 some kinds of events are stopeed at shadow boundary.");

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('Other events than "click" should be stopped at shadow boundary.  A "click" is added for the purpose of comparing results.'); 

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

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

function testEventsShoudBeStoppedAtShadowBoundary()
{
    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);
        getNodeInShadowTreeStack('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);
    getNodeInShadowTreeStack('host1/distributed-child').dispatchEvent(event);
    dumpDispatchedEvent('selectstart');
}

function test()
{
    if (window.testRunner)
        testRunner.dumpAsText();

    testEventsShoudBeStoppedAtShadowBoundary()
    testEventsFiredOnDistributedNodesShouldNotBeStoppedAtShadowBoundary();
}
test();
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>