scroll-target-margin-004.html (1758B)
1 <!DOCTYPE html> 2 <html> 3 <title>scroll-margin on elements with 'display: table;'</title> 4 <link rel='author' title='Jan Grosser' href='mailto:jan_firefoxdev@t-online.de'> 5 <link rel='help' href='https://bugzilla.mozilla.org/show_bug.cgi?id=1633192'> 6 <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> 7 <link rel='match' href='scroll-target-001-ref.html'> 8 <meta name="flags" content="should"> 9 <meta name='assert' content="Test passes if scroll-margin is honored on elements with 'display: table'."> 10 <style type='text/css'> 11 .container { 12 border: solid blue 4px; 13 height: 4em; 14 overflow: auto; 15 16 /* to make failing more obvious */ 17 background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; 18 /* avoid anti-aliasing issues */ 19 font: 20px/1 sans-serif; 20 scrollbar-width: none; 21 } 22 .container > div { 23 height: 1em; 24 } 25 #target { scroll-margin: 2em 0 1em; display: table; } /* snap area is exact fit for snapport */ 26 #stripe { background: green; } /* color part of the snap area */ 27 .fail { color: red; } /* make failing more obvious */ 28 29 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 30 ::-webkit-scrollbar { display: none; } 31 </style> 32 33 <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> 34 35 <div class="container"> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div class="fail">FAIL</div> 41 <div></div> 42 <div id="stripe"></div> 43 <div id="target"></div> 44 <div></div> 45 <div class="fail">FAIL</div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 </div> 51 52 <script> 53 document.getElementById('target').scrollIntoView(); 54 </script>