[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / longhand-timing-function.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style type="text/css" media="screen">
6         .box {
7             position: relative;
8             height: 100px;
9             width: 100px;
10             margin: 20px;
11             background-color: blue;
12         }
13
14         #movers.moved > .box {
15             -webkit-animation: move 1s linear;
16         }
17
18         #movers > #test {
19             -webkit-animation-iteration-count: 1;
20         }
21         
22         @-webkit-keyframes move {
23             from { left: 0px;   }
24             to   { left: 400px; }
25         }
26     </style>
27     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
28     <script type="text/javascript" charset="utf-8">
29         const expectedValues = [
30             // [animation-name, time, element-id, property, expected-value, tolerance]
31             ["move", 0.5, "control", "left", 200, 10],
32             ["move", 0.5, "test", "left", 200, 10],
33         ];
34
35         function setupTest()
36         {
37             document.getElementById('movers').className = 'moved';
38             runAnimationTest(expectedValues);
39         }
40
41         window.addEventListener('load', function() {
42             window.setTimeout(setupTest, 0);
43         }, false);
44     </script>
45 </head>
46 <body>
47     <p>Animations should both use a linear timing function.</p>
48     <div id="movers">
49         <div id="control" class="box"></div>
50         <div id="test" class="box"></div>
51     </div>
52     <div id="result"></div>
53 </body>
54 </html>