[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / cross-fade-webkit-mask-box-image.html
1 <!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4   <style>
5     #box {
6         position: absolute;
7         left: 100px;
8         top: 100px;
9         height: 200px;
10         width: 200px;
11         background-color: red;
12         -webkit-animation: anim 1s linear infinite;
13     }
14     #boxStatic {
15         position: absolute;
16         left: 100px;
17         top: 300px;
18         height: 200px;
19         width: 200px;
20         background-color: red;
21         -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
22     }
23     @-webkit-keyframes anim {
24         from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch; }
25         to   { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }
26     }
27   </style>
28   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
29   <script type="text/javascript" charset="utf-8">
30     const expectedValues = [
31       // [animation-name, time, element-id, property, expected-value, tolerance]
32       ["anim", 2.25, "box", "webkitMaskBoxImage", "-webkit-cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05],
33       ["anim", 2.25, ["box", "static:boxStatic"], "webkitMaskBoxImage", "cross-fade(url(stripes-100.png), url(green-100.png), 25%)", 0.05]
34     ];
35
36     var doPixelTest = true;
37     var disablePauseAPI = false;
38     runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
39   </script>
40 </head>
41 <body>
42 <img id="box" src="resources/green-100.png"/>
43 <img id="boxStatic" src="resources/green-100.png"/>
44 <div id="result"></div>
45 </body>
46 </html>