2011-04-25 Simon Fraser <simon.fraser@apple.com>
[WebKit-https.git] / LayoutTests / transitions / multiple-text-shadow-transition.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5     #container {
6       width: 400px;
7       height: 100px;
8       margin: 10px;
9       -webkit-transition-property: text-shadow;
10       -webkit-transition-duration: 1s;
11       -webkit-transition-timing-function: linear;
12     }
13     
14     #container {
15         text-shadow:    yellow 0px 10px 10px,
16                         yellow 0px 20px 10px,
17                         yellow 0px 30px 10px,
18                         yellow 0px 40px 10px,
19                         yellow 0px 50px 10px;
20     }
21
22     #container.final {
23         text-shadow:    green 0px 10px 2px,
24                         green 0px 20px 2px,
25                         green 0px 30px 2px,
26                         green 0px 40px 2px,
27                         green 0px 50px 2px;
28     }
29
30   </style>
31   <script>
32
33     if (window.layoutTestController) {
34         layoutTestController.dumpAsText();
35         layoutTestController.waitUntilDone();
36     }
37     
38     function setupTest()
39     {
40       document.getElementById('container').className = 'final';
41       window.setTimeout(checkShadow, 0);
42     }
43     
44     function checkShadow()
45     {
46         var container = document.getElementById('container');
47         var shadow = window.getComputedStyle(container).getPropertyCSSValue('text-shadow');
48         
49         var result = document.getElementById('result');
50         if (shadow.length == 5)
51             result.innerHTML = 'PASS: saw 5 shadows during the transition';
52         else
53             result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition';
54         
55         if (window.layoutTestController)
56             layoutTestController.notifyDone();
57     }
58     
59     window.addEventListener('load', setupTest, false);
60   </script>
61 </head>
62 <body>
63   <div id="container">
64       Shadowed text
65   </div>
66   <div id="result"></div>
67 </body>
68 </html>