layout/reftests/position-sticky/inline-4.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3    - http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <html reftest-async-scroll>
   5   <head>
   6     <title>CSS Test: Sticky Positioning - inline, async scrolling</title>
   7     <link rel="author" title="Corey Ford" href="mailto:corey@coreyford.name">
   8     <link rel="match" href="inline-4-ref.html">
   9     <meta name="assert" content="Sticky positioning on inline elements should keep continuations aligned during async scrolling">
  10     <link rel="stylesheet" type="text/css" href="ahem.css">
  11     <style>
  12       #scroller {
  13         margin-top: 100px;
  14         height: 200px;
  15         width: 500px;
  16         overflow: scroll;
  17         scrollbar-width: none;
  18       }
  19       #container {
  20         background: pink;
  21         position: relative;
  22         margin: 50px;
  23         height: 400px;
  24         margin-bottom: 1000px;
  25       }
  26       #sticky {
  27         position: sticky;
  28         left: 0px;
  29         top: 75px;
  30         outline: 1px dotted purple;
  31         font: 10px/1 Ahem;
  32       }
  33     </style>
  34   </head>
  35   <body>
  36     <div id="scroller"
  37          reftest-displayport-x="0" reftest-displayport-y="0"
  38          reftest-displayport-w="500" reftest-displayport-h="300"
  39          reftest-async-scroll-y="30">
  40       <div id="container">
  41         <span id="sticky">
  42           First line<br>
  43           Second line<br>
  44           Third line<br>
  45         </span>
  46       </div>
  47     </div>
  48   </body>
  49 </html>