35bf30cb1c688619a7b7115cf5ac43adf29b3f9c
[WebKit-https.git] / LayoutTests / animations / unanimated-style.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 1s linear;
16             left: 400px;
17         }
18         
19         @-webkit-keyframes move {
20             from {
21             }
22             to   {
23                 left: 500px;
24             }
25         }
26         
27         #result {
28             margin-top: 130px;
29         }
30     </style>
31     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
32     <script type="text/javascript" charset="utf-8">
33
34       const expectedValues = [
35         // [animation-name, time, element-id, property, expected-value, tolerance]
36         ["move", 0.5, "test", "left", 450, 8],
37       ];
38
39       function setupTest()
40       {
41         document.getElementById('test').className = 'animating box';
42         runAnimationTest(expectedValues);
43       }
44       
45       window.addEventListener('load', function() {
46           window.setTimeout(setupTest, 0);
47       }, false);
48
49     </script>
50 </head>
51 <body>
52     <p>Box should animate from left of 400px to 500px.</p>
53     <div id="test" class="box"></div>
54     <div id="result"></div>
55 </body>
56 </html>