src/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   7   <title>Overflow, positioning and compositing</title>
   8   <style type="text/css" media="screen">
   9     .container {
  10       display: inline-block;
  11       width: 150px;
  12       height: 150px;
  13       overflow:scroll;
  14       margin: 10px;
  15       border: 1px solid black;
  16     }
  17
  18     .inner {
  19       width: 200px;
  20       height: 500px;
  21       padding: 5px;
  22       font-size: 18pt;
  23       background-color: gray;
  24     }
  25   </style>
  26   <script type="text/javascript" charset="utf-8">
  27     if (window.testRunner)
  28       testRunner.waitUntilDone();
  29
  30     function doTest()
  31     {
  32       var scrollables = document.querySelectorAll('.container');
  33       for (var i = 0; i < scrollables.length; ++i)
  34       {
  35         scrollables[i].scrollTop = 50;
  36       }
  37
  38       if (window.testRunner)
  39         testRunner.notifyDone();
  40     }
  41
  42     window.addEventListener('load', doTest, false);
  43   </script>
  44 </head>
  45
  46 <body>
  47
  48   <p>All of the boxes should look the same.</p>
  49   <div class="container">
  50     <div class="inner" style="-webkit-transform: translateZ(0)">
  51       <p>
  52         This is the inner div that scrolls.
  53       </p>
  54     </div>
  55   </div>
  56
  57   <div class="container">
  58     <div class="inner" style="position: relative; -webkit-transform: translateZ(0)">
  59       <p>
  60         This is the inner div that scrolls.
  61       </p>
  62     </div>
  63   </div>
  64
  65   <div class="container" style="position: relative">
  66     <div class="inner" style="-webkit-transform: translateZ(0)">
  67       <p>
  68         This is the inner div that scrolls.
  69       </p>
  70     </div>
  71   </div>
  72
  73   <div class="container" style="position: relative">
  74     <div class="inner" style="position: relative; -webkit-transform: translateZ(0)">
  75       <p>
  76         This is the inner div that scrolls.
  77       </p>
  78     </div>
  79   </div>
  80   <br>
  81
  82   <div class="container" style="-webkit-transform: translateZ(0)">
  83     <div class="inner">
  84       <p>
  85         This is the inner div that scrolls.
  86       </p>
  87     </div>
  88   </div>
  89
  90   <div class="container" style="-webkit-transform: translateZ(0)">
  91     <div class="inner" style="position: relative;">
  92       <p>
  93         This is the inner div that scrolls.
  94       </p>
  95     </div>
  96   </div>
  97
  98   <div class="container" style="-webkit-transform: translateZ(0)">
  99     <div class="inner" style="-webkit-transform: translateZ(0)">
 100       <p>
 101         This is the inner div that scrolls.
 102       </p>
 103     </div>
 104   </div>
 105
 106   <div class="container" style="-webkit-transform: translateZ(0)">
 107     <div class="inner" style="position: relative; -webkit-transform: translateZ(0)">
 108       <p>
 109         This is the inner div that scrolls.
 110       </p>
 111     </div>
 112   </div>
 113   <br>
 114
 115
 116   <div class="container" style="position: relative; -webkit-transform: translateZ(0)">
 117     <div class="inner">
 118       <p>
 119         This is the inner div that scrolls.
 120       </p>
 121     </div>
 122   </div>
 123
 124   <div class="container" style="position: relative; -webkit-transform: translateZ(0)">
 125     <div class="inner" style="position: relative;">
 126       <p>
 127         This is the inner div that scrolls.
 128       </p>
 129     </div>
 130   </div>
 131
 132   <div class="container" style="position: relative; -webkit-transform: translateZ(0)">
 133     <div class="inner" style="-webkit-transform: translateZ(0)">
 134       <p>
 135         This is the inner div that scrolls.
 136       </p>
 137     </div>
 138   </div>
 139
 140   <div class="container" style="position: relative; -webkit-transform: translateZ(0)">
 141     <div class="inner" style="position: relative; -webkit-transform: translateZ(0)">
 142       <p>
 143         This is the inner div that scrolls.
 144       </p>
 145     </div>
 146   </div>
 147
 148
 149
 150
 151
 152 </body>
 153 </html>
 154