[Web Animations] Turn Web Animations with CSS integration on
[WebKit-https.git] / LayoutTests / transitions / default-timing-function.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .container {
7       position: relative;
8     }
9
10     .box {
11       position: relative;
12       height: 100px;
13       width: 100px;
14       background-color: green;
15       -webkit-transition-duration: 1s;
16     }
17     
18     #box {
19       left: 0;
20       -webkit-transition-property: left;
21     }
22     
23     #box.final {
24       left: 400px;
25     }
26
27     #box2 {
28       -webkit-transition-property: -webkit-transform;
29     }
30     
31     #box2.final {
32       -webkit-transform: translateX(400px);
33     }
34     
35     #indicator {
36       position: absolute;
37       left: 322px;
38       height: 200px;
39       background-color: red;
40     }
41     
42   </style>
43   <script src="resources/transition-test-helpers.js"></script>
44   <script>
45
46     const expectedValues = [
47       // [time, element-id, property, expected-value, tolerance]
48       [0.5, 'box', 'left', 322, 5],
49       [0.5, 'box2', '-webkit-transform.4', 322, 5],
50     ];
51   
52     function setupTest()
53     {
54       document.getElementById('box').className = 'box final';
55       document.getElementById('box2').className = 'box final';
56     }
57   
58     var doPixelTest = true;
59     runTransitionTest(expectedValues, setupTest, usePauseAPI, doPixelTest);
60   </script>
61 </head>
62 <body>
63
64   <!-- The pixel result should show a green bar, with no red visible. -->
65   <div class="container">
66     <div id="indicator" class="box"></div>
67
68     <div id="box" class="box"></div>
69     <div id="box2" class="box"></div>
70   </div>
71
72   <div id="result"></div>
73
74 </body>
75 </html>