anchor-scroll-composited-scrolling-paint-001.html (1288B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1999954"> 4 <link rel="match" href="anchor-scroll-composited-scrolling-paint-001-ref.html"> 5 <script src="/common/reftest-wait.js"></script> 6 <style> 7 .abs-cb { 8 width: 100px; 9 height: 100px; 10 position: relative; 11 } 12 13 .scroller { 14 overflow: scroll; 15 scrollbar-width: none; 16 width: 100%; 17 height: 100%; 18 } 19 20 .anchor { 21 anchor-name: --a; 22 width: 50px; 23 height: 50px; 24 background: blue; 25 } 26 27 .chain { 28 width: 25px; 29 height: 25px; 30 background: pink; 31 position: absolute; 32 position-anchor: --a; 33 anchor-name: --b; 34 left: anchor(right); 35 top: anchor(bottom); 36 } 37 38 .filler { 39 width: 1px; 40 height: 50px; 41 } 42 43 .positioned { 44 width: 25px; 45 height: 25px; 46 background: yellow; 47 position: absolute; 48 position-anchor: --b; 49 left: anchor(right); 50 top: anchor(bottom); 51 position-visibility: always; 52 } 53 </style> 54 <div class=abs-cb> 55 <div class=scroller> 56 <div id=s class=scroller> 57 <div class=filler></div> 58 <div class=anchor></div> 59 <div class=filler></div> 60 </div> 61 <div class=chain></div> 62 </div> 63 <div class=positioned></div> 64 </div> 65 <script> 66 window.addEventListener("TestRendered", () => { 67 s.scrollTop = 50; 68 takeScreenshot(); 69 }); 70 </script> 71 </html>