| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #container { |
| width: 400px; |
| height: 100px; |
| margin: 10px; |
| -webkit-transition-property: text-shadow; |
| -webkit-transition-duration: 1s; |
| -webkit-transition-timing-function: linear; |
| } |
| |
| #container { |
| text-shadow: yellow 0px 10px 10px, |
| yellow 0px 20px 10px, |
| yellow 0px 30px 10px, |
| yellow 0px 40px 10px, |
| yellow 0px 50px 10px; |
| } |
| |
| #container.final { |
| text-shadow: green 0px 10px 2px, |
| green 0px 20px 2px, |
| green 0px 30px 2px, |
| green 0px 40px 2px, |
| green 0px 50px 2px; |
| } |
| |
| </style> |
| <script> |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function setupTest() |
| { |
| document.getElementById('container').className = 'final'; |
| window.setTimeout(checkShadow, 0); |
| } |
| |
| function checkShadow() |
| { |
| var container = document.getElementById('container'); |
| var shadow = window.getComputedStyle(container).getPropertyCSSValue('text-shadow'); |
| |
| var result = document.getElementById('result'); |
| if (shadow.length == 5) |
| result.innerHTML = 'PASS: saw 5 shadows during the transition'; |
| else |
| result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition'; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.addEventListener('load', setupTest, false); |
| </script> |
| </head> |
| <body> |
| <div id="container"> |
| Shadowed text |
| </div> |
| <div id="result"></div> |
| </body> |
| </html> |
