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