layout/reftests/scrolling/opacity-mixed-scrolling-2.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <style>
   4 #scrollbox {
   5   margin: 20px;
   6   width: 300px;
   7   height: 400px;
   8   overflow-y: auto;
   9   background: -moz-linear-gradient(#444, #555);
  10 }
  11 .opacityBox {
  12   opacity: 0.999;
  13   border: 1px solid black;
  14   margin: 20px;
  15   padding: 20px;
  16 }
  17 #inner {
  18   background-image: -moz-linear-gradient(white, rgba(255,255,255,0));
  19 }
  20 </style>
  21
  22 <div id="scrollbox" class="scrollTop">
  23   <div id="inner">
  24     outside
  25     <div class="opacityBox">in opacity box</div>
  26     outside
  27     <div class="opacityBox">in opacity box</div>
  28
  29     outside
  30     <div class="opacityBox">in opacity box</div>
  31     outside
  32     <div class="opacityBox">in opacity box</div>
  33     outside
  34     <div class="opacityBox">in opacity box</div>
  35     outside
  36     <div class="opacityBox">in opacity box</div>
  37     outside
  38     <div class="opacityBox">in opacity box</div>
  39
  40     outside
  41     <div class="opacityBox">in opacity box</div>
  42     outside
  43     <div class="opacityBox">in opacity box</div>
  44     outside
  45   </div>
  46 </div>
  47 <script src="scrolling.js"></script>
  48 </body>
  49 </html>