<DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body onload="runTest()">
<div id="scroller" style="width: 800px; overflow: scroll">
    <div id="scroller-cont" style="height: 245px; width: 1410px; position: relative; top: 0; left: 0; -webkit-transform: translate(0px, 0px) translateZ(0px);">
        <div id="wrapper1" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 710px; height: 245px; float: left; margin: 0; padding: 0">
            <img id="a" src="resources/animated.gif"/>
        </div>
        <div id="wrapper2" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 700px; height: 245px; float: left; margin: 0; padding: 0">
            <img id="b" src="resources/animated-10color.gif" style="margin-left: 100px;"/>
        </div>
    </div>
</div>
<script>
description("Test that animated images are correctly paused / resumed when translated in and out of view using -webkit-transform.");
jsTestIsAsync = true;

function isFirstImagePaused() {
  return internals.hasPausedImageAnimations(document.getElementById('a'));
}

function isSecondImagePaused() {
  return internals.hasPausedImageAnimations(document.getElementById('b'));
}

function forceLayout() {
  document.getElementById("scroller-cont").offsetLeft;
}

function checkSecondImageUnpaused() {
  shouldBecomeEqual("isSecondImagePaused()", "false", translateImagesRight);
}

function checkSecondImagePaused() {
  shouldBecomeEqual("isSecondImagePaused()", "true", finishJSTest);
}

function translateImagesLeft() {
  shouldBeFalse("isFirstImagePaused()");
  debug("Translating images left so that first image is no longer visible, but second image is.");
  forceLayout();
  document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-610px, 0px)";
  shouldBecomeEqual("isFirstImagePaused()", "true", checkSecondImageUnpaused);
}

function translateImagesRight() {
  debug("Translating images right so that second image is no longer visible, but first image is.");
  forceLayout();
  document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)";
  shouldBecomeEqual("isFirstImagePaused()", "false", checkSecondImagePaused);
}

function runTest() {
  shouldBecomeEqual("isFirstImagePaused()", "false", function() {
      shouldBecomeEqual("isSecondImagePaused()", "true", translateImagesLeft);
  });
}

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>