REGRESSION (r230574): Interrupted hardware transitions don't behave correctly
[WebKit-https.git] / LayoutTests / transitions / suspend-transform-transition.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5     #box {
6         position: absolute;
7         left: 0;
8         top: 0;
9         height: 100px;
10         width: 100px;
11         background-color: red;
12         -webkit-transition: -webkit-transform 0.5s linear;
13         -webkit-transform: translateX(0) scale(1);
14     }
15     
16     #box.move {
17         -webkit-transform: translateX(400px) scale(1);
18     }
19
20     #safezone {
21         position: absolute;
22         left: 0;
23         top: 0;
24         height: 100px;
25         width: 300px;
26         left: 100px;
27         background-color: green;
28     }
29   </style>
30   <script>
31     if (window.testRunner)
32         testRunner.waitUntilDone();
33     
34     function suspendAndWaitForCompletion()
35     {
36         if (window.internals)
37             internals.suspendAnimations();
38
39         window.setTimeout(function() {
40             if (window.testRunner) {
41                 internals.resumeAnimations();
42                 testRunner.notifyDone();
43             }
44         }, 250);
45     }
46     
47     function doTest()
48     {
49         document.getElementById('box').className = 'move';
50         window.setTimeout(function() {
51             // Wait for the box to animate into the safe zone (to test that it doesn't snap back to the start).
52             window.setTimeout(suspendAndWaitForCompletion, 250);
53         }, 0); // give the accelerated transition a chance to kick off.
54     }
55
56     window.addEventListener('load', doTest, false);
57   </script>
58 </head>
59 <body>
60
61 <!-- When suspended, the red box should be hidden by the green box. You should see no red. -->
62 <div id="box"></div>
63 <div id="safezone"></div>
64
65 <div id="result"></div>
66
67 </body>
68 </html>