9c4849c46f9ddaac0eb3fa979040dd48ba8c5946
[WebKit-https.git] / LayoutTests / animations / transition-and-animation-3.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html>
4 <head>
5     <style type="text/css" media="screen">
6         .box {
7             position: absolute;
8             height: 100px;
9             width: 100px;
10             left: 0px;
11             background-color: blue;
12         }
13
14         .box.animating {
15             -webkit-animation: move 0.1s linear;
16             left: 100px;
17             -webkit-transition: left 10s linear;
18         }
19         
20         /* When the animation is done, the box should be running a transition from 100px to 200px */
21         .box.animating.moved {
22             left: 200px;
23         }
24         
25         @-webkit-keyframes move {
26             from {
27                 left: 500px;
28             }
29             to   {
30                 left: 501px;
31             }
32         }
33         
34         #result {
35             margin-top: 130px;
36         }
37     </style>
38     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
39     <script type="text/javascript" charset="utf-8">
40
41       const expectedValues = [
42         // [animation-name, time, element-id, property, expected-value, tolerance]
43         [null, 0.2, "test", "left", 100, 10],
44       ];
45
46       function animationStarted()
47       {
48           document.getElementById('test').className = 'animating moved box';
49       }
50
51       function setupTest()
52       {
53         document.getElementById('test').className = 'animating box';
54         runAnimationTest(expectedValues, animationStarted);
55       }
56       
57       window.addEventListener('load', function() {
58           window.setTimeout(setupTest, 0);
59       }, false);
60
61     </script>
62 </head>
63 <body>
64     <p>Once animation has finished, box should be running left transition from 100px to 200px.</p>
65     <div id="test" class="box"></div>
66     <div id="result"></div>
67 </body>
68 </html>