2008-08-25 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / transitions / interrupted-all-transition.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Interrupted All Transition</title>
8   <style type="text/css" media="screen">
9     #container {
10       position: relative;
11       width: 400px;
12       height: 100px;
13       border: 1px solid black;
14     }
15     #box {
16       position: absolute;
17       height: 100px;
18       width: 100px;
19       background-color: blue;
20       -webkit-transition-duration: 1s;
21       -webkit-transition-timing-function: linear;
22     }
23   </style>
24   <script type="text/javascript" charset="utf-8">
25     if (window.layoutTestController) {
26       layoutTestController.dumpAsText();
27       layoutTestController.waitUntilDone();
28     }
29
30     function startTransition()
31     {
32       var box = document.getElementById('box');
33       box.style.left = '300px';
34       box.style.opacity = 0.5;
35       window.setTimeout(function() {
36         box.style.left = '0px';
37         
38         window.setTimeout(function() {
39           var boxPos = parseInt(window.getComputedStyle(box).left);
40           document.getElementById('result').innerHTML = (boxPos < 200) ? "PASS" : "FAIL";
41           if (window.layoutTestController)
42               layoutTestController.notifyDone();
43         }, 250);
44       }, 500);
45     }
46     window.addEventListener('load', startTransition, false)
47   </script>
48 </head>
49 <body>
50
51 <p>Box should start moving left after left style is reset after 500ms</p>
52 <div id="container">
53   <div id="box">
54   </div>
55 </div>
56 <div id="result">
57 </div>
58 </body>
59 </html>