<html>
<head>
<style>
#scrolly {
    height: 400px;
    width: 200px;
    border: 1px solid blue;

    overflow-x: hidden;
    overflow-y: auto;
}

#content {
    height: 2000px;
}
</style>

<script src="../../resources/js-test-pre.js"></script>
<script src="../../resources/ui-helper.js"></script>
<script>

var deltaOfZero = false;

function checkForZero()
{
    if (deltaOfZero)
        testFailed("Wheel events with zero delta were sent to the DOM. ");
    else
        testPassed("Wheel events with delta of zero were not sent to the DOM.");

    testRunner.notifyDone();
}

function didScroll(event)
{
    if (event.wheelDeltaX == 0 && event.wheelDeltaY == 0)
        deltaOfZero = true;
}

async function scrollTest()
{
    const startPosX = 100;
    const startPosY = 100;

    const events = [
        {
            type : "wheel",
            viewX : startPosX,
            viewY : startPosY,
            deltaY : -10,
            phase : "began"
        },
        {
            type : "wheel",
            deltaY : -10,
            phase : "changed"
        },
        {
            type : "wheel",
            deltaY : -10,
            phase : "changed"
        },
        {
            type : "wheel",
            phase : "ended"
        },
        {
            type : "wheel",
            deltaY : -10,
            momentumPhase : "began"
        },
        {
            type : "wheel",
            deltaY : -10,
            momentumPhase : "changed"
        },
        {
            type : "wheel",
            momentumPhase : "ended"
        }
    ];

    await UIHelper.mouseWheelSequence({ events: events });
    checkForZero();
}

function setUp()
{
    var scrolly = document.getElementById("scrolly");
    scrolly.addEventListener("mousewheel", didScroll);

    if (window.eventSender) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
        setTimeout(scrollTest, 0);
    }
}
</script>
</head>

<body onload="setUp();">

<div id="scrolly">
    <div id="content"></div>
</div>
</body>
</html>