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

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