anchor-scroll-position-try-007.html (3476B)
1 <!DOCTYPE html> 2 <title>Tests position fallback with initially out-of-viewport anchor in vertial-rl</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 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 width: 200vw; 15 height: 200vh; 16 } 17 18 html { 19 writing-mode: vertical-rl; 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 } 41 42 @position-try --pf1 { 43 inset: auto; 44 inset-block-end: anchor(start); 45 inset-inline-start: anchor(end); 46 } 47 @position-try --pf2 { 48 inset: auto; 49 inset-block-start: anchor(end); 50 inset-inline-end: anchor(start); 51 } 52 @position-try --pf3 { 53 inset: auto; 54 inset-block-end: anchor(start); 55 inset-inline-end: anchor(start); 56 } 57 </style> 58 59 <div id="anchor"></div> 60 <div id="anchored"></div> 61 62 <script> 63 let vw = window.innerWidth; 64 let vh = window.innerHeight; 65 66 promise_test(async () => { 67 await waitUntilNextAnimationFrame(); 68 await waitUntilNextAnimationFrame(); 69 assert_fallback_position(anchored, anchor, 'top'); 70 assert_fallback_position(anchored, anchor, 'right'); 71 }, 'Should use the last position option initially'); 72 73 promise_test(async () => { 74 // Scroll left to have enough space left to the anchor, but not enough below. 75 document.documentElement.scrollLeft = -250; 76 document.documentElement.scrollTop = 150; 77 await waitUntilNextAnimationFrame(); 78 assert_fallback_position(anchored, anchor, 'top'); 79 assert_fallback_position(anchored, anchor, 'right'); 80 // The anchored element stays where it is, though, since the current option still fits. 81 }, 'Should stay at initial position, since it still fits'); 82 83 promise_test(async () => { 84 // Scroll left to have enough space left to the anchor, but not enough below. 85 document.documentElement.scrollLeft = -vw + 99; 86 await waitUntilNextAnimationFrame(); 87 assert_fallback_position(anchored, anchor, 'left'); 88 assert_fallback_position(anchored, anchor, 'top'); 89 }, 'Should use the third position option with enough space left'); 90 91 promise_test(async () => { 92 // Scroll down and left to have enough space on both axes. 93 document.documentElement.scrollLeft = -250; 94 document.documentElement.scrollTop = vh + 100; 95 await waitUntilNextAnimationFrame(); 96 assert_fallback_position(anchored, anchor, 'left'); 97 assert_fallback_position(anchored, anchor, 'bottom'); 98 }, 'Should use the first position option with enough space left and below'); 99 100 promise_test(async () => { 101 // Scroll down to have enough space below the anchor, but not enough left. 102 document.documentElement.scrollLeft = -150; 103 document.documentElement.scrollTop = vh - 99; 104 await waitUntilNextAnimationFrame(); 105 assert_fallback_position(anchored, anchor, 'right'); 106 assert_fallback_position(anchored, anchor, 'bottom'); 107 }, 'Should use the second position option with enough space below (and not enough above)'); 108 </script>