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