position-sticky-right-002-ref.html (1769B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reftest Reference</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 div.scrolling-container 11 { 12 height: 150px; 13 margin-bottom: 30px; 14 overflow-y: hidden; 15 position: static; 16 white-space: nowrap; 17 width: 250px; 18 } 19 20 div.horizontal-spacer-200 21 { 22 display: inline-block; 23 height: 100%; 24 width: 200px; 25 } 26 27 div.sticky 28 { 29 background-color: green; 30 display: inline-block; 31 height: 100px; 32 position: relative; 33 vertical-align: top; 34 width: 100px; 35 } 36 37 div#first-sticky 38 { 39 right: 100px; 40 } 41 42 div#second-sticky 43 { 44 right: 50px; 45 } 46 </style> 47 48 <body onload="document.getElementById("first-scrolling-container").scrollLeft = 25; document.getElementById("second-scrolling-container").scrollLeft = 100; document.getElementById("third-scrolling-container").scrollLeft = 200;"> 49 50 <p>Test passes if there are 3 filled green squares and <strong>no red</strong>. 51 52 <div id="first-scrolling-container" class="scrolling-container"> 53 54 <div class="horizontal-spacer-200"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 55 56 </div> 57 58 <div id="second-scrolling-container" class="scrolling-container"> 59 60 <div class="horizontal-spacer-200"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 61 62 </div> 63 64 <div id="third-scrolling-container" class="scrolling-container"> 65 66 <div class="horizontal-spacer-200"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 67 68 </div>