third_party/WebKit/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.testRunner) {
  34         testRunner.dumpAsText();
  35         testRunner.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).textShadow;
  48         shadow = shadow.replace(/rgb([^)]*)/g, "color").split(",");
  49
  50         var result = document.getElementById('result');
  51         if (shadow.length == 5)
  52             result.innerHTML = 'PASS: saw 5 shadows during the transition';
  53         else
  54             result.innerHTML = 'FAIL: saw ' + shadow.length + ' shadows during the transition';
  55
  56         if (window.testRunner)
  57             testRunner.notifyDone();
  58     }
  59
  60     window.addEventListener('load', setupTest, false);
  61   </script>
  62 </head>
  63 <body>
  64   <div id="container">
  65       Shadowed text
  66   </div>
  67   <div id="result"></div>
  68 </body>
  69 </html>