<!DOCTYPE html>
<html style="background-color: green; width: 1600px; height: 1200px">
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body style="background-image: url('resources/animated.gif'); background-repeat: repeat; position: relative; left: 0px; top: 700px; width: 200px; height: 200px" onload="runTest()">
<script>
description("Make sure the background image of a body element that is outside the viewport is not animated");
jsTestIsAsync = true;

function isBackgroundAnimated()
{
  return !internals.hasPausedImageAnimations(document.body);
}

function scrollDown() {
  debug("Scroll down so that the body becomes visible.");
  window.scrollBy(0, 600);
  shouldBecomeEqual("isBackgroundAnimated()", "true", finishJSTest);
}

function imageLoaded() {
  shouldBecomeEqual("isBackgroundAnimated()", "false", scrollDown);
}

function runTest() {
  if (!window.internals)
    return;

  var img = new Image();
  // Make sure the image is loaded before we check if it is animated.
  img.onload = imageLoaded;
  img.src = "resources/animated.gif";
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>