[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / cross-fade-list-style-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: 100px;
10         width: 100px;
11         -webkit-animation: anim 1s linear infinite;
12     }
13     #boxShorthand {
14         position: absolute;
15         left: 400px;
16         top: 100px;
17         height: 100px;
18         width: 100px;
19         -webkit-animation: animShorthand 1s linear infinite;
20     }
21     #boxStatic {
22         position: absolute;
23         left: 100px;
24         top: 350px;
25         height: 100px;
26         width: 100px;
27         list-style: square -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%);
28     }
29     @-webkit-keyframes anim {
30         from { list-style-image: url(resources/blue-100.png); }
31         to   { list-style-image: url(resources/green-100.png); }
32     }
33     @-webkit-keyframes animShorthand {
34         from { list-style: square url(resources/blue-100.png); }
35         to   { list-style: square url(resources/green-100.png); }
36     }
37   </style>
38   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
39   <script type="text/javascript" charset="utf-8">
40     const expectedValues = [
41       // [animation-name, time, element-id, property, expected-value, tolerance]
42       ["anim", 2.5, "box", "listStyleImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
43       ["anim", 2.5, ["box", "static:boxStatic"], "listStyleImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
44       ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "listStyleImage", "cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
45     ];
46
47     var doPixelTest = true;
48     var disablePauseAPI = false;
49     runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
50   </script>
51 </head>
52 <body>
53 <ul id="box"><li>one</li><li>two</li></ul>
54 <ul id="boxStatic"><li>one</li><li>two</li></ul>
55 <ul id="boxShorthand"><li>one</li><li>two</li></ul>
56 <div id="result"></div>
57 </body>
58 </html>