scroll-to-anchored-fixed-006.html (1570B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Test: Scroll-to-Focus Fixed position-area Box Horizontal</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-006-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 horizontal axis */ 27 .fixed { 28 position: fixed; 29 position-anchor: --foo; 30 position-area: span-all center; 31 place-self: start; 32 top: calc(100vh - 5em); 33 padding: 1em 2em; 34 border: solid orange 10px; 35 margin: 5px; 36 } 37 38 /* Avoid pixel differences. */ 39 .fixed { 40 font-family: Ahem; 41 } 42 a:focus { 43 outline: solid blue; 44 } 45 </style> 46 47 <input value="Tab to the next link →"><br> 48 <em>This should trigger a scroll operation...</em> 49 50 <div class=anchor></div> 51 <div class=fixed> 52 <p><a href="" id=test>One</a> 53 <p><a href="">Two</a> 54 <p><a href="">Three</a> 55 </div> 56 57 <script> 58 function raf() { 59 return new Promise(resolve => requestAnimationFrame(resolve)); 60 } 61 async function runTest() { 62 await raf(); 63 document.getElementById('test').focus(); 64 await raf(); 65 document.documentElement.classList.remove('reftest-wait'); 66 } 67 runTest(); 68 </script>