Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / interrupt-zero-duration.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style>
6     #box {
7         position: relative;
8         height: 100px;
9         width: 100px;
10         background-color: blue;
11         -webkit-transition-property: left;
12         -webkit-transition-duration: 2s;
13         -webkit-transition-timing-function: linear;
14     }
15     </style>
16     <script>
17     if (window.testRunner) {
18         testRunner.dumpAsText();
19         testRunner.waitUntilDone();
20     }
21
22     result = "PASS";
23     
24     function isEqual(actual, desired, tolerance)
25     {
26         var diff = Math.abs(actual - desired);
27         return diff <= tolerance;
28     }
29     
30     function snapshot(expected, tolerance)
31     {
32         if (result != "PASS")
33             return;
34             
35         var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
36         if (!isEqual(left, expected, tolerance))
37             result = "FAIL(was:"+left+", expected:"+expected+")";
38     }
39     
40     function reset()
41     {
42         document.getElementById('box').style.webkitTransitionDuration = "0s";
43         document.getElementById('box').style.left = "0px";
44     }
45     
46     function startTransition()
47     {
48         document.getElementById('box').style.left = "400px";
49     }
50
51     function start()
52     {
53         setTimeout("startTransition()", 0);
54         setTimeout("snapshot(100, 80)", 500);
55         setTimeout("reset()", 600);
56         setTimeout("snapshot(0, 0)", 700);
57         
58         window.setTimeout(function() {
59             document.getElementById('result').innerHTML = result;
60             if (window.testRunner)
61                 testRunner.notifyDone();
62         }, 800);
63     }
64     
65     window.addEventListener('load', start, false)
66   </script>
67 </head>
68 <body>
69
70 <p>
71 This tests changing a transitioning property while running and resetting its duration to 0.
72 The box should start moving left and after 500ms snap back to 0</p>
73 <div id="box">
74 </div>
75 <div id="result">
76 </div>
77 </body>
78 </html>