1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8">
7 <title>Box Transitions coming out from the viewport.
</title>
8 <style type=
"text/css" media=
"screen">
13 border:
1px solid black;
14 background-color : red;
15 -webkit-transition: -webkit-transform
3s;
19 <script type=
"text/javascript" charset=
"utf-8">
22 var box = document.getElementById(
"box");
24 window.setTimeout(function() {
25 box.style.webkitTransform =
"translateX(" + window.innerWidth *
2.5 +
"px)";
28 window.setTimeout(function() {
29 box.style.webkitTransform =
"translateX(0px)";
32 window.setTimeout(function() {
33 box.style.webkitTransform =
"translateX(" + window.innerWidth *
2.5 +
"px)";
36 window.setTimeout(function() {
37 box.style.webkitTransform =
"translateX(0px)";
40 window.addEventListener('load', runTest, false)
45 We should be able to see that the red box is going out and coming from the viewport twice.
46 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.
48 <div id=
"box" class=
"container">