2010-09-09 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / animations / change-one-anim.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7     <title>Animation using matrix()</title>
8     <style type="text/css" media="screen">
9         #box {
10             position: relative;
11             height: 20px;
12             width: 20px;
13             background-color: #9bb;
14             -webkit-animation-name: horiz, vert;
15             -webkit-animation-duration: 1s;
16             -webkit-animation-iteration-count: infinite;
17             -webkit-animation-direction: alternate;
18             -webkit-animation-timing-function: linear;
19          }
20          
21          @-webkit-keyframes horiz {
22             from { left: 0px; }
23             to { left:300px; }
24          }
25          @-webkit-keyframes vert {
26             from { top: 0px; }
27             to { top: 300px; }
28          }
29     </style>
30     <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
31     <script type="text/javascript" charset="utf-8">
32         
33         const expectedValues = [
34           // [animation-name, time, element-id, property, expected-value, tolerance]
35           [null, 0.75, "box", "left", 150, 40],
36           [null, 0.75, "box", "top", 225, 40],
37         ];
38
39         function removeAnim()
40         {
41             var target = document.getElementById("box");
42             var left = window.getComputedStyle(target).left;
43             target.style.webkitAnimationName = "vert";
44             target.style.left = left;
45         }
46         
47         function setup()
48         {
49             setTimeout("removeAnim()", 500);
50         }
51
52         runAnimationTest(expectedValues, setup);
53     </script>
54 </head>
55 <body>
56 This test performs two animations, left and top. It animates over 1 second.
57 At 0.5 second it removes the left animation and the top animation should continue
58 from where it left off.
59 <div id="box">
60 </div>
61 <div id="result">
62 </div>
63 </body>
64 </html>