third_party/WebKit/LayoutTests/transitions/move-after-transition.html

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