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

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