Not reviewed.
[WebKit-https.git] / LayoutTests / transitions / remove-transition-style.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>Dynamic transition removal</title>
8   <style type="text/css" media="screen">
9     #box {
10       height: 200px;
11       width: 200px;
12       margin: 20px;
13       background-color: blue;
14     }
15     
16     .animated {
17       -webkit-transition: opacity 200ms;
18     }
19   </style>
20   <script type="text/javascript" charset="utf-8">
21     if (window.layoutTestController) {
22       layoutTestController.waitUntilDone();
23       layoutTestController.dumpAsText();
24     }
25
26     function log(s)
27     {
28       var results = document.getElementById('results');
29       results.innerHTML += s + '<br>';
30     }
31
32     function testTransitions()
33     {
34       if (window.layoutTestController) {
35         var numAnims = layoutTestController.numberOfActiveAnimations();
36         if (numAnims == 0)
37           log('No running transitions: PASS');
38         else
39           log('Still ' + numAnims + ' transitions running: FAIL')
40
41         layoutTestController.notifyDone();
42       }
43     }
44     
45     function removeStyle()
46     {
47       box.className = '';
48       window.setTimeout(testTransitions, 50);
49     }
50
51     function startTransition()
52     {
53       var box = document.getElementById('box');
54       box.className = 'animated';
55       window.setTimeout(function() {
56         box.style.opacity = '0.5';
57         window.setTimeout(removeStyle, 200);
58       }, 0);
59     }
60     
61     window.addEventListener('load', startTransition, false);
62   </script>
63 </head>
64 <body>
65
66 <div id="box"></div>
67
68 <div id="results"></div>
69 </body>
70 </html>