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