third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-animation.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       height: 240px;
   8       width: 120px;
   9       overflow: hidden;
  10       position: relative;
  11       z-index: 0; /* create stacking context */
  12       border: 1px solid black;
  13     }
  14
  15     .box {
  16       position: relative;
  17       width: 100px;
  18       height: 100px;
  19       margin: 10px;
  20       background-color: blue;
  21     }
  22
  23     .animating {
  24       -webkit-animation: spin 2s infinite linear;
  25     }
  26
  27     @-webkit-keyframes spin {
  28       from { transform: rotate(90deg); }
  29       to   { transform: rotate(360deg); }
  30     }
  31   </style>
  32   <script>
  33     if (window.testRunner) {
  34       testRunner.dumpAsText();
  35       testRunner.waitUntilDone();
  36     }
  37
  38     function runTest()
  39     {
  40       var box = document.getElementById('to-animate');
  41       box.addEventListener('webkitAnimationStart', animationStarted, false);
  42       box.className = 'animating box';
  43     }
  44
  45     function animationStarted()
  46     {
  47       if (window.testRunner) {
  48         var layerText = window.internals.layerTreeAsText(document);
  49         // The animation can progress before the start event is handled, so remove the
  50         // effects as they can vary.
  51         layerText = layerText.replace(/\[.*,.*,.*,.*\]/g, '[...]');
  52         document.getElementById('layers').innerText = layerText;
  53         testRunner.notifyDone();
  54       }
  55     }
  56     window.addEventListener('load', runTest, false);
  57   </script>
  58 </head>
  59 <body>
  60   <div class="container">
  61     <div id="to-animate" class="box"></div>
  62     <!-- This div will get a layer -->
  63     <div class="box"></div>
  64   </div>
  65   <!-- This div should not get a layer -->
  66   <div class="box"></div>
  67 <pre id="layers">Layer tree goes here in DRT</pre>
  68 </body>
  69 </html>