anchor-scroll-position-try-013.html (1340B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/test-common.js"></script> 7 <style> 8 #cb { 9 position: relative; 10 width: 200px; 11 height: 200px; 12 border: solid 1px; 13 } 14 15 #scroller { 16 width: 200px; 17 height: 200px; 18 overflow: scroll; 19 } 20 21 #abspos { 22 position: absolute; 23 background: hotpink; 24 width: 50px; 25 height: 50px; 26 27 position-area: bottom; 28 position-try-fallbacks: flip-block; 29 position-anchor: --a; 30 } 31 32 #anchor { 33 anchor-name: --a; 34 width: 50px; 35 height: 50px; 36 margin: 150px 0 150px 50px; 37 background: dodgerblue; 38 } 39 40 </style> 41 <div id="cb"> 42 <div id="scroller"> 43 <div id="anchor"> 44 </div> 45 </div> 46 <div id="abspos"></div> 47 </div> 48 49 <script> 50 promise_test(async () => { 51 await waitUntilNextAnimationFrame(); 52 assert_fallback_position(abspos, anchor, 'top'); 53 }); 54 55 promise_test(async () => { 56 scroller.scrollTop = 101; 57 await waitUntilNextAnimationFrame(); 58 assert_fallback_position(abspos, anchor, 'bottom'); 59 }); 60 61 promise_test(async () => { 62 scroller.scrollTop = 40; 63 await waitUntilNextAnimationFrame(); 64 assert_fallback_position(abspos, anchor, 'top'); 65 }); 66 </script>