anchor-scroll-position-try-005.html (1479B)
1 <!DOCTYPE html> 2 <html dir="rtl"> 3 <title>Tests position fallback with rtl scroller and vertical-rl OOF</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 writing-mode: vertical-rl; 31 position: fixed; 32 width: 100px; 33 height: 100px; 34 background: green; 35 position-anchor: --a; 36 top: anchor(top); 37 left: anchor(right); 38 position-try-fallbacks: --pf; 39 } 40 41 @position-try --pf { 42 left: auto; 43 right: anchor(left); 44 } 45 </style> 46 47 <div id="anchor"></div> 48 <div id="spacer"></div> 49 <div id="anchored"></div> 50 51 <script> 52 promise_test(async () => { 53 await waitUntilNextAnimationFrame(); 54 assert_fallback_position(anchored, anchor, 'right'); 55 }, 'Should use the first fallback position at the initial scroll offset'); 56 57 promise_test(async () => { 58 document.documentElement.scrollLeft = -101; 59 await waitUntilNextAnimationFrame(); 60 assert_fallback_position(anchored, anchor, 'left'); 61 }, 'Should use the second fallback position after scrolling left'); 62 </script> 63 64 </html>