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>