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