layout/reftests/position-sticky/bottom-3.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <!--  -->
   5 <html>
   6   <head>
   7     <title>CSS Test: Sticky Positioning - bottom, stuck</title>
   8     <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
   9     <link rel="match" href="bottom-3-ref.html">
  10     <meta name="assert" content="Bottom-sticky with content above and a containing block: should stick to the bottom of the scroll container">
  11     <style>
  12       #scroll {
  13         height: 100px;
  14         overflow: hidden;
  15       }
  16       #contain {
  17         height: 200px;
  18         background-color: gray;
  19       }
  20       #sticky {
  21         position: sticky;
  22         bottom: 10px;
  23         height: 10px;
  24         background-color: black;
  25       }
  26     </style>
  27   </head>
  28   <body>
  29     <div id="scroll">
  30       <div style="height: 20px"></div>
  31       <div id="contain">
  32         <div style="height: 100px"></div>
  33         <div id="sticky"></div>
  34       </div>
  35     </div>
  36   </body>
  37 </html>