[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-rendering.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     body {
7       margin: 0;
8     }
9     
10     #container {
11       position: relative;
12       width: 400px;
13       height: 230px;
14       border: 1px solid  black;
15     }
16     
17     .box {
18       position: relative;
19       width: 100px;
20       height: 100px;
21       margin: 10px 0;
22       background-color: green;
23     }
24     
25     #container.moved .software {
26       left: 300px;
27     }
28
29     #container.moved .hardware {
30       -webkit-transform: translateX(300px);
31     }
32
33     .software {
34       -webkit-transition: left 300ms linear;
35     }
36
37     .hardware {
38       -webkit-transition: -webkit-transform 1s linear;
39       -webkit-transform: translateX(0);
40     }
41
42    </style>
43    <script src="resources/transition-test-helpers.js"></script>
44    <script>
45
46     function testEnded()
47     {
48       if (window.testRunner)
49         testRunner.notifyDone();
50     }
51     
52     function startTest()
53     {
54       if (window.testRunner)
55         testRunner.waitUntilDone();
56       document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false);
57       document.getElementById('container').className = 'moved';
58     }
59     
60     window.addEventListener('load', startTest, false);
61    </script>
62 </head>
63 <body>
64
65   <div id="container">
66     <!-- <div class="software box"></div> -->
67     <div id="tester" class="hardware box"></div>
68   </div>
69
70   <div id="result">
71   </div>
72
73 </body>
74 </html>