anchor-scroll-position-try-011.html (3168B)
1 <!DOCTYPE html> 2 <title>Tests position fallback with initially out-of-viewport anchor in columb-reverse flexbox</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 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/test-common.js"></script> 9 10 <style> 11 .flex { 12 display: flex; 13 flex-direction: column-reverse; 14 } 15 16 #container { 17 transform: scale(1); 18 width: fit-content; 19 height: fit-content; 20 margin: 100px; 21 } 22 23 #scroller { 24 width: 400px; 25 height: 400px; 26 overflow: scroll; 27 } 28 29 #scroll-content { 30 min-width: 800px; 31 min-height: 800px; 32 } 33 34 #anchor { 35 anchor-name: --a; 36 width: 100px; 37 height: 100px; 38 margin-bottom: 400px; 39 margin-inline-start: 400px; 40 background: orange; 41 } 42 43 #anchored { 44 position: absolute; 45 width: 100px; 46 height: 100px; 47 background: green; 48 position-anchor: --a; 49 position-try-fallbacks: --pf1, --pf2, --pf3; 50 bottom: anchor(top); 51 left: anchor(right); 52 position-visibility: always; 53 } 54 55 @position-try --pf1 { 56 inset: auto; 57 top: anchor(bottom); 58 left: anchor(right); 59 } 60 @position-try --pf2 { 61 inset: auto; 62 bottom: anchor(top); 63 right: anchor(left); 64 } 65 @position-try --pf3 { 66 inset: auto; 67 top: anchor(bottom); 68 right: anchor(left); 69 } 70 </style> 71 72 <!-- Use flex column-reverse to make everything bottom-up --> 73 <div id="container" class="flex"> 74 <div id="scroller" class="flex"> 75 <div id="scroll-content" class="flex"> 76 <div id="anchor" class="flex"></div> 77 </div> 78 </div> 79 <div id="anchored" class="flex"></div> 80 </div> 81 82 <script> 83 promise_test(async () => { 84 await waitUntilNextAnimationFrame(); 85 assert_fallback_position(anchored, anchor, 'bottom'); 86 assert_fallback_position(anchored, anchor, 'left'); 87 }, 'Should use the last fallback position initially'); 88 89 const sw = scroller.scrollWidth; 90 const sh = scroller.scrollHeight; 91 92 promise_test(async () => { 93 // Scroll up to have enough space above the anchor, but not enough right. 94 scroller.scrollTop = -sh; 95 scroller.scrollLeft = 150; 96 await waitUntilNextAnimationFrame(); 97 assert_fallback_position(anchored, anchor, 'top'); 98 assert_fallback_position(anchored, anchor, 'left'); 99 }, 'Should use the third fallback position with enough space above'); 100 101 promise_test(async () => { 102 // Scroll right to have enough space right to the anchor, but not enough above. 103 scroller.scrollTop = -150; 104 scroller.scrollLeft = sw; 105 await waitUntilNextAnimationFrame(); 106 assert_fallback_position(anchored, anchor, 'bottom'); 107 assert_fallback_position(anchored, anchor, 'right'); 108 }, 'Should use the second fallback position with enough space right'); 109 110 promise_test(async () => { 111 // Scroll up and right to have enough space on both axes. 112 scroller.scrollTop = -sh; 113 scroller.scrollLeft = sw; 114 await waitUntilNextAnimationFrame(); 115 assert_fallback_position(anchored, anchor, 'top'); 116 assert_fallback_position(anchored, anchor, 'right'); 117 }, 'Should use the first fallback position with enough space above and right'); 118 </script>