layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html

   1 <!DOCTYPE HTML>
   2 <!--
   3   Tests that setting a fixed bottom margin in the compositor results
   4   in the margin being applied to an element sticky to the bottom.
   5
   6   The fixed margin is specified as a test-pref in reftest.list.
   7
   8   The purpose of the fixed margin is to compensate for the transform that the
   9   dynamic toolbar applies to the entire content area. We don't have a way of
  10   simulating that transform in a reftest, so the fixed margin in isolation will
  11   cause the sticky element to be offset from the bottom of the screen.
  12 -->
  13 <html>
  14 <meta name="viewport" content="width=device-width">
  15 <style>
  16 html {
  17     scrollbar-width: none;
  18 }
  19 #scrolled {
  20     display: flex;
  21     justify-content: space-around;
  22     align-items: flex-start;
  23
  24     height: 2000px;
  25     width: 100%;
  26 }
  27 #sticky {
  28     width: 100%;
  29     height: 200px;
  30     position: sticky;
  31     bottom: 20px;
  32     background: red;
  33     align-self: flex-end;
  34 }
  35 </style>
  36 <body>
  37   <div id="scrolled">
  38     <div id="sticky"></div>
  39   </div>
  40 </body>
  41 </html>