layout/reftests/position-sticky/left-right-1.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 - left+right, at left</title>
   7     <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
   8     <link rel="match" href="left-right-1-ref.html">
   9     <meta name="assert" content="Left+right sticky, scrolled to the left: should act as right-sticky">
  10     <style>
  11       #scroll {
  12         width: 100px;
  13         height: 100px;
  14         overflow: hidden;
  15         border: 1px solid black;
  16         white-space: nowrap;
  17       }
  18       #scroll div {
  19         display: inline-block;
  20       }
  21       .fill {
  22         width: 100px;
  23         height: 1px;
  24       }
  25       #contain {
  26         width: 200px;
  27         height: 10px;
  28         background-color: gray;
  29       }
  30       #sticky {
  31         position: sticky;
  32         left: 10px;
  33         right: 10px;
  34         width: 10px;
  35         height: 10px;
  36         background-color: black;
  37       }
  38     </style>
  39   <body>
  40     <div id="scroll">
  41       <div class="fill"></div
  42       ><div id="sticky"></div
  43       ><div class="fill"></div>
  44     </div>
  45   </body>
  46 </html>