2009-01-08 Pierre-Olivier Latour <pol@apple.com>
[WebKit-https.git] / LayoutTests / transitions / zero-duration-with-non-zero-delay-start.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   <style>
8     
9     body {
10       margin: 0;
11     }
12     
13     #target {
14       position: relative;
15       top: 100px;
16       left: 100px;
17       width: 200px;
18       height: 200px;
19       background-color: red;
20       -webkit-transition-property: left;
21       -webkit-transition-duration: 0s;
22       -webkit-transition-delay: 0.5s;
23     }
24     
25    </style>
26    <script type="text/javascript" charset="utf-8">
27    
28     function finishTest() {
29       var expected = 200;
30       var current = parseInt(window.getComputedStyle(document.getElementById('target')).left);
31       if (current == expected)
32         document.getElementById('result').innerHTML = "PASS - left property is " + current + "px as expected";
33       else
34         document.getElementById('result').innerHTML = "FAIL - left property is " + current + "px instead of " + expected + "px";
35
36       if (window.layoutTestController)
37         layoutTestController.notifyDone();
38     }
39     
40     function runTest() {
41       window.setTimeout(finishTest, 1000);
42     }
43     
44     function startTest() {
45       if (window.layoutTestController) {
46         layoutTestController.dumpAsText();
47         layoutTestController.waitUntilDone();
48       }
49       
50       var target = document.getElementById('target');
51       target.style.left = '200px';
52         
53       window.setTimeout(runTest, 0);
54     }
55     
56    </script>
57 </head>
58 <body onload="startTest()">
59   <h1>Test that transitions with a zero-duration and but a non-zero delay effectively work</h1>
60
61   <div id="target">
62   </div>
63
64   <div id="result">
65   </div>
66
67 </body>
68 </html>