scroll-target-align-003.html (1943B)
1 <!DOCTYPE html> 2 <html> 3 <title>focus() and snap position with snapping off (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="flags" content="may"> 8 <meta name='assert' 9 content="Test passes if scroll snapping is honored 10 on a scroll container with 'scroll-snap-type: none' 11 when scrolling an element into view 12 even if that operation is implied (in this case, by .focus())."> 13 <style type='text/css'> 14 .container { 15 border: solid blue 4px; 16 height: 4em; 17 overflow: auto; 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 .container { scroll-padding: .5em 0 0; } /* set up a snap position */ 31 #target { scroll-margin: .5em 0 0; 32 scroll-snap-align: center; } 33 #stripe { background: green; } /* color part of the snap area */ 34 .fail { color: red; } /* make failing more obvious */ 35 36 /* emulate `scrollbar-width: none` for browsers that don't support it yet */ 37 ::-webkit-scrollbar { display: none; } 38 </style> 39 40 <div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> 41 42 <div class="container"> 43 <div></div> 44 <div></div> 45 <div></div> 46 <div></div> 47 <div class="fail">FAIL</div> 48 <div></div> 49 <div id="stripe"></div> 50 <a href="" id="target"></a> 51 <div></div> 52 <div class="fail">FAIL</div> 53 <div></div> 54 <div></div> 55 <div></div> 56 <div></div> 57 </div> 58 59 <script> 60 document.getElementById('target').focus(); 61 </script>