<!DOCTYPE html>
<html style="background-image: url('resources/animated.gif'); background-repeat: repeat; height: 0">
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body onload="runTest()">
<script>
jsTestIsAsync = true;

function checkBackgroundAnimated() {
  isBackgroundAnimated = !internals.hasPausedImageAnimations(document.documentElement);
  htmlHeight = window.getComputedStyle(document.documentElement)["height"];
  description("Make sure the background image of the html element is animated if the html element has 0 height");
  shouldBeEqualToString("htmlHeight", "0px");
  shouldBeTrue("isBackgroundAnimated");
  finishJSTest();
}

function imageLoaded() {
  setTimeout(checkBackgroundAnimated, 200);
}

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>