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

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