src/third_party/WebKit/LayoutTests/compositing/geometry/limit-layer-bounds-clipping-ancestor.html

   1 <!DOCTYPE html>
   2
   3 <html lang="en">
   4 <head>
   5   <style type="text/css" media="screen">
   6     body {
   7       height: 2600px;
   8     }
   9
  10     .container {
  11       width: 200px;
  12       height: 200px;
  13       margin: 10px;
  14       overflow: auto;
  15       border: 10px solid black;
  16     }
  17
  18     .inner {
  19       width: 100px;
  20       height: 2200px;
  21       padding: 5px;
  22       font-size: 18pt;
  23       background-color: green;
  24     }
  25
  26     .compositing {
  27       position: absolute;
  28       top: 21px;
  29       left: 21px;
  30       width: 100px;
  31       height: 100px;
  32       -webkit-transform: translateZ(0);
  33     }
  34
  35     p {
  36       font: 1em/1 Ahem, sans-serif;
  37     }
  38
  39     p.middle {
  40       position: absolute;
  41       top: 10%;
  42     }
  43
  44     p.bottom {
  45       position: absolute;
  46       bottom: 0;
  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       var scrollables = document.querySelectorAll('.container');
  58       for (var i = 0; i < scrollables.length; ++i)
  59         scrollables[i].scrollTop = 100;
  60
  61       if (window.testRunner) {
  62         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  63         testRunner.notifyDone();
  64       }
  65     }
  66
  67     window.addEventListener('load', doTest, false);
  68   </script>
  69 </head>
  70
  71 <body>
  72
  73   <!-- Go into compositing. -->
  74   <div class="compositing"></div>
  75
  76   <!-- "middle" text should be visible -->
  77   <div class="container" style="position: relative; overflow: hidden;">
  78     <div class="inner" style="position: relative;">
  79       <p class="top">top</p>
  80       <p class="middle">middle</p>
  81       <p class="bottom">bottom</p>
  82     </div>
  83   </div>
  84
  85   <!-- Vertical scrollbar should be visible -->
  86   <!-- "middle" text should be visible -->
  87   <!-- "inner" should use a tiled layer -->
  88   <div class="container" style="position: relative;">
  89     <div class="inner" style="position: relative;">
  90       <p class="top">top</p>
  91       <p class="middle">middle</p>
  92       <p class="bottom">bottom</p>
  93     </div>
  94   </div>
  95
  96   <pre id="layers">Layer tree goes here in DRT</pre>
  97
  98 </body>
  99 </html>