third_party/WebKit/LayoutTests/compositing/overflow/scrollbars-with-clipped-owner.html

   1 <!DOCTYPE HTML>
   2 <html>
   3   <head>
   4     <style>
   5       body {
   6         margin: 0px;
   7         overflow:hidden;
   8       }
   9
  10       #outer-scrollable {
  11         position: absolute;
  12         top: 0px;
  13         left: 0px;
  14         right: 0px;
  15         bottom: 0px;
  16         overflow: scroll;
  17       }
  18
  19       #tall {
  20         height: 1000px;
  21       }
  22
  23       #inner-scrollable {
  24         position: relative;
  25         overflow: auto;
  26         width: 200px;
  27         height: 200px;
  28         z-index: 0;
  29       }
  30
  31       #content {
  32         width: 300px;
  33         height: 300px;
  34         background-color: blue;
  35         margin: 0px;
  36         transform:translateZ(0);
  37       }
  38     </style>
  39     <script>
  40       function doTest() {
  41         if (window.testRunner)
  42           testRunner.dumpAsTextWithPixelResults();
  43
  44         // This test succeeds if the scrollbars on the inner-scrollable
  45         // are positioned properly.
  46         var scroller = document.getElementById("outer-scrollable");
  47         scroller.scrollTop = 100;
  48       }
  49       window.addEventListener("load", doTest, false);
  50     </script>
  51   </head>
  52   <body>
  53     <div id="outer-scrollable">
  54       <div id="tall">
  55         <div id="inner-scrollable">
  56           <div id="content"></div>
  57         </div>
  58       </div>
  59     </div>
  60   </body>
  61 </html>