third_party/WebKit/LayoutTests/animations/animation-iteration-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       -webkit-animation-iteration-count: 2;
  12     }
  13
  14     @-webkit-keyframes move {
  15       from { transform: translate(0px, 0px); }
  16       to { transform: translate(100px, 0px); }
  17     }
  18   </style>
  19   <script type="text/javascript" charset="utf-8">
  20     if (window.testRunner) {
  21         testRunner.dumpAsText();
  22         testRunner.waitUntilDone();
  23     }
  24
  25     var numDone = 0;
  26     function animationIterated()
  27     {
  28       ++numDone;
  29       if (numDone == 2) {
  30         if (window.GCController)
  31           GCController.collect();
  32
  33         document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
  34
  35         if (window.testRunner)
  36           testRunner.notifyDone();
  37       }
  38     }
  39
  40     function startTest()
  41     {
  42       var box1 = document.getElementById('box1');
  43       box1.addEventListener('webkitAnimationIteration', function() {
  44         box1.parentNode.removeChild(box1);
  45         animationIterated();
  46       }, false);
  47       box1.style.webkitAnimationName = 'move';
  48
  49       var box2 = document.getElementById('box2');
  50       box2.addEventListener('webkitAnimationIteration', function() {
  51         box2.style.display = 'none';
  52         animationIterated();
  53       }, false);
  54       box2.style.webkitAnimationName = 'move';
  55     }
  56
  57     window.addEventListener('load', startTest, false);
  58   </script>
  59 </head>
  60 <body>
  61
  62 <p>Tests element removal and hiding within the webkitAnimationIteration event handler. Should not crash.</p>
  63
  64 <div id="container">
  65   <div id="box1" class="box"></div>
  66   <div id="box2" class="box"></div>
  67 </div>
  68 <div id="results"></div>
  69 </body>
  70 </html>