[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / change-completed-animation-transform.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4     <style>
5         .container {
6             height: 100px;
7             width: 500px;
8             margin: 4px;
9             border: 1px solid black;
10         }
11         .box {
12             position: relative;
13             width: 100px;
14             height: 100px;
15             background-color: green;
16         }
17         
18         .mover {
19             animation: move 0.25s linear;
20         }
21         
22         body.changed .mover {
23             animation-duration: 0.2s;
24         }
25
26         .slider {
27             animation: slide 0.25s linear;
28         }
29         
30         body.changed .slider {
31             animation-duration: 0.2s;
32         }
33
34         @keyframes move {
35             from { left: 100px; }
36             to   { left: 400px; }
37         }
38
39         @keyframes slide {
40             from { transform: translateX(100px); }
41             to   { transform: translateX(400px); }
42         }
43     </style>
44     <script>
45         if (window.testRunner)
46             testRunner.waitUntilDone();
47
48         function doTest()
49         {
50             var box = document.getElementById('box1');
51             box.addEventListener('animationend', function() {
52                 window.setTimeout(function() {
53                     document.body.classList.add('changed');
54                     window.setTimeout(function() {
55                         if (window.testRunner)
56                             testRunner.notifyDone();
57                     }, 10);
58                 }, 0);
59             }, false);
60             
61             box.classList.add('mover');
62             document.getElementById('box2').classList.add('slider');
63         }
64         
65         window.addEventListener('load', doTest, false);
66     </script>
67 </head>
68 <body>
69     <div class="container">
70         <div id="box1" class="box"></div>
71     </div>
72     <div class="container">
73         <div id="box2" class="box"></div>
74     </div>
75 </body>
76 </html>