7bbcc25a623d3d4265b872fa30952741b74b07e3
[WebKit-https.git] / LayoutTests / transitions / interrupted-all-transition.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #container {
7       position: relative;
8       width: 400px;
9       height: 100px;
10       border: 1px solid black;
11     }
12     #box {
13       position: absolute;
14       height: 100px;
15       width: 100px;
16       background-color: blue;
17       -webkit-transition-duration: 1s;
18       -webkit-transition-timing-function: linear;
19     }
20   </style>
21   <script>
22     if (window.testRunner) {
23       testRunner.dumpAsText();
24       testRunner.waitUntilDone();
25     }
26
27     function startTransition()
28     {
29       var box = document.getElementById('box');
30       box.style.left = '300px';
31       box.style.opacity = 0.5;
32       window.setTimeout(function() {
33         box.style.left = '0px';
34         
35         window.setTimeout(function() {
36           var boxPos = parseInt(window.getComputedStyle(box).left);
37           document.getElementById('result').innerHTML = (boxPos < 200) ? "PASS" : "FAIL";
38           if (window.testRunner)
39               testRunner.notifyDone();
40         }, 250);
41       }, 500);
42     }
43     window.addEventListener('load', startTransition, false)
44   </script>
45 </head>
46 <body>
47
48 <p>Box should start moving left after left style is reset after 500ms</p>
49 <div id="container">
50   <div id="box">
51   </div>
52 </div>
53 <div id="result">
54 </div>
55 </body>
56 </html>