<!DOCTYPE html>
<html dir="rtl">
<head>
    <link rel="stylesheet" href="resources/scrollable-style.css">
    <script src="../../resources/js-test-pre.js"></script>
    <style>
    .origin {
        position: absolute;
        top: 0;
        left: 0;
        height: 10px;
        width: 10px;
        background-color: blue;
    }
    
    .wide {
        width: 1200px;
        height: 10px;
        background-color: silver;
    }
    iframe {
        position: absolute;
    }
    </style>
    <script>
    var pageScrollPositionBefore;
    var iframeScrollPositionBefore;
    
    function checkForScroll()
    {
        // The iframe should have scrolled, but not the main page.
        var iframeScrollPositionAfter = window.frames['target'].document.scrollingElement.scrollTop;

        if (iframeScrollPositionBefore != iframeScrollPositionAfter)
            testPassed("iframe received wheel events.");
        else
            testFailed("iframe did not receive wheel events.");

        testRunner.notifyDone();
    }

    function scrollTest()
    {
        pageScrollPositionBefore = document.scrollingElement.scrollTop;

        var iframeTarget = document.getElementById('target');
        iframeScrollPositionBefore = iframeTarget.contentDocument.scrollingElement.scrollTop;

        var startPosX = iframeTarget.offsetLeft + 20;
        var startPosY = iframeTarget.offsetTop + 20;
        eventSender.mouseMoveTo(startPosX, startPosY);
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'begin');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue');
        eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
        setTimeout(checkForScroll, 100);
    }
    
    function startTest()
    {
        if (window.eventSender) {
            testRunner.waitUntilDone();
            setTimeout(scrollTest, 0);
        }
    }
    
    window.addEventListener('load', startTest, false);
    </script>
</head>
<body>
    <div class="wide">
    <div class="origin"></div>

    <iframe id="target" name="target" style="border:solid 1px green; height: 300px; width: 300px;" 
        src= "data:text/html,
            <html>
                <head>
                    <style>div { width: 400px; height: 1000px; background-color: green; } </style>
                </head>
                <body>
                    <div></div>
                </body>
            </html>">
    </iframe>
    <div id='console'></div>
</html>