[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / 3d / matrix-transform-type-animation.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4   <style type="text/css">
5     .container {
6       position: relative;
7       height: 100px;
8     }
9     .box {
10       position: absolute;
11       left: 0;
12       top: 0;
13       height: 100px;
14       width: 100px;
15       background-color: green;
16     }
17     
18     #indicator {
19       position: absolute;
20       top: 0;
21       left: 50px;
22       background-color: red;
23     }
24     
25     #box {
26       -webkit-animation: anim 2s linear;
27     }
28     
29     @-webkit-keyframes anim {
30         from { -webkit-transform: matrix(1, 0, 0, 1, 100, 0); }
31         to   { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
32     }
33   </style>
34   <script src="../resources/animation-test-helpers.js" type="text/javascript"></script>
35   <script type="text/javascript">
36     const expectedValues = [
37       // [animation, time, element-id, property, expected-value, tolerance]
38       ["anim", 1, "box",  "webkitTransform.4", 50, 2],
39     ];
40     
41     var pixelTest = true;
42     var disablePauseAPI = false;
43     runAnimationTest(expectedValues, null, null, disablePauseAPI, pixelTest);
44   </script>
45 </head>
46 <body>
47
48 <!-- In the pixel result, the green box should obscure the red box. -->
49 <div class="container">
50   <div id="indicator" class="box"></div>
51   <div class="box" id="box"></div>
52 </div>
53
54 <div id="result"></div>
55 </body>
56 </html>