<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="sandbox">
    <details open id="details" style="height: 200px">
      <summary id="summary">summary</summary>
      details
    </details>
</div>
<pre id="console"></pre>
<script>
description("Tests to ensure that moving mouse from 'summary' to 'details' should dispatch events correctly. "
    + "Note that 'details' is a shadow host and has a 'summary' element as a immediate child element. "
    + "There is no shadow root between them.");

function moveMouseOver(element)
{
    if (!window.eventSender)
        return;
    var x = element.offsetLeft + element.offsetWidth / 2;
    var 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 + ')';
    eventRecords[eventType].push(eventString);
}

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

function test()
{
    if (window.testRunner)
        testRunner.dumpAsText();
    var ids = ['sandbox', 'details', 'summary'];
    for (var i = 0; i < ids.length; ++i) {
        var element = document.getElementById(ids[i]);
        element.addEventListener('mouseover', recordEvent, false);
        element.addEventListener('mouseout', recordEvent, false);
    }

    moveMouse('summary', 'details');
    shouldBe('dispatchedEvent("mouseover")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]');
    shouldBe('dispatchedEvent("mouseout")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]');

    moveMouse('details', 'summary');
    shouldBe('dispatchedEvent("mouseover")', '["summary(<-details)(@summary)", "summary(<-details)(@details)", "summary(<-details)(@sandbox)"]');
    shouldBe('dispatchedEvent("mouseout")', '["details(<-summary)(@details)", "details(<-summary)(@sandbox)"]');
}

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