<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Box Transitions coming out from the viewport.</title>
  <style type="text/css" media="screen">
    
    .container {
      height: 200px;
      width: 200px;
      border: 1px solid black;
      background-color : red;
      -webkit-transition: -webkit-transform 3s;
    }
    
  </style>
  <script type="text/javascript" charset="utf-8">
    function runTest()
    {
      var box = document.getElementById("box");

      window.setTimeout(function() {
        box.style.webkitTransform = "translateX(" + window.innerWidth * 2.5 + "px)";
      }, 3000);
      
      window.setTimeout(function() {
        box.style.webkitTransform = "translateX(0px)";
      }, 6000);

      window.setTimeout(function() {
        box.style.webkitTransform = "translateX(" + window.innerWidth * 2.5 + "px)";
      }, 9000);

      window.setTimeout(function() {
        box.style.webkitTransform = "translateX(0px)";
      }, 12000);
    }
    window.addEventListener('load', runTest, false)
  </script>
</head>
<body>
<p>
We should be able to see that the red box is going out and coming from the viewport twice.
The reason why the box goes to the viewport's 2.5x distance is that the backing store cannot create tile only if the GraphicsLayer is out of keepRect.
</p>
<div id="box" class="container">
</div>

</body>
</html>