anchor-scroll-position-try-014.html (1408B)
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 display: flex; 20 flex-direction: column-reverse; 21 } 22 23 #abspos { 24 position: absolute; 25 background: hotpink; 26 width: 50px; 27 height: 50px; 28 29 position-area: top; 30 position-try-fallbacks: flip-block; 31 position-anchor: --a; 32 } 33 34 #anchor { 35 anchor-name: --a; 36 width: 50px; 37 min-height: 50px; 38 flex: 0; 39 margin: 150px 0 150px 50px; 40 background: dodgerblue; 41 } 42 43 </style> 44 <div id="cb"> 45 <div id="scroller"> 46 <div id="anchor"> 47 </div> 48 </div> 49 <div id="abspos"></div> 50 </div> 51 52 <script> 53 promise_test(async () => { 54 await waitUntilNextAnimationFrame(); 55 assert_fallback_position(abspos, anchor, 'bottom'); 56 }); 57 58 promise_test(async () => { 59 scroller.scrollTop = -116; 60 await waitUntilNextAnimationFrame(); 61 assert_fallback_position(abspos, anchor, 'top'); 62 }); 63 64 promise_test(async () => { 65 scroller.scrollTop = -40; 66 await waitUntilNextAnimationFrame(); 67 assert_fallback_position(abspos, anchor, 'bottom'); 68 }); 69 </script>