layout/reftests/async-scrolling/dynamic-toolbar-sticky-5c.html

   1 <!DOCTYPE html>
   2 <html reftest-async-scroll
   3       reftest-displayport-x="0" reftest-displayport-y="-1150"
   4       reftest-displayport-w="800" reftest-displayport-h="2150"
   5       reftest-async-scroll-x="0" reftest-async-scroll-y="-100">
   6 <meta name="viewport" content="width=device-width">
   7 <style>
   8 html, body {
   9     margin: 0;
  10     scrollbar-width: none;
  11 }
  12 .spacer {
  13     height: 100vh;
  14     background-color: green;
  15 }
  16 .sticky_bottom {
  17     position: sticky;
  18     bottom: 20px;
  19     height: 50px;
  20     background-color: blue;
  21     opacity: 50%;
  22 }
  23 .sticky_both {
  24     position: sticky;
  25     top: 20px;
  26     bottom: 20px;
  27     height: 50px;
  28     background-color: purple;
  29     opacity: 50%;
  30 }
  31 .sticky_top {
  32     position: sticky;
  33     top: 20px;
  34     height: 50px;
  35     background-color: red;
  36     opacity: 50%;
  37 }
  38 </style>
  39 <div class="spacer"></div>
  40 <div class="sticky_bottom"></div>
  41 <div class="sticky_both"></div>
  42 <div class="sticky_top"></div>
  43 <div class="spacer"></div>
  44 <script>
  45 document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
  46 </script>