scroll-snap-root-002.html (1172B)
1 <!DOCTYPE html> 2 <html> 3 <title>scroll-padding does not propagate body 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-002-ref.html'> 8 <meta name='assert' 9 content="Test passes if scroll-snap-padding on body is not 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 overflow: hidden; /* hide scrollbars for reftest analysis */ 17 } 18 19 body { 20 scroll-padding: 25%; 21 } 22 23 #fail { 24 height: 120vh; 25 font: bold 2em; 26 background: red; 27 } 28 29 #target { 30 margin: 120vh 0; 31 scroll-snap-align: end; 32 border-bottom: solid orange thick; 33 height: 20px; /* Avoid subpixel sizes depending on fonts */ 34 } 35 </style> 36 37 <div id="fail">FAIL</div> 38 39 <div id="target"> 40 <div>Test passes if the orange stripe below is exactly at the bottom of the viewport.</div> 41 </div> 42 43 <script> 44 document.getElementById('target').scrollIntoView(); 45 </script>