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