third_party/WebKit/LayoutTests/compositing/geometry/bounds-clipped-composited-child.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     body {
   7       overflow: hidden;
   8     }
   9     .container {
  10       margin-left: 50px;
  11       height: 100px;
  12       width: 100px;
  13       transform: translate3d(-50%, 0, 0);
  14     }
  15
  16     .box {
  17       position: absolute;
  18       top: 0;
  19       height: 100px;
  20       width: 100px;
  21       overflow: hidden;
  22       background-color: green;
  23     }
  24
  25     #indicator {
  26       position: absolute;
  27       top: 8px;
  28       left: 8px;
  29       width: 200px;
  30       height: 100px;
  31       background-color: red;
  32     }
  33
  34     #layers {
  35       opacity: 0; /* hide from pixel result */
  36     }
  37   </style>
  38   <script>
  39     if (window.testRunner)
  40       testRunner.dumpAsTextWithPixelResults();
  41
  42     function dumpLayers()
  43     {
  44       if (window.testRunner)
  45         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  46     }
  47
  48     window.addEventListener('load', dumpLayers, false);
  49   </script>
  50 </head>
  51 <body>
  52   <!-- You should see a green rectangle, and no red. -->
  53   <div id="indicator"></div>
  54   <div class="container">
  55     <div class="box" style="transform: translateX(0)"></div>
  56     <div class="box" style="transform: translateX(100%)"></div>
  57   </div>
  58 <pre id="layers">Layer tree goes here in DRT</pre>
  59 </body>
  60 </html>