Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / transition-timing-function.html
1 <!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2 <html>
3 <head>
4   <style>
5     .box {
6       position: relative;
7       left: 0;
8       height: 100px;
9       width: 100px;
10       margin: 10px;
11       background-color: blue;
12       -webkit-transition: left 1s linear;
13     }
14     .animating > .box {
15       left: 400px;
16     }
17   </style>
18   <script src="resources/transition-test-helpers.js"></script>
19   <script>
20     const expectedValues = [
21       // [time, element-id, property, expected-value, tolerance]
22       [0.5, "box1", "left", 200, 4],
23       [0.5, "box2", "left", 322, 4],
24       [0.5, "box3", "left", 126, 4],
25       [0.5, "box4", "left", 273, 4],
26       [0.5, "box5", "left", 200, 4],
27     ];
28     
29     function setupTest()
30     {
31       document.getElementById('container').className = 'animating';
32     }
33     
34     runTransitionTest(expectedValues, setupTest, usePauseAPI);
35   </script>
36 </head>
37 <body>
38
39 <div id="container">
40   <div id="box1" class="box" style="-webkit-transition-timing-function: linear;"></div>
41   <div id="box2" class="box" style="-webkit-transition-timing-function: ease;"></div>
42   <div id="box3" class="box" style="-webkit-transition-timing-function: ease-in;"></div>
43   <div id="box4" class="box" style="-webkit-transition-timing-function: ease-out;"></div>
44   <div id="box5" class="box" style="-webkit-transition-timing-function: ease-in-out;"></div>
45 </div>
46
47 <div id="result"></div>
48
49 </body>
50 </html>