scroll-snap-root-001.html (1136B)
1 <!DOCTYPE html> 2 <html> 3 <title>scroll-snap-type + scroll-padding propagates root to viewport</title> 4 <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> 5 <link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'> 6 <link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'> 7 <link rel='match' href='scroll-snap-root-001-ref.html'> 8 <meta name='assert' 9 content="Test passes if scroll snap properties on root are applied to viewport."> 10 11 <style type='text/css'> 12 html, body { margin: 0; padding: 0; } 13 14 :root { 15 scroll-snap-type: block mandatory; 16 scroll-padding: 25%; 17 overflow: hidden; /* hide scrollbars for reftest analysis */ 18 } 19 20 #fail { 21 font: bold 2em; 22 background: red; 23 height: 120vh; 24 margin-bottom: 60vh; 25 } 26 27 #target { 28 margin-bottom: 120vh; 29 scroll-margin: 25vh; 30 scroll-snap-align: start; 31 border-top: solid blue; 32 } 33 </style> 34 35 <div id="fail">FAIL</div> 36 37 <div id="target"> 38 <div>Test passes if the blue line above is centered in the viewport.</div> 39 </div> 40 41 <script> 42 document.getElementById('target').scrollIntoView(); 43 </script>