863368c8d63f662d49d995d73913035f2cc0aa7c
[WebKit-https.git] / LayoutTests / animations / pause-crash.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>Pause and resume animation should not crash</title>
5   <style type="text/css" media="screen">
6     .box {
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       background-color: blue;
11       -webkit-animation-duration: 2s;
12       -webkit-animation-direction: alternate;
13       -webkit-animation-iteration-count: infinite;
14     }
15     
16     @-webkit-keyframes anim {
17         from { -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
18         to   { -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 400,0,0,1); }
19     }
20   </style>
21   <script type="text/javascript" charset="utf-8">
22     if (window.testRunner) {
23         testRunner.dumpAsText();
24         testRunner.waitUntilDone();
25     }
26
27     function animationStarted()
28     {
29         setTimeout(function() {
30             document.getElementById('box1').style.webkitAnimationPlayState = "paused";
31             setTimeout(function() {
32                 document.getElementById('box1').style.webkitAnimationPlayState = "running";
33                 setTimeout(function() {
34                     document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
35                     if (window.testRunner)
36                         testRunner.notifyDone();
37                 }, 50);
38             }, 50);
39         }, 50);
40     }
41     
42     function startTest()
43     {
44         document.getElementById('box1').addEventListener('webkitAnimationStart', animationStarted);
45         document.getElementById('box1').style.webkitAnimationName = "anim";
46     }
47
48     window.addEventListener('load', startTest, false);
49   </script>
50 </head>
51 <body>
52
53 <p>Tests pause and resume animation. Should not crash. (https://bugs.webkit.org/show_bug.cgi?id=67510)</p>
54
55 <div id="container">
56   <div id="box1" class="box"></div>
57 </div>
58 <div id="results"></div>
59 </body>
60 </html>