position-sticky-left-002-ref.html (1817B)
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 left: 0px; 40 } 41 42 div#second-sticky 43 { 44 left: 50px; 45 } 46 47 div#third-sticky 48 { 49 left: 100px; 50 } 51 </style> 52 53 <body onload="document.getElementById("first-scrolling-container").scrollLeft = 50; document.getElementById("second-scrolling-container").scrollLeft = 150; document.getElementById("third-scrolling-container").scrollLeft = 300;"> 54 55 <p>Test passes if there are 3 filled green squares and <strong>no red</strong>. 56 57 <div id="first-scrolling-container" class="scrolling-container"> 58 59 <div class="horizontal-spacer-200"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 60 61 </div> 62 63 64 <div id="second-scrolling-container" class="scrolling-container"> 65 66 <div class="horizontal-spacer-200"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 67 68 </div> 69 70 <div id="third-scrolling-container" class="scrolling-container"> 71 72 <div class="horizontal-spacer-200"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div> 73 74 </div>