layout/reftests/position-sticky/top-2.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <html>
   5   <head>
   6     <title>CSS Test: Sticky Positioning - top, normal position</title>
   7     <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
   8     <link rel="match" href="top-2-ref.html">
   9     <meta name="flags" content="dom">
  10     <meta name="assert" content="Sticky-top with not enough scrolling: should be in its normal position">
  11     <style>
  12       #scroll {
  13         height: 100px;
  14         overflow: hidden;
  15       }
  16       #contain {
  17         height: 300px;
  18         background-color: gray;
  19       }
  20       #sticky {
  21         position: sticky;
  22         top: 10px;
  23         height: 10px;
  24         background-color: black;
  25       }
  26       #static {
  27         height: 10px;
  28         background-color: blue;
  29       }
  30     </style>
  31   </head>
  32   <body>
  33     <div id="scroll">
  34       <div style="height: 20px"></div>
  35       <div id="contain">
  36         <div id="sticky"></div>
  37         <div id="static"></div>
  38       </div>
  39       <div style="height: 100px"></div>
  40     </div>
  41     <script type="application/javascript">
  42       document.getElementById("scroll").scrollTop = 10;
  43     </script>
  44   </body>
  45 </html>