[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / animation-offscreen-to-onscreen.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4   <style type="text/css" media="screen">
5     body {
6       margin: 0;
7     }
8
9     #box {
10       position: absolute;
11       left: 0px;
12       top: 100px;
13       height: 100px;
14       width: 100px;
15       margin: 0;
16       background-color: red;
17       -webkit-transform: translate(-2000px, 0px);
18       -webkit-animation-duration: 1s;
19       -webkit-animation-direction: normal;
20       -webkit-animation-timing-function: linear;
21       -webkit-animation-name: "anim";
22     }
23     @-webkit-keyframes "anim" {
24         0% { -webkit-transform: translate(100px, 0px); }
25       100% { -webkit-transform: translate(100px, 0px); }
26     }
27     #result {
28       color: white; /* hide from pixel results */
29     }
30   </style>
31   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
32   <script type="text/javascript" charset="utf-8">
33     if (window.testRunner) {
34         window.testRunner.dumpAsText(true);
35     }
36
37     const expectedValues = [
38       // [time, element-id, property, expected-value, tolerance]
39       ["anim",  0.5, "box", "webkitTransform", [1, 0, 0, 1, 100, 0], 0.002],
40     ];
41
42     const doPixelTest = true;
43     const disablePauseAnimationAPI = false;
44     runAnimationTest(expectedValues, null, null, disablePauseAnimationAPI, doPixelTest);
45   </script>
46 </head>
47 <body>
48
49 <!-- This test checks that a compositing layer is rendered if the layer is originally transformed off the viewport. You should see red boxes. -->
50 <div id="box"></div>
51 <div id="result"></div>
52
53 </body>
54 </html>