third_party/WebKit/LayoutTests/compositing/squashing/overflow-scroll-grandchildren.html

   1 <!DOCTYPE html>
   2 <style>
   3   #container {
   4     width: 300px;
   5     height: 300px;
   6     border: 1px solid black;
   7     overflow: scroll;
   8   }
   9
  10   #overlapper {
  11     position: fixed;
  12     background-color: red;
  13     width: 50px;
  14     height: 200px;
  15     left: 20px;
  16     top: 20px;
  17     transform: translateZ(0);
  18   }
  19
  20   #subcontainer {
  21     height: 500px
  22   }
  23
  24   .child {
  25     position: relative;
  26     top: 5px;
  27     left: 5px;
  28     background-color: green;
  29     height: 35px;
  30     width: 35px;
  31     margin: 50px;
  32   }
  33
  34   .grandchild {
  35     position: relative;
  36     top: 5px;
  37     left: 5px;
  38     background-color: blue;
  39     height: 10px;
  40     width: 10px;
  41   }
  42 </style>
  43
  44 <div id="overlapper"></div>
  45 <div id="container">
  46   <div id="subcontainer">
  47     <div class="child">
  48       <div class="grandchild"></div>
  49     </div>
  50     <div class="child">
  51       <div class="grandchild"></div>
  52     </div>
  53   </div>
  54 </div>
  55 <script>
  56 // Scroll so that one of the grandchildren boxes is half clipped by the overflow:scroll div.
  57 var container = document.getElementById("container");
  58 container.scrollTop = 65;
  59 </script>