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

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6
   7     .animating {
   8       -webkit-animation: slide 10s alternate linear infinite;
   9     }
  10
  11     .container {
  12       height: 200px;
  13       width: 250px;
  14       padding: 5px;
  15       border: 1px solid black;
  16     }
  17
  18     .banner {
  19       width: 100%;
  20       height: 50px;
  21       background-color: silver;
  22     }
  23
  24     .box {
  25       position: relative;
  26       height: 100px;
  27       width: 100px;
  28       margin: 10px;
  29       background-color: blue;
  30     }
  31
  32     .test1 {
  33       position: absolute;
  34       left: 0;
  35       top: 10px;
  36       background-color: orange;
  37     }
  38
  39     .test2 {
  40       position: absolute;
  41       top: 60px;
  42       left: 120px;
  43       background-color: orange;
  44     }
  45
  46     .composited {
  47       transform: translateZ(0);
  48     }
  49
  50     @-webkit-keyframes slide {
  51       from { transform: none; }
  52       to { transform: translateX(100px); }
  53     }
  54   </style>
  55   <script>
  56     if (window.testRunner) {
  57       testRunner.dumpAsText();
  58       testRunner.waitUntilDone();
  59     }
  60
  61     function runTest()
  62     {
  63       if (window.testRunner) {
  64         window.internals.pauseAnimations(0.0);
  65         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  66         testRunner.notifyDone();
  67       }
  68     }
  69     window.addEventListener('load', runTest, false);
  70   </script>
  71 </head>
  72 <body>
  73
  74   <div id="to-animate" class="container animating">
  75     <div class="composited banner"></div>
  76     <div class="test1 box">Should be composited</div>
  77     <div class="test2 box">Should not be composited</div>
  78   </div>
  79
  80   <div class="box">Should be composited</div>
  81   <pre id="layers">Layer tree goes here in DRT</pre>
  82
  83 </body>
  84 </html>