layout/reftests/async-scrolling/opaque-fractional-displayport-2.html

   1 <!DOCTYPE html>
   2 <html lang="en" reftest-async-scroll>
   3 <meta charset="utf-8">
   4 <title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title>
   5
   6 <style>
   7
   8 body {
   9   margin: 0;
  10 }
  11
  12 .scrollbox {
  13   margin: 50px;
  14   width: 200px;
  15   height: 200px;
  16   overflow: auto;
  17
  18   /* Make the background "non-uniform" so that the scrolled layer does not
  19    * pull up a background color. */
  20   background: linear-gradient(to bottom, white, transparent);
  21 }
  22
  23 .scrolled-contents {
  24   height: 300.2px;
  25   background-color: lime;
  26   box-sizing: border-box;
  27   border: 1px solid lime;
  28 }
  29
  30 .transparent-overlap-of-fractional-edge {
  31   margin: -10px 20px 0;
  32   height: 40px;
  33   background-color: rgba(0, 0, 255, 0.5);
  34 }
  35
  36 </style>
  37
  38 <body>
  39
  40 <div class="scrollbox"
  41      reftest-displayport-x="0" reftest-displayport-y="-100.2"
  42      reftest-displayport-w="200" reftest-displayport-h="300.2"
  43      reftest-async-scroll-x="0" reftest-async-scroll-y="0">
  44   <div class="scrolled-contents">
  45     <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer">
  46       <!-- This element has the magic "reftest-opaque-layer" class which
  47            constitutes the actual test here. -->
  48     </div>
  49   </div>
  50 </div>
  51
  52 <script>
  53
  54 document.querySelector(".scrollbox").scrollTop = 100000; /* will end up at 100.2 */
  55
  56 </script>