[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / additive-transform-animations.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style type="text/css">
6     .box {
7       height: 100px;
8       width: 100px;
9       background-color: blue;
10     }
11     
12     #box {
13       -webkit-animation: anim 2s linear both;
14     }
15     
16     @-webkit-keyframes anim {
17         from { -webkit-transform: rotate(0deg) translate(-100px, 0); }
18         to   { -webkit-transform: rotate(180deg) translate(300px, 0); }
19     }
20
21     #result {
22       opacity: 0; /* hide in pixel result */
23     }
24   </style>
25   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
26   <script type="text/javascript">
27     const expectedValues = [
28       // [time, element-id, property, expected-value, tolerance]
29       ["anim",  1, "box",  "webkitTransform", [0, 1, -1, 0, 0, 100], 0.002],
30     ];
31     
32     const doPixelTest = true;
33     const disablePauseAnimationAPI = false;
34     runAnimationTest(expectedValues, null, null, disablePauseAnimationAPI, doPixelTest);
35   </script>
36 </head>
37 <body>
38
39 <div class="box" id="box"></div>
40 <div id="result"></div>
41
42 </body>
43 </html>