anchor-scroll-position-try-001.html (2818B)
1 <!DOCTYPE html> 2 <title>Tests that position fallback responds to scrolling</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 <style> 10 #cb { 11 width: 400px; 12 height: 399px; 13 margin: 100px; 14 transform: scale(1); 15 outline: 1px solid black; 16 } 17 18 #scroller { 19 width: 400px; 20 height: 400px; 21 overflow: scroll; 22 } 23 24 #anchor { 25 width: 100px; 26 height: 100px; 27 margin-left: 150px; 28 margin-right: 275px; 29 margin-top: 300px; 30 margin-bottom: 300px; 31 background: orange; 32 anchor-name: --a; 33 } 34 35 #anchored { 36 position: absolute; 37 background: green; 38 position-anchor: --a; 39 position-try-fallbacks: --f1, --f2; 40 width: 100px; height: 100px; 41 /* Above the anchor */ 42 left: anchor(left); 43 bottom: anchor(top); 44 } 45 46 @position-try --f1 { 47 /* Left of the anchor */ 48 right: anchor(left); 49 top: anchor(top); 50 bottom: auto; 51 left: auto; 52 } 53 54 @position-try --f2 { 55 /* Right of the anchor */ 56 left: anchor(right); 57 top: anchor(top); 58 bottom: auto; 59 } 60 61 </style> 62 63 <div id="cb"> 64 <div id="scroller"> 65 <div id="anchor"></div> 66 </div> 67 <div id="anchored"></div> 68 </div> 69 70 <script> 71 promise_test(async () => { 72 await waitUntilNextAnimationFrame(); 73 assert_fallback_position(anchored, anchor, 'top'); 74 }, 'Should be above the anchor when at initial scroll position'); 75 76 promise_test(async () => { 77 scroller.scrollTop = 200; 78 await waitUntilNextAnimationFrame(); 79 assert_fallback_position(anchored, anchor, 'top'); 80 }, 'Scroll down until the top edge of #anchor touches container but not overflowing'); 81 82 promise_test(async () => { 83 scroller.scrollTop = 201; 84 await waitUntilNextAnimationFrame(); 85 assert_fallback_position(anchored, anchor, 'left'); 86 }, 'Scroll further down, making the first fallback position overflow by 1px'); 87 88 promise_test(async () => { 89 scroller.scrollTop = 1; 90 await waitUntilNextAnimationFrame(); 91 // The first option now fits again, but the current option also still fits, so 92 // stay there. 93 assert_fallback_position(anchored, anchor, 'left'); 94 }, 'Scroll back up so that both the first and second options fit.'); 95 96 promise_test(async () => { 97 scroller.scrollTop = 0; 98 await waitUntilNextAnimationFrame(); 99 assert_fallback_position(anchored, anchor, 'top'); 100 }, 'Scroll further up, where the second option no longer fits'); 101 102 promise_test(async () => { 103 scroller.scrollTop = 249; 104 scroller.scrollLeft = 51; 105 await waitUntilNextAnimationFrame(); 106 assert_fallback_position(anchored, anchor, 'right'); 107 }, 'Scroll bottom-right to make the first two options overflow'); 108 </script>