[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / missing-values-last-keyframe.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: relative;
11       width: 100px;
12       height: 100px;
13       left: 0;
14       background-color: green;
15     }
16     
17     .indicator {
18       position: absolute;
19       width: 100px;
20       height: 100px;
21       left: 100px;
22       background-color: red;
23     }
24     #indicator1 {
25       top: 0;
26     }
27     #indicator2 {
28       top: 100px;
29     }
30     
31     #box1 {
32       left: 200px;
33       -webkit-animation: move-left 2s linear;
34     }
35     
36     #box2 {
37       -webkit-transform: translateX(200px);
38       -webkit-animation: move-transform 2s linear;
39     }
40     
41     @-webkit-keyframes move-left {
42       0% {
43         left: 0;
44         opacity: 0;
45       }
46       50% {
47         left: 0;
48         opacity: 1;
49       }
50       75% {
51         opacity: 1;
52       }
53       100% {
54         opacity: 1;
55       }
56     }
57
58     @-webkit-keyframes move-transform {
59       0% {
60         -webkit-transform: translateX(0);
61         opacity: 0;
62       }
63       50% {
64         -webkit-transform: translateX(0);
65         opacity: 1;
66       }
67       75% {
68         opacity: 1;
69       }
70       100% {
71         opacity: 1;
72       }
73     }
74
75     #result {
76       visibility: hidden; /* hide from pixel results */
77     }
78   </style>
79   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
80   <script type="text/javascript">
81     
82     const expectedValues = [
83       ["move-left", 1.5, "box1", "left", 100, 15],
84       ["move-transform", 1.5, "box2", "webkitTransform.4", 100, 15],
85     ];
86     
87     var doPixelTest = true;
88     var disablePauseAPI = false;
89     runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
90   </script>
91 </head>
92 <body>
93   <!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
94   Test is only reliable when run in DRT. -->
95   <div class="indicator" id="indicator1"></div>
96   <div class="indicator" id="indicator2"></div>
97
98   <div class="box" id="box1"></div>
99   <div class="box" id="box2"></div>
100
101   <div id="result"></div>
102 </body>
103 </html>