anchor-scroll-position-try-010.html (2993B)
1 <!DOCTYPE html> 2 <title>Tests position fallback with initially out-of-viewport anchor in vertial-lr rtl</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 <meta name="viewport" content="width=device-width, initial-scale=1"> 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 width: 200vw; 15 height: 200vh; 16 } 17 18 html { 19 writing-mode: vertical-lr; 20 direction: rtl; 21 } 22 23 #anchor { 24 anchor-name: --a; 25 width: 100px; 26 height: 100px; 27 margin-block-start: 100vb; 28 margin-inline-start: 100vi; 29 background: orange; 30 } 31 32 #anchored { 33 position: fixed; 34 width: 100px; 35 height: 100px; 36 background: green; 37 position-anchor: --a; 38 position-try-fallbacks: --pf1, --pf2, --pf3; 39 inset-block-start: anchor(end); 40 inset-inline-start: anchor(end); 41 position-visibility: always; 42 } 43 44 @position-try --pf1 { 45 inset: auto; 46 inset-block-end: anchor(start); 47 inset-inline-start: anchor(end); 48 } 49 @position-try --pf2 { 50 inset: auto; 51 inset-block-start: anchor(end); 52 inset-inline-end: anchor(start); 53 } 54 @position-try --pf3 { 55 inset: auto; 56 inset-block-end: anchor(start); 57 inset-inline-end: anchor(start); 58 } 59 </style> 60 61 <div id="anchor"></div> 62 <div id="anchored"></div> 63 64 <script> 65 let vw = window.innerWidth; 66 let vh = window.innerHeight; 67 68 promise_test(async () => { 69 await waitUntilNextAnimationFrame(); 70 assert_fallback_position(anchored, anchor, 'bottom'); 71 assert_fallback_position(anchored, anchor, 'left'); 72 }, 'Should use the last fallback position initially'); 73 74 promise_test(async () => { 75 // Scroll left to have enough space right to the anchor, but not enough above. 76 document.documentElement.scrollLeft = vw; 77 document.documentElement.scrollTop = -150; 78 await waitUntilNextAnimationFrame(); 79 assert_fallback_position(anchored, anchor, 'right'); 80 assert_fallback_position(anchored, anchor, 'bottom'); 81 }, 'Should use the third fallback position with enough space right'); 82 83 promise_test(async () => { 84 // Scroll up to have enough space above the anchor, but not enough right. 85 document.documentElement.scrollLeft = 150; 86 document.documentElement.scrollTop = -vh; 87 await waitUntilNextAnimationFrame(); 88 assert_fallback_position(anchored, anchor, 'left'); 89 assert_fallback_position(anchored, anchor, 'top'); 90 }, 'Should use the second fallback position with enough space above'); 91 92 promise_test(async () => { 93 // Scroll up and right to have enough space on both axes. 94 document.documentElement.scrollLeft = vw; 95 document.documentElement.scrollTop = -vh; 96 await waitUntilNextAnimationFrame(); 97 assert_fallback_position(anchored, anchor, 'right'); 98 assert_fallback_position(anchored, anchor, 'top'); 99 }, 'Should use the first fallback position with enough space right and above'); 100 </script>