anchor-scroll-position-try-002.html (1430B)
1 <!DOCTYPE html> 2 <html dir="rtl"> 3 <title>Tests position fallback with rtl scroller</title> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> 6 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/test-common.js"></script> 10 11 <style> 12 body { 13 margin: 0; 14 } 15 16 #anchor { 17 anchor-name: --a; 18 width: 100px; 19 height: 100px; 20 margin-right: 200px; 21 background: orange; 22 } 23 24 #spacer { 25 width: 1000vw; 26 height: 1px; 27 } 28 29 #anchored { 30 position: fixed; 31 width: 100px; 32 height: 100px; 33 background: green; 34 position-anchor: --a; 35 top: anchor(top); 36 left: anchor(right); 37 position-try-fallbacks: --pf; 38 } 39 40 @position-try --pf { 41 left: auto; 42 right: anchor(left); 43 } 44 </style> 45 46 <div id="anchor"></div> 47 <div id="spacer"></div> 48 <div id="anchored"></div> 49 50 <script> 51 promise_test(async () => { 52 await waitUntilNextAnimationFrame(); 53 assert_fallback_position(anchored, anchor, 'right'); 54 }, 'Should use the first fallback position at the initial scroll offset'); 55 56 promise_test(async () => { 57 document.documentElement.scrollLeft = -101; 58 await waitUntilNextAnimationFrame(); 59 assert_fallback_position(anchored, anchor, 'left'); 60 }, 'Should use the second fallback position after scrolling left'); 61 </script> 62 63 </html>