Support transitions/animations of background-position with right/bottom-relative...
[WebKit-https.git] / LayoutTests / transitions / background-position-transitions.html
1 <!DOCTYPE>
2
3 <html>
4 <head>
5     <style>
6         .box {
7             height: 100px;
8             width: 100px;
9             margin: 10px;
10             background: url('../fast/backgrounds/repeat/resources/gradient.gif') repeat 0 0;
11             transition-duration: 1s;
12             transition-timing-function: linear;
13             transition-property: background-position;
14         }
15
16         #box1 {
17             background-position: 10px 20px;
18         }
19
20         body.final #box1 {
21             background-position: left 80px top 100px;
22         }
23
24         #box2 {
25             background-position: right 10px bottom 20px;
26         }
27
28         body.final #box2 {
29             background-position: right 80px bottom 100px;
30         }
31
32         #box3 {
33             background-position: 10px 20px;
34         }
35
36         body.final #box3 {
37             background-position: right 80px bottom 100px;
38         }
39     </style>
40     <script src="resources/transition-test-helpers.js" type="text/javascript"></script>
41     <script>
42         const expectedValues = [
43         // [time, element-id, property, expected-value, tolerance]
44         [0.5, 'box1', 'background-position', [45, 60], 2],
45         [0.5, 'box2', 'background-position', [45, 60], 2],
46         [0.5, 'box3', 'background-position', [10,0.5,100,80,0,0.5,20,0.5,100,100,0,0.5], 2], // Numbers extracted from a calc() expression.
47         ];
48
49         function setupTest()
50         {
51             document.body.classList.add('final');
52         }
53
54         runTransitionTest(expectedValues, setupTest, usePauseAPI);
55     </script>
56 </head>
57 <body>
58
59     <div id="box1" class="box"></div>
60     <div id="box2" class="box"></div>
61     <div id="box3" class="box"></div>
62
63     <pre id="result"></pre>
64
65 </body>
66 </html>