Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / background-position-transitions.html
1 <!DOCTYPE><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
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-x', "45px"],
45         [0.5, 'box1', 'background-position-y', "60px"],
46         [0.5, 'box2', 'background-position-x', "45px"],
47         [0.5, 'box2', 'background-position-y', "60px"],
48         [0.5, 'box3', 'background-position-x', "calc((10px * 0.5) + ((100% - 80px) * 0.5))"],
49         [0.5, 'box3', 'background-position-y', "calc((20px * 0.5) + ((100% - 100px) * 0.5))"],
50         ];
51
52         function setupTest()
53         {
54             document.body.classList.add('final');
55         }
56
57         runTransitionTest(expectedValues, setupTest, usePauseAPI);
58     </script>
59 </head>
60 <body>
61
62     <div id="box1" class="box"></div>
63     <div id="box2" class="box"></div>
64     <div id="box3" class="box"></div>
65
66     <pre id="result"></pre>
67
68 </body>
69 </html>