<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style type="text/css">
    html, body, .workspace {
        height: 100%;
    }
    button {
        cursor: pointer;
        padding: 0px;
        margin: 0px;
    }
    .minbox {
        height: 30px;
        width: 1px;
    }
#div1, #div2 {
    height: 80px;
    border: 1px solid #aaaaaa;
}
</style>
<body>
<div class="workspace"></div>
<div class="minbox">
    <div id="test">
        <button>POINTER</button>
    </div>
</div>
<p id="description"></p>
<div id="console"></div>
<script>
    var div = document.getElementById("test");
    var x = div.offsetLeft + 100;
    var y = div.offsetTop - window.pageYOffset + 1;
    var events = [];
    var targets = [];

    window.scrollTo(0, 200);
    if (window.eventSender) {
        function appendEventLog(e) {
            events.push(e.type);
            targets.push(e.currentTarget.nodeName);
        }
 
        function runNextTest(eventType1, eventType2)
        {
            document.addEventListener(eventType1, appendEventLog);
            document.body.addEventListener(eventType1, appendEventLog);
            document.addEventListener(eventType2, appendEventLog);
            document.body.addEventListener(eventType2, appendEventLog);
            eventSender.mouseMoveTo(x, y);       // html element in iframe
            eventSender.mouseMoveTo(x, y + 200); // out of iframe
            eventSender.mouseMoveTo(x, y - 100); // body element in iframe
            eventSender.mouseMoveTo(x, y + 200); // out of iframe
            document.removeEventListener(eventType1, appendEventLog);
            document.body.removeEventListener(eventType1, appendEventLog);
            document.removeEventListener(eventType2, appendEventLog);
            document.body.removeEventListener(eventType2, appendEventLog);
        }
        runNextTest('mousemove', '');
        runNextTest('mouseover', '');
        runNextTest('mouseout', '');
        runNextTest('mouseenter', 'mouseleave');
    }
    var i = 0;
    function verifyEventLog(eventType, target)
    {
        shouldBeEqualToString('events[' + i + ']', eventType);
        shouldBeEqualToString('targets[' + i + ']', target);
        i++;
    }
    verifyEventLog('mousemove', '#document'); // x, y
    verifyEventLog('mousemove', 'BODY');      // x, y - 100
    verifyEventLog('mousemove', '#document'); // x, y - 100
    verifyEventLog('mouseover', '#document'); // x, y
    verifyEventLog('mouseover', 'BODY');      // x, y - 100
    verifyEventLog('mouseover', '#document'); // x, y - 100
    verifyEventLog('mouseout', '#document');  // x, y
    verifyEventLog('mouseout', 'BODY');       // x, y - 100
    verifyEventLog('mouseout', '#document');  // x, y - 100
    verifyEventLog('mouseenter', '#document');// x, y
    verifyEventLog('mouseleave', '#document');// x, y
    verifyEventLog('mouseenter', '#document');// x, y - 100
    verifyEventLog('mouseenter', 'BODY');     // x, y - 100
    verifyEventLog('mouseleave', 'BODY');     // x, y + 200
    verifyEventLog('mouseleave', '#document');// x, y + 200
</script>
</body>