[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / multiple-background-transitions.html
1 <!DOCTYPE>
2
3 <html>
4 <head>
5   <style>
6     .box {
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       border: 1px solid black;
11       background-repeat: no-repeat;
12       -webkit-transition-duration: 1s;
13       -webkit-transition-timing-function: linear;
14       -webkit-transition-property: background-position;
15     }
16     
17     #box {
18       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
19       background-position: 0 0, 0 80px;
20     }
21     
22     #box.final {
23       background-position: 80px 80px, 80px 0;
24     }
25
26     /* Mismatched layers */
27     #box2 {
28       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
29       background-position: 0 0, 0 80px;
30     }
31     
32     #box2.final {
33       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
34       background-position: 80px 80px;
35     }
36
37     #box3 {
38       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
39       background-position: 80px 80px;
40     }
41     
42     #box3.final {
43       background-image: url('../fast/backgrounds/repeat/resources/gradient.gif'), url('../fast/backgrounds/repeat/resources/gradient.gif');
44       background-position: 0 0, 0 80px;
45     }
46
47   </style>
48   <script src="resources/transition-test-helpers.js"></script>
49   <script type="text/javascript">
50
51     const expectedValues = [
52       // [time, element-id, property, expected-value, tolerance]
53       [0.5, 'box', 'background-position', [40, 40], 2],
54       [0.5, 'box2', 'background-position', [40, 40], 2],
55       [0.5, 'box3', 'background-position', [40, 40], 2],
56     ];
57   
58     function setupTest()
59     {
60       document.getElementById('box').className = 'box final';
61       document.getElementById('box2').className = 'box final';
62       document.getElementById('box3').className = 'box final';
63     }
64   
65     runTransitionTest(expectedValues, setupTest, usePauseAPI);
66   </script>
67 </head>
68 <body>
69
70   <div id="box" class="box"></div>
71   <div id="box2" class="box"></div>
72   <div id="box3" class="box"></div>
73
74   <div id="result">
75   </div>
76
77 </body>
78 </html>