<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<script>
description("Tests that requestAnimationFrame is throttled in subframes that are outside the viewport");
window.jsTestIsAsync = true;

function checkSubframesThrottled()
{
    shouldBeTrue("testFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");
    shouldBeTrue("grandChildFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");

    finishJSTest();
}

function scrollFrameOutOfView()
{
    debug("Scrolling frame out of view again.");
    window.scroll(0, 0);

    shouldBeFalse("internals.isRequestAnimationFrameThrottled()");
    shouldBecomeEqual("testFrame.contentWindow.internals.isRequestAnimationFrameThrottled()", "true", checkSubframesThrottled);
}

function scrollFrameIntoView()
{
    shouldBeFalse("internals.isRequestAnimationFrameThrottled()");
    shouldBeTrue("testFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");
    shouldBeTrue("grandChildFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");

    debug("Scrolling frame into view.");
    window.internals.scrollElementToRect(testFrame, 0, 0, 300, 300);

    debug("RequestAnimationFrame should no longer be throttled");
    shouldBeFalse("internals.isRequestAnimationFrameThrottled()");
    shouldBeFalse("grandChildFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");
    shouldBeFalse("testFrame.contentWindow.internals.isRequestAnimationFrameThrottled()");

    scrollFrameOutOfView();
}

function runTest()
{
    testFrame = document.getElementById("testFrame");
    grandChildFrame = testFrame.contentDocument.getElementById("grandChildFrame");
    debug("Frame is initially outside the viewport so requestAnimationFrame should be throttled");
    shouldBecomeEqual("testFrame.contentWindow.internals.isRequestAnimationFrameThrottled()", "true", scrollFrameIntoView);
}

var i = 0;
requestAnimationFrame(function() {
    i++;
});
</script>
<div style="position: relative; width: 1600px; height: 2400px; background-color: green;">
    <iframe id="testFrame" src="resources/requestAnimationFrame-frame.html" style="position:absolute; left: 600px; top: 800px;" onload="runTest()"></iframe>
</div>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>