anchor-scroll-005.html (1229B)
1 <!DOCTYPE html> 2 <title>Tests scrolling with anchor in fixed-positioned scroller</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 height: 200vh; 13 } 14 15 #scroller { 16 position: fixed; 17 width: 200px; 18 height: 200px; 19 overflow-y: scroll; 20 } 21 22 #anchor { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 top: 200px; 27 background: orange; 28 anchor-name: --a; 29 } 30 31 #target { 32 position: fixed; 33 width: 100px; 34 height: 100px; 35 bottom: anchor(top); 36 position-anchor: --a; 37 background: lime; 38 } 39 </style> 40 41 <div id=scroller> 42 <div id=anchor></div> 43 </div> 44 <div id=target></div> 45 46 <script> 47 promise_test(async () => { 48 await waitUntilNextAnimationFrame(); 49 assert_equals(target.getBoundingClientRect().top, 100); 50 51 document.documentElement.scrollTop = 100; 52 await waitUntilNextAnimationFrame(); 53 assert_equals(target.getBoundingClientRect().top, 100); 54 }, 'Target should not scroll with viewport when anchor is in fixed-positioned scroller'); 55 </script>