<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test-pre.js"></script>
<script>
description("Tests that animated SVG images are paused when outside the viewport.");
jsTestIsAsync = true;

onload = function() {
    image = document.querySelector("img");

    debug("Initially outside the viewport");
    shouldBecomeEqual("internals.isImageAnimating(image)", "false", function() {
        debug("Scrolling animation into view");
        internals.scrollElementToRect(image, 0, 0, 300, 300);
        shouldBecomeEqual("internals.isImageAnimating(image)", "true", function() {
            debug("Scrolling animation outside view again");
            scroll(0, 0);
            shouldBecomeEqual("internals.isImageAnimating(image)", "false", finishJSTest);
        });
    });
}
</script>
<div style="position: relative; width: 1600px; height: 2400px;">
<img src="resources/smilAnimation.svg" style="position:absolute; left: 600px; top: 800px;">
</div>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>