<!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).textShadow;
        shadow = shadow.replace(/rgb([^)]*)/g, "color").split(",");

        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>