anchor-scroll-implicit-001.html (1178B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>Tests that scroll adjustments of implicitly anchored elements are applied correctly</title> 4 <link rel="author" href="mailto:dshin@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <style> 8 .positioned { 9 position: fixed; 10 width: 100px; 11 height: 50px; 12 left: anchor(left); 13 top: anchor(bottom); 14 background: green; 15 border: none; 16 padding: 0; 17 margin: 0; 18 } 19 20 .container { 21 position: relative; 22 width: 100px; 23 height: 100px; 24 background: red; 25 overflow: hidden; 26 } 27 28 .filler { 29 width: 1px; 30 height: 50px; 31 } 32 33 .anchor { 34 width: 100px; 35 height: 50px; 36 background: green; 37 border: none; 38 padding: 0; 39 } 40 </style> 41 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 42 <div class=positioned popover id="popover"></div> 43 <div id=s class=container> 44 <div class=filler></div> 45 <button id=b class=anchor popovertarget="popover"></button> 46 <div class=filler></div> 47 </div> 48 <script> 49 b.click(); 50 s.scrollTop = 50; 51 document.documentElement.classList.remove('reftest-wait'); 52 </script> 53 </html>