<!DOCTYPE html>
<html>
<head>
<link rel="help" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-WheelEvent">
<script src="../../../resources/js-test-pre.js"></script>
<script>
var eventDeltaX = 0;
var eventDeltaY = 0;
var scrollDeltaX;
var scrollDeltaY;

jsTestIsAsync = true;

var testDiv;
function runTest() {
    // Basic checks.
    shouldBe('WheelEvent.prototype.__proto__', 'MouseEvent.prototype');
    shouldBe('WheelEvent.DOM_DELTA_PIXEL', '0x00');
    shouldBe('WheelEvent.DOM_DELTA_LINE', '0x01');
    shouldBe('WheelEvent.DOM_DELTA_PAGE', '0x02');

    testDiv = document.getElementById('target');
    shouldBeNull('window.onwheel');
    shouldBeNull('document.onwheel');
    shouldBeNull('testDiv.onwheel');
    testDiv.addEventListener('wheel', wheelHandler);
    if (window.eventSender) {
        eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
        eventSender.mouseScrollBy(-1, -2);
    } else {
        debug("FAIL: This test requires window.eventSender.");
    }
}

var testEvent;
function wheelHandler(e) {
    debug("Wheel event fired");
    testEvent = e;
    shouldBe("testEvent.__proto__", "WheelEvent.prototype");
    shouldBe("testEvent.__proto__.__proto__", "MouseEvent.prototype");
    shouldBeTrue("testEvent.deltaX > 0");
    shouldBeTrue("testEvent.deltaY > 0");
    shouldBe("testEvent.deltaZ", "0");
    shouldBe("testEvent.deltaMode", "WheelEvent.DOM_DELTA_PIXEL")
    eventDeltaX = e.deltaX;
    eventDeltaY = e.deltaY;
}

function scrollHandler()
{
    debug("Scroll event fired");
    scrollDeltaX = testDiv.scrollLeft;
    scrollDeltaY = testDiv.scrollTop;
    shouldBe("eventDeltaX", "scrollDeltaX");
    shouldBe("eventDeltaY", "scrollDeltaY");

    finishJSTest();
}

</script>
</head>
<body>
<span id="parent">
    <div id="target" style="border:solid 1px green; width:100px; height:70px; overflow:scroll; white-space:nowrap;" onscroll="scrollHandler()">
        TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP TOP<br/>
        Scroll mouse wheel over here<br/>
        Scroll mouse wheel over here<br/>
        Scroll mouse wheel over here<br/>
        Scroll mouse wheel over here<br/>
        Scroll mouse wheel over here<br/>
        Scroll mouse wheel over here<br/>
        END END END END END END END END END END END END END END<br/>
    </div>
</span>
<div id="console"></div>
<script>
description("Tests the basic functionality of the standard wheel event");

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