third_party/WebKit/LayoutTests/compositing/geometry/limit-layer-bounds-overflow-root.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     html, body {
   7       overflow: hidden;
   8       margin: 0;
   9     }
  10
  11     .container {
  12       position: absolute;
  13       width: 100px;
  14       height: 100px;
  15       padding: 20px;
  16       z-index: 0;
  17       border: 1px solid black;
  18     }
  19
  20     .compositing {
  21       position: absolute;
  22       top: 21px;
  23       left: 21px;
  24       width: 100px;
  25       height: 100px;
  26       transform: translateZ(0);
  27     }
  28
  29     .test {
  30       position: relative;
  31       width: 100px;
  32       height: 100px;
  33       background-color: green;
  34     }
  35
  36     .indicator {
  37       position: absolute;
  38       top: 21px;
  39       left: 21px;
  40       width: 100px;
  41       height: 100px;
  42       background-color: red;
  43     }
  44
  45     #layers {
  46       position: absolute;
  47     }
  48   </style>
  49   <script type="text/javascript" charset="utf-8">
  50     if (window.testRunner) {
  51       testRunner.dumpAsText();
  52       testRunner.waitUntilDone();
  53     }
  54
  55     function doTest()
  56     {
  57       if (window.testRunner) {
  58         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  59         testRunner.notifyDone();
  60       }
  61     }
  62
  63     window.addEventListener('load', doTest, false);
  64   </script>
  65 </head>
  66
  67 <body>
  68
  69   <!-- Go into compositing. -->
  70   <div class="compositing"></div>
  71
  72   <div class="indicator"></div>
  73
  74   <!-- Tests with absolute positioning between the compositing layer and the element with overflow. -->
  75   <!-- You should see a green square. -->
  76   <div class="container">
  77     <div class="test">
  78     </div>
  79   </div>
  80   <pre id="layers">Layer tree goes here in DRT</pre>
  81 </body>
  82 </html>
  83