third_party/WebKit/LayoutTests/animations/animation-start-event-destroy-renderer.html

   1 <html>
   2 <head>
   3   <title>Destroy and Hide Element in Animation End Event</title>
   4   <style type="text/css" media="screen">
   5     .box {
   6       height: 100px;
   7       width: 100px;
   8       margin: 10px;
   9       background-color: blue;
  10       -webkit-animation-duration: 0.2s;
  11     }
  12
  13     @-webkit-keyframes move {
  14       from { transform: translate(0px, 0px); }
  15       to { transform: translate(100px, 0px); }
  16     }
  17   </style>
  18   <script type="text/javascript" charset="utf-8">
  19     if (window.testRunner) {
  20         testRunner.dumpAsText();
  21         testRunner.waitUntilDone();
  22     }
  23
  24     var numDone = 0;
  25     function animationStarted()
  26     {
  27       ++numDone;
  28       if (numDone == 2) {
  29         if (window.GCController)
  30           GCController.collect();
  31
  32         document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
  33
  34         if (window.testRunner)
  35           testRunner.notifyDone();
  36       }
  37     }
  38
  39     function startTest()
  40     {
  41       var box1 = document.getElementById('box1');
  42       box1.addEventListener('webkitAnimationStart', function() {
  43         box1.parentNode.removeChild(box1);
  44         animationStarted();
  45       }, false);
  46       box1.style.webkitAnimationName = 'move';
  47
  48       var box2 = document.getElementById('box2');
  49       box2.addEventListener('webkitAnimationStart', function() {
  50         box2.style.display = 'none';
  51         animationStarted();
  52       }, false);
  53       box2.style.webkitAnimationName = 'move';
  54     }
  55
  56     window.addEventListener('load', startTest, false);
  57   </script>
  58 </head>
  59 <body>
  60
  61 <p>Tests element removal and hiding within the webkitAnimationStart event handler. Should not crash.</p>
  62
  63 <div id="container">
  64   <div id="box1" class="box"></div>
  65   <div id="box2" class="box"></div>
  66 </div>
  67 <div id="results"></div>
  68 </body>
  69 </html>