third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-transforms.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     .transformed {
  24       transform: translateZ(1px); /* non-affine transform */
  25     }
  26   </style>
  27   <script>
  28     if (window.testRunner)
  29       testRunner.dumpAsText();
  30
  31     function testDone()
  32     {
  33       if (window.testRunner)
  34         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  35     }
  36     window.addEventListener('load', testDone, false);
  37   </script>
  38 </head>
  39 <body>
  40   <div class="container">
  41     <div class="transformed box"></div>
  42     <!-- This div will get a layer -->
  43     <div class="box"></div>
  44   </div>
  45   <!-- This div should not get a layer -->
  46   <div class="box"></div>
  47 <pre id="layers">Layer tree goes here in DRT</pre>
  48 </body>
  49 </html>