anchor-scroll-implicit-002.html (1267B)
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: absolute; 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 } 26 27 .scroller { 28 width: 100%; 29 height: 100%; 30 overflow: hidden; 31 } 32 33 .filler { 34 width: 1px; 35 height: 50px; 36 } 37 38 .anchor { 39 width: 100px; 40 height: 50px; 41 background: green; 42 border: none; 43 padding: 0; 44 } 45 </style> 46 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 47 <div class=container> 48 <div id=s class=scroller> 49 <div class=filler></div> 50 <button id=b class=anchor popovertarget="popover"></button> 51 <div class=filler></div> 52 </div> 53 <div class=positioned popover id="popover"></div> 54 </div> 55 <script> 56 b.click(); 57 s.scrollTop = 50; 58 document.documentElement.classList.remove('reftest-wait'); 59 </script> 60 </html>