[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / cross-fade-background-image.html
1 <!DOCTYPE>
2
3 <html>
4 <head>
5     <style>
6     .box {
7         height: 200px;
8         width: 200px;
9         margin: 10px;
10         -webkit-transition-duration: 1s;
11         -webkit-transition-timing-function: linear;
12     }
13
14     #box {
15         background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
16         -webkit-transition-property: background-image;
17     }
18
19     #box.final {
20         background-image: url('../fast/backgrounds/repeat/resources/nav.blue.gif');
21     }
22
23     #boxShorthand {
24         background: url('../fast/backgrounds/repeat/resources/gradient.gif');
25         -webkit-transition-property: background;
26     }
27
28     #boxShorthand.final {
29         background: url('../fast/backgrounds/repeat/resources/nav.blue.gif');
30     }
31
32     </style>
33     <script src="resources/transition-test-helpers.js" type="text/javascript"></script>
34     <script>
35
36     const expectedValues = [
37     // [time, element-id, property, expected-value, tolerance]
38     [0.5, 'box', 'background-image', 0.5, 0.05],
39     [0.5, 'boxShorthand', 'background-image', 0.5, 0.05],
40     ];
41
42     function setupTest()
43     {
44         document.getElementById('box').className = 'box final';
45         document.getElementById('boxShorthand').className = 'box final';
46     }
47
48     runTransitionTest(expectedValues, setupTest, usePauseAPI, true);
49     </script>
50 </head>
51 <body>
52     <div id="box" class="box"></div>
53     <div id="boxShorthand" class="box"></div>
54
55     <div id="result"></div>
56 </body>
57 </html>