[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / steps-timing-function.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #box {
7       height: 100px;
8       width: 100px;
9       background-color: blue;
10       -webkit-transform: translateX(0px);
11       -webkit-transition-duration: 1s;
12       -webkit-transition-timing-function: steps(3, end);
13       -webkit-transition-property: -webkit-transform;
14     }
15   </style>
16   <script src="resources/transition-test-helpers.js"></script>
17   <script type="text/javascript">
18     
19     const expectedValues = [
20       // [time, element-id, property, expected-value, tolerance]
21       [0.25, "box", "-webkit-transform.4", 0, 5],
22       [0.5, "box", "-webkit-transform.4", 66, 5],
23       [0.75, "box", "-webkit-transform.4", 133, 5],
24     ];
25     
26     function setupTest()
27     {
28       var box = document.getElementById('box');
29       box.style.webkitTransform = 'translateX(200px)';
30     }
31     
32     runTransitionTest(expectedValues, setupTest, usePauseAPI);
33   </script>
34 </head>
35 <body>
36
37 <p>
38 The box should move horizontally 200px over 1s, in 3 equal increments.
39 </p>
40 <div id="box">
41 </div>
42 <div id="result">
43 </div>
44 </body>
45 </html>