third_party/WebKit/LayoutTests/transitions/transition-end-event-rendering.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     body {
   7       margin: 0;
   8     }
   9
  10     #container {
  11       position: relative;
  12       width: 400px;
  13       height: 230px;
  14       border: 1px solid  black;
  15     }
  16
  17     .box {
  18       position: relative;
  19       width: 100px;
  20       height: 100px;
  21       margin: 10px 0;
  22       background-color: green;
  23     }
  24
  25     #container.moved .software {
  26       left: 300px;
  27     }
  28
  29     #container.moved .hardware {
  30       transform: translateX(300px);
  31     }
  32
  33     .software {
  34       -webkit-transition: left 300ms linear;
  35     }
  36
  37     .hardware {
  38       -webkit-transition: transform 1s linear;
  39       transform: translateX(0);
  40     }
  41
  42    </style>
  43    <script src="../animations/resources/animation-test-helpers.js"></script>
  44    <script>
  45
  46     function testEnded()
  47     {
  48       if (window.testRunner)
  49         testRunner.notifyDone();
  50     }
  51
  52     function startTest()
  53     {
  54       if (window.testRunner)
  55         testRunner.waitUntilDone();
  56       document.getElementById('tester').addEventListener('webkitTransitionEnd', testEnded, false);
  57       document.getElementById('container').className = 'moved';
  58     }
  59
  60     window.addEventListener('load', startTest, false);
  61    </script>
  62 </head>
  63 <body>
  64
  65   <div id="container">
  66     <!-- <div class="software box"></div> -->
  67     <div id="tester" class="hardware box"></div>
  68   </div>
  69
  70   <div id="result">
  71   </div>
  72
  73 </body>
  74 </html>