<!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 shadow DOM boundary is not crossed during event propagation. Can only run within DRT.");

function moveMouseOver(element)
{
    if (!window.eventSender || !window.internals)
        return;

    var defaultPaddingSize = 20;
    var x = element.offsetLeft + element.offsetWidth / 2;
    var y;
    if (element.hasChildNodes() || window.internals.shadowRoot(element))
        y = element.offsetTop + defaultPaddingSize;
    else
        y = element.offsetTop + element.offsetHeight / 2;
    eventSender.mouseMoveTo(x, y);
}

var eventRecords = {};

function clearEventRecords()
{
    eventRecords = {};
}

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

function recordEvent(event)
{
    var eventType = event.type
    if (!eventRecords[eventType]) {
        eventRecords[eventType] = []
    }
    // Records each event in the following format per event type:
    //   eventRecords[eventType] = ['target.id(<-relatedTarget.id)(@currentTarget.id)',,,]
    //   * RelatedTarget and currentTarget may be omitted if they are not defined.
    // A new event is pushed back to the array of its event type.
    var eventString = '';
    eventString += event.target.id;
    if (event.relatedTarget)
        eventString += '(<-' + event.relatedTarget.id + ')';
    if (event.currentTarget)
        eventString += '(@' + event.currentTarget.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);
}

function prepareDOMTree(parent)
{
    parent.appendChild(
        createDOM('div', {'id': 'divA', 'style': 'padding-top: 40px'},
                  createDOM('div', {'id': 'divB', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
                  createDOM('div', {'id': 'divC', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
                  createDOM('div', {'id': 'shadowD', 'style': 'padding-top: 40px'},
                            createShadowRoot(
                                createDOM('div', {'id': 'divE', 'style': 'padding-top: 40px'},
                                          createDOM('div', {'id': 'shadowF', 'style': 'padding-top: 40px'},
                                                    createShadowRoot(
                                                        createDOM('div', {'id': 'shadowG', 'style': 'padding-top: 40px'},
                                                                  createShadowRoot(
                                                                      createDOM('div', {'id': 'divH', 'style': 'width: 40px; height: 40px', 'tabindex': 0}),
                                                                      createDOM('div', {'id': 'divI', 'style': 'width: 40px; height: 40px', 'tabindex': 0})))))),
                                createDOM('div', {'id': 'divJ', 'style': 'padding-top: 40px'},
                                          createDOM('div', {'id': 'shadowK', 'style': 'padding-top: 40px'},
                                                    createShadowRoot(
                                                        createDOM('div', {'id': 'divL', 'style': 'width: 40px; height: 40px', 'tabindex': 0}))))))));

    var ids = ['divA', 'divB', 'divC',
               'shadowD', 'shadowD/divE', 'shadowD/shadowF', 'shadowD/shadowF/shadowG',
               'shadowD/shadowF/shadowG/divH', 'shadowD/shadowF/shadowG/divI',
               'shadowD/divJ', 'shadowD/shadowK', 'shadowD/shadowK/divL'];
    for (var i = 0; i < ids.length; ++i) {
        var element = getNodeInShadowTreeStack(ids[i]);
        element.addEventListener('mouseover', recordEvent, false);
        element.addEventListener('mouseout', recordEvent, false);
        element.addEventListener('focusin', recordEvent, false);
        element.addEventListener('focusout', recordEvent, false);
        element.addEventListener('focus', recordEvent, true);  // capturing phase
        element.addEventListener('blur', recordEvent, true);  // capturing phase
    }
}

function moveMouse(oldElementId, newElementId, message)
{
    debug('\n' + message + '\n' + 'Moving mouse from ' + oldElementId + ' to ' + newElementId);
    moveMouseOver(getNodeInShadowTreeStack(oldElementId));
    clearEventRecords();
    moveMouseOver(getNodeInShadowTreeStack(newElementId));
}

function moveFocus(oldElementId, newElementId, message)
{
    debug('\n' + message + '\n' + 'Moving focus from ' + oldElementId + ' to ' + newElementId);
    getNodeInShadowTreeStack(oldElementId).focus();
    clearEventRecords();
    getNodeInShadowTreeStack(newElementId).focus();
}

function test()
{
    if (window.testRunner)
        testRunner.dumpAsText();
    prepareDOMTree(document.getElementById('sandbox'));

    // Test for mouseover/mouseout events.
    moveMouse('divB', 'divC',
              'Move mouse from a node to its sibling node. All nodes are outside of shadow boundary.');
    shouldBe('dispatchedEvent("mouseover")', '["divC(<-divB)(@divC)", "divC(<-divB)(@divA)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divB(<-divC)(@divB)", "divB(<-divC)(@divA)"]');

    moveMouse('divB', 'divA',
              'Target is an ancestor of relatedTarget. All nodes are outside of shadow boundary.');
    shouldBe('dispatchedEvent("mouseover")', '["divA(<-divB)(@divA)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divB(<-divA)(@divB)", "divB(<-divA)(@divA)"]');

    moveMouse('divA', 'divB',
              'RelatedTarget is an ancestor of target. All nodes are outside of shadow boundary.');
    shouldBe('dispatchedEvent("mouseover")', '["divB(<-divA)(@divB)", "divB(<-divA)(@divA)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divA(<-divB)(@divA)"]');

    moveMouse('shadowD/shadowF/shadowG/divH', 'shadowD/shadowF/shadowG/divI',
              'Both target and relatedTarget are immediate children of the same shadow root.');
    shouldBe('dispatchedEvent("mouseover")', '["divI(<-divH)(@divI)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divH(<-divI)(@divH)"]');

    moveMouse('shadowD/shadowF/shadowG/divI', 'shadowD/divE',
              'Target is an ancestor of relatedTarget.');
    shouldBe('dispatchedEvent("mouseover")', '["divE(<-shadowF)(@divE)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divI(<-divE)(@divI)", "shadowG(<-divE)(@shadowG)", "shadowF(<-divE)(@shadowF)", "shadowF(<-divE)(@divE)"]');

    moveMouse('shadowD/shadowF/shadowG/divI', 'shadowD/shadowF',
              'Target (shadow host) is an ancestor of relatedTarget.');
    shouldBe('dispatchedEvent("mouseover")', '[]');
    shouldBe('dispatchedEvent("mouseout")', '["divI(<-shadowF)(@divI)", "shadowG(<-shadowF)(@shadowG)"]');

    moveMouse('shadowD/shadowF/shadowG', 'shadowD',
              'Target (shadow host) is an ancestor of relatedTarget (shadow host).');
    shouldBe('dispatchedEvent("mouseover")', '[]');
    shouldBe('dispatchedEvent("mouseout")', '["shadowG(<-shadowD)(@shadowG)", "shadowF(<-shadowD)(@shadowF)", "shadowF(<-shadowD)(@divE)"]');

    moveMouse('shadowD/divE', 'shadowD/shadowF/shadowG/divI',
              'RelatedTarget is ancestor of target.');
    shouldBe('dispatchedEvent("mouseover")', '["divI(<-divE)(@divI)", "shadowG(<-divE)(@shadowG)", "shadowF(<-divE)(@shadowF)", "shadowF(<-divE)(@divE)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divE(<-shadowF)(@divE)"]');

    moveMouse('shadowD/shadowF', 'shadowD/shadowF/shadowG/divI',
              'RelatedTarget (shadow host) is ancestor of target.');
    shouldBe('dispatchedEvent("mouseover")', '["divI(<-shadowF)(@divI)", "shadowG(<-shadowF)(@shadowG)"]');
    shouldBe('dispatchedEvent("mouseout")', '[]');

    moveMouse('shadowD', 'shadowD/shadowF/shadowG',
              'RelatedTarget (shadow host) is an ancestor of target (shadow host).');
    shouldBe('dispatchedEvent("mouseover")', '["shadowG(<-shadowD)(@shadowG)", "shadowF(<-shadowD)(@shadowF)", "shadowF(<-shadowD)(@divE)"]');
    shouldBe('dispatchedEvent("mouseout")', '[]');

    moveMouse('shadowD/shadowF/shadowG/divH', 'shadowD/shadowK/divL',
              'Target and relatedTarget exist in separated subtree, crossing shadow boundaries. Making sure that event is not dispatched beyond the lowest common boundary.');
    shouldBe('dispatchedEvent("mouseover")', '["divL(<-shadowF)(@divL)", "shadowK(<-shadowF)(@shadowK)", "shadowK(<-shadowF)(@divJ)"]');
    shouldBe('dispatchedEvent("mouseout")', '["divH(<-shadowK)(@divH)", "shadowG(<-shadowK)(@shadowG)", "shadowF(<-shadowK)(@shadowF)", "shadowF(<-shadowK)(@divE)"]');

    // Test for focusin/focusout events.
    moveFocus('divB', 'divC',
              'Move focus from a node to its sibling node. All nodes are outside of shadow boundary.');
    shouldBe('dispatchedEvent("focusin")', '["divC(<-divB)(@divC)", "divC(<-divB)(@divA)"]');
    shouldBe('dispatchedEvent("focusout")', '["divB(<-divC)(@divB)", "divB(<-divC)(@divA)"]');

    moveFocus('shadowD/shadowF/shadowG/divH', 'shadowD/shadowK/divL',
              'Old focused node and new focused node exist in separated subtrees, crossing shadow boundaries. Making sure that an event is not dispatched beyond the lowest common boundary.');
    shouldBe('dispatchedEvent("focusin")', '["divL(<-shadowF)(@divL)", "shadowK(<-shadowF)(@shadowK)", "shadowK(<-shadowF)(@divJ)"]');
    shouldBe('dispatchedEvent("focusout")', '["divH(<-shadowK)(@divH)", "shadowG(<-shadowK)(@shadowG)", "shadowF(<-shadowK)(@shadowF)", "shadowF(<-shadowK)(@divE)"]');

    // Omitted test cases where either a oldFocusedNode or newFocusedNode is an ancestor of the other.
    // Due to a focus transfer mechanism on shadow hosts, a focused node should be a leaf node in general.

    // Test for focus/blur events. Event listners should be registerd on captureing phase.
    moveFocus('divB', 'divC',
              'Move focus from a node to its sibling node. All nodes are outside of shadow boundary.');
    shouldBe('dispatchedEvent("focus")', '["divC(<-divB)(@divA)(capturing phase)", "divC(<-divB)(@divC)"]');
    shouldBe('dispatchedEvent("blur")', '["divB(<-divC)(@divA)(capturing phase)", "divB(<-divC)(@divB)"]');

    moveFocus('shadowD/shadowF/shadowG/divH', 'shadowD/shadowK/divL',
              'Old focused node and new focused node exist in separated subtrees, crossing shadow boundaries. Making sure that an event is not dispatched beyond the lowest common boundary.');
    shouldBe('dispatchedEvent("focus")', '["shadowK(<-shadowF)(@divJ)(capturing phase)", "divL(<-shadowF)(@divL)", "shadowK(<-shadowF)(@shadowK)"]');
    shouldBe('dispatchedEvent("blur")', '["shadowF(<-shadowK)(@divE)(capturing phase)", "divH(<-shadowK)(@divH)", "shadowG(<-shadowK)(@shadowG)", "shadowF(<-shadowK)(@shadowF)"]');
}

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