scroll-target-snap-003.html (2120B)
1 <!DOCTYPE html> 2 <html> 3 <title>focus() and snap position with snapping on (y-axis)</title> 4 <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> 5 <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> 6 <link rel='match' href='scroll-target-001-ref.html'> 7 <meta name='assert' 8 content="Test passes if scroll snapping is honored 9 when scrolling an element into view 10 even if that operation is implied (in this case, by .focus())."> 11 12 <style type='text/css'> 13 .container { 14 border: solid blue 4px; 15 height: 4em; 16 overflow: auto; 17 scroll-snap-type: block; 18 19 /* to make failing more obvious */ 20 background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; 21 /* avoid anti-aliasing issues */ 22 font: 20px/1 sans-serif; 23 scrollbar-width: none; 24 } 25 .container > div, a { 26 height: 1em; 27 display: block; 28 outline: none; 29 } 30 #target { scroll-margin: 1em 0 0; 31 scroll-snap-align: center; } /* set up a snap position */ 32 #stripe { background: green; } /* color part of the snap area */ 33 .fail { color: red; } /* make failing more obvious */ 34 35 /* Try to foil the UA */ 36 .foilup { margin-bottom: -1em; scroll-snap-align: start; } 37 .foildn { margin-top: -1em; scroll-snap-align: end; } 38 39 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 40 ::-webkit-scrollbar { display: none; } 41 </style> 42 43 <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> 44 45 <div class="container"> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div class="foilup"></div> 51 <div class="fail">FAIL</div> 52 <div></div> 53 <div id="stripe"></div> 54 <div class="foilup"></div> 55 <a href="" id="target"></a> 56 <div class="foildn"></div> 57 <div></div> 58 <div class="fail">FAIL</div> 59 <div class="foildn"></div> 60 <div></div> 61 <div class="foildn"></div> 62 <div></div> 63 <div></div> 64 <div></div> 65 </div> 66 67 <script> 68 document.getElementById('target').focus(); 69 </script>