LayoutTests/transitions/transition-end-event-destroy-renderer.html

   1 <html>
   2 <head>
   3   <title>Destroy and Hide Element in Transition 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-transition-property: -webkit-transform;
  11       -webkit-transition-duration: 0.2s;
  12     }
  13   </style>
  14   <script type="text/javascript" charset="utf-8">
  15     if (window.layoutTestController) {
  16         layoutTestController.dumpAsText();
  17         layoutTestController.waitUntilDone();
  18     }
  19
  20     var numDone = 0;
  21     function transitionEnded()
  22     {
  23       ++numDone;
  24       if (numDone == 2) {
  25         if (window.GCController)
  26           GCController.collect();
  27
  28         document.getElementById('results').innerHTML = 'Did not crash, so PASSED';
  29
  30         if (window.layoutTestController)
  31           layoutTestController.notifyDone();
  32       }
  33     }
  34
  35     function startTest()
  36     {
  37       var box1 = document.getElementById('box1');
  38       box1.addEventListener('webkitTransitionEnd', function() {
  39         box1.parentNode.removeChild(box1);
  40         transitionEnded();
  41       }, false);
  42       box1.style.webkitTransform = 'translate(100px, 0)';
  43
  44       var box2 = document.getElementById('box2');
  45       box2.addEventListener('webkitTransitionEnd', function() {
  46         box2.style.display = 'none';
  47         transitionEnded();
  48       }, false);
  49       box2.style.webkitTransform = 'translate(100px, 0)';
  50     }
  51
  52     window.addEventListener('load', startTest, false);
  53   </script>
  54 </head>
  55 <body>
  56
  57 <p>Tests element removal and hiding in webkitTransitionEnd event handler. Should not crash.</p>
  58
  59 <div id="container">
  60   <div id="box1" class="box"></div>
  61   <div id="box2" class="box"></div>
  62 </div>
  63 <div id="results"></div>
  64 </body>
  65 </html>