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

   1 <html>
   2 <head>
   3 <style>
   4
   5     #clipped {
   6         position: absolute;
   7         left: 0px;
   8         right: 0px;
   9         width: 100px;
  10         height: 100px;
  11         overflow: hidden;
  12     }
  13
  14     #child {
  15         width: 500px;
  16         height: 100px;
  17         background-color: green;
  18         transform:translateZ(0);
  19     }
  20
  21     #overlap {
  22         position: absolute;
  23         left: 400px;
  24         top: 0px;
  25         width: 100px;
  26         height: 100px;
  27         background-color: blue;
  28     }
  29
  30     #row1 {
  31         position: absolute;
  32         left: 50px;
  33         top: 50px;
  34     }
  35
  36     #row2 {
  37         position: absolute;
  38         left: 50px;
  39         top: 200px;
  40     }
  41 </style>
  42 <script>
  43     if (window.testRunner) {
  44         testRunner.dumpAsText();
  45         window.addEventListener('load', function() {
  46             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  47         }, false);
  48     }
  49 </script>
  50 </head>
  51 <body>
  52     <div id="row1">
  53         <div id="clipped">
  54             <div id="child"></div>
  55         </div>
  56
  57         <!-- this element should not get its own layer -->
  58         <div id="overlap"></div>
  59     </div>
  60
  61     <div id="row2">
  62         <div id="clipped"></div>
  63         <div id="child"></div>
  64
  65         <!-- this element should get its own layer -->
  66         <div id="overlap"></div>
  67     </div>
  68
  69     <pre id="layertree"></pre>
  70 </body>
  71 </html>