<!DOCTYPE html>
<html>
<head>
</head>
<script>

function setWindowRect(win, clientRect, fromWindow) {
    if (win) {
        var desktopLeft = fromWindow.screenLeft - fromWindow.screen.availLeft;
        var desktopTop = fromWindow.screenTop - fromWindow.screen.availTop;

        win.moveTo(clientRect.left + desktopLeft, clientRect.top + desktopTop);
        win.resizeTo(clientRect.width, clientRect.height);
    }
}

function createEqual(div, fromWindow) {
    win = window.open("about:blank", "", "location=no, resizable=no, scrollbars=no, status=no, titlebar=no, toolbar=no, left=0, top=0, width=1, height=1");
    win.document.write("<style>body { margin: 0 }</style><body></body>");
    win.document.getElementsByTagName('body')[0].innerHTML = div.outerHTML;
    setWindowRect(win, div.getClientRects()[0], fromWindow);
    return win;
}

var window1;
var window2;

function runTests() {
    var div1 = document.getElementsByTagName('div')[1];
    var div2 = document.getElementsByTagName('div')[2];

    window1 = createEqual(div1, window);
    window2 = createEqual(div2, window);

    window.onscroll = function() {
        setWindowRect(window1, div1.getClientRects()[0], window);
        setWindowRect(window2, div2.getClientRects()[0], window);
    }

    start = Date.now();
    sign = 1;

    function step(timestamp) {
        var progress = timestamp - start;
        var before = document.body.scrollTop;
        window.scrollBy(0, 10 * sign);
        if (before == document.body.scrollTop) {
            sign = sign * -1;
        }

        requestAnimationFrame(step);
    }
    scrollTo(0, 0);
    requestAnimationFrame(step);
}

function endTests() {
    window1.close();
    window2.close();
}
</script>
<body onload="runTests()" onunload="endTests()">
    <div style="height: 1000px"></div>
    <div style="background-color: red; width: 400px; height: 100px;"></div>
    <br>
    <div style="background-color: blue; width: 200px; height: 200px; float: right"></div>
    <div style="height: 1000px"></div>
</body>
</html>