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       requestAnimationFrame(function() {
  39         setTimeout(function() {
  40           if (window.testRunner)
  41             testRunner.notifyDone();
  42         });
  43       });
  44     }
  45
  46     window.addEventListener('load', doTest, false);
  47   </script>
  48 </head>
  49
  50 <body>
  51
  52   <p>All of the boxes should look the same.</p>
  53   <div class="container">
  54     <div class="inner" style="transform: translateZ(0)">
  55       <p>
  56         This is the inner div that scrolls.
  57       </p>
  58     </div>
  59   </div>
  60
  61   <div class="container">
  62     <div class="inner" style="position: relative; transform: translateZ(0)">
  63       <p>
  64         This is the inner div that scrolls.
  65       </p>
  66     </div>
  67   </div>
  68
  69   <div class="container" style="position: relative">
  70     <div class="inner" style="transform: translateZ(0)">
  71       <p>
  72         This is the inner div that scrolls.
  73       </p>
  74     </div>
  75   </div>
  76
  77   <div class="container" style="position: relative">
  78     <div class="inner" style="position: relative; transform: translateZ(0)">
  79       <p>
  80         This is the inner div that scrolls.
  81       </p>
  82     </div>
  83   </div>
  84   <br>
  85
  86   <div class="container" style="transform: translateZ(0)">
  87     <div class="inner">
  88       <p>
  89         This is the inner div that scrolls.
  90       </p>
  91     </div>
  92   </div>
  93
  94   <div class="container" style="transform: translateZ(0)">
  95     <div class="inner" style="position: relative;">
  96       <p>
  97         This is the inner div that scrolls.
  98       </p>
  99     </div>
 100   </div>
 101
 102   <div class="container" style="transform: translateZ(0)">
 103     <div class="inner" style="transform: translateZ(0)">
 104       <p>
 105         This is the inner div that scrolls.
 106       </p>
 107     </div>
 108   </div>
 109
 110   <div class="container" style="transform: translateZ(0)">
 111     <div class="inner" style="position: relative; transform: translateZ(0)">
 112       <p>
 113         This is the inner div that scrolls.
 114       </p>
 115     </div>
 116   </div>
 117   <br>
 118
 119
 120   <div class="container" style="position: relative; transform: translateZ(0)">
 121     <div class="inner">
 122       <p>
 123         This is the inner div that scrolls.
 124       </p>
 125     </div>
 126   </div>
 127
 128   <div class="container" style="position: relative; transform: translateZ(0)">
 129     <div class="inner" style="position: relative;">
 130       <p>
 131         This is the inner div that scrolls.
 132       </p>
 133     </div>
 134   </div>
 135
 136   <div class="container" style="position: relative; transform: translateZ(0)">
 137     <div class="inner" style="transform: translateZ(0)">
 138       <p>
 139         This is the inner div that scrolls.
 140       </p>
 141     </div>
 142   </div>
 143
 144   <div class="container" style="position: relative; transform: translateZ(0)">
 145     <div class="inner" style="position: relative; transform: translateZ(0)">
 146       <p>
 147         This is the inner div that scrolls.
 148       </p>
 149     </div>
 150   </div>
 151
 152
 153
 154
 155
 156 </body>
 157 </html>
 158