scroll-to-anchored-fixed-003.html (1527B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Test: Scroll-to-Focus Fixed anchor()ed Box Vertical</title> 4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#scroll"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis"> 6 7 <link rel="match" href="scroll-to-anchored-fixed-003-ref.html"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <style> 10 /* Force scrolling. */ 11 body { 12 border: solid silver; 13 height: 100vh; 14 width: 100vw; 15 } 16 .anchor { 17 position: absolute; 18 top: 100%; 19 left: 100%; 20 width: 100vw; 21 height: 100vh; 22 border: solid silver; 23 anchor-name: --foo; 24 } 25 26 /* Attach to anchor in vertical axis */ 27 .fixed { 28 position: fixed; 29 position-anchor: --foo; 30 left: calc(100vw - 5em); 31 top: anchor(top); 32 padding: 1em 2em; 33 border: solid orange 10px; 34 margin: 5px; 35 } 36 37 /* Avoid pixel differences. */ 38 .fixed { 39 font-family: Ahem; 40 } 41 a:focus { 42 outline: solid blue; 43 } 44 </style> 45 46 <input value="Tab to the next link →"><br> 47 <em>This should trigger a scroll operation...</em> 48 49 <div class=anchor></div> 50 <div class=fixed> 51 <p><a href="" id=test>One</a> 52 <p><a href="">Two</a> 53 <p><a href="">Three</a> 54 </div> 55 56 <script> 57 function raf() { 58 return new Promise(resolve => requestAnimationFrame(resolve)); 59 } 60 async function runTest() { 61 await raf(); 62 document.getElementById('test').focus(); 63 await raf(); 64 document.documentElement.classList.remove('reftest-wait'); 65 } 66 runTest(); 67 </script>