[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / spring-function.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <script>
3   if (window.internals)
4     internals.settings.setSpringTimingFunctionEnabled(true);
5 </script>
6 <style type="text/css" media="screen">
7   .box {
8     position: relative;
9     left: 100px;
10     top: 0px;
11     height: 5px;
12     width: 5px;
13     background-color: blue;
14     animation-duration: 1s;
15     animation-name: anim;
16   }
17   @keyframes anim {
18       from { left: 0px; }
19       to   { left: 500px; }
20   }
21   #box1 {
22     animation-timing-function: spring(1 100 10 0);
23   }
24   
25 </style>
26 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
27 <script type="text/javascript" charset="utf-8">
28
29   const expectedValues = [
30     // [animation-name, time, element-id, property, expected-value, tolerance]
31     ["anim", 0.25, "box1", "left", 512, 5],
32     ["anim", 0.50, "box1", "left", 537, 5],
33     ["anim", 0.75, "box1", "left", 487, 5],
34   ];
35
36   runAnimationTest(expectedValues);
37
38 </script>
39 <body>
40 This test performs an animation of the left property. It animates over 1 second.
41 It takes 3 snapshots and expects each result to be within a specified range.
42 <div class="box" id="box1"></div>
43 <div id="result">
44 </div>
45 </body>