third_party/WebKit/LayoutTests/transitions/remove-transition-style.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       height: 200px;
   8       width: 200px;
   9       margin: 20px;
  10       background-color: blue;
  11     }
  12
  13     .animated {
  14       -webkit-transition: opacity 2000s step-end;
  15     }
  16   </style>
  17   <script>
  18     if (window.testRunner) {
  19       testRunner.waitUntilDone();
  20       testRunner.dumpAsText();
  21     }
  22
  23     function log(s)
  24     {
  25       var results = document.getElementById('results');
  26       results.innerHTML += s + '<br>';
  27     }
  28
  29     function testTransitions()
  30     {
  31       var box = document.getElementById('box');
  32       box.className = 'animated';
  33       box.style.opacity = '0.5';
  34       if (getComputedStyle(box).opacity == '0.5')
  35         log("Transition didn't start: FAIL");
  36       else {
  37         box.className = '';
  38         if (getComputedStyle(box).opacity == '0.5')
  39             log('No running transitions: PASS');
  40         else
  41             log('Transition still running: FAIL')
  42       }
  43       if (window.testRunner) {
  44         testRunner.notifyDone();
  45       }
  46     }
  47
  48     window.addEventListener('load', testTransitions, false);
  49   </script>
  50 </head>
  51 <body>
  52
  53 <div id="box"></div>
  54
  55 <div id="results"></div>
  56 </body>
  57 </html>