layout/reftests/position-sticky/right-3.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 - right, contained</title>
   7     <link rel="author" title="Corey Ford" href="mailto:cford@mozilla.com">
   8     <link rel="match" href="right-3-ref.html">
   9     <meta name="flags" content="dom">
  10     <meta name="assert" content="Sticky-right with too much scrolling: should stay within the containing block">
  11     <style>
  12       #scroll {
  13         width: 100px;
  14         height: 100px;
  15         overflow: hidden;
  16         border: 1px solid black;
  17         white-space: nowrap;
  18       }
  19       #scroll div {
  20         display: inline-block;
  21       }
  22       .fill {
  23         width: 100px;
  24         height: 1px;
  25       }
  26       #contain {
  27         width: 200px;
  28         height: 10px;
  29         background-color: gray;
  30         /* This puts the sticky element's "normal position" at
  31            the right side of the containing block. */
  32         direction: rtl;
  33       }
  34       #sticky {
  35         position: sticky;
  36         right: 10px;
  37         width: 10px;
  38         height: 10px;
  39         background-color: black;
  40       }
  41     </style>
  42   <body>
  43     <div id="scroll">
  44       <div class="fill"></div
  45       ><div id="contain">
  46         <div id="sticky"></div>
  47       </div
  48       ><div class="fill"></div>
  49     </div>
  50     <script type="text/javascript">
  51       document.getElementById("scroll").scrollLeft = 220;
  52     </script>
  53   </body>
  54 </html>