inline-4.html (1438B)
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>