anchor-scroll-position-try-003.html (1693B)
1 <!DOCTYPE html> 2 <title>Tests position fallback with bottom-up scroller</title> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/test-common.js"></script> 9 10 <style> 11 #containing-block { 12 width: 400px; 13 height: 400px; 14 transform: scale(1); 15 border: 1px solid black; 16 } 17 18 #scroller { 19 display: flex; 20 flex-direction: column-reverse; 21 width: 400px; 22 height: 400px; 23 overflow-y: scroll; 24 } 25 26 .box { 27 min-height: 100px; 28 width: 100px; 29 } 30 31 #anchor { 32 anchor-name: --a; 33 background: orange; 34 } 35 36 #anchored { 37 position: absolute; 38 top: anchor(bottom); 39 width: 100px; 40 height: 100px; 41 background: green; 42 position-anchor: --a; 43 position-try-fallbacks: --pf; 44 } 45 46 @position-try --pf { 47 top: auto; 48 bottom: anchor(top); 49 } 50 </style> 51 52 <div id="containing-block"> 53 <div id="scroller"> 54 <div class="box"></div> 55 <div class="box" id="anchor"></div> 56 <div class="box"></div> 57 <div class="box"></div> 58 <div class="box"></div> 59 </div> 60 <div id="anchored"></div> 61 </div> 62 63 <script> 64 promise_test(async () => { 65 await waitUntilNextAnimationFrame(); 66 assert_fallback_position(anchored, anchor, 'bottom'); 67 }, 'Should use the first fallback position at the initial scroll offset'); 68 69 promise_test(async () => { 70 scroller.scrollTop = -1; 71 await waitUntilNextAnimationFrame(); 72 assert_fallback_position(anchored, anchor, 'top'); 73 }, 'Should use the second fallback position after scrolling up'); 74 </script>