anchor-scroll-006.html (3431B)
1 <!DOCTYPE html> 2 <title>Tests that scroll adjustment is applied per-axis</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#needs-scroll-adjustment"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 14 .scroller { 15 width: 150px; 16 height: 150px; 17 margin-bottom: 50px; 18 overflow: scroll; 19 position: relative; 20 } 21 22 .spacer { 23 width: 400px; 24 height: 400px; 25 } 26 27 .anchor { 28 position: absolute; 29 width: 50px; 30 height: 50px; 31 top: 50px; 32 left: 50px; 33 background: orange; 34 } 35 36 .target { 37 position: fixed; 38 width: 50px; 39 height: 50px; 40 background: lime; 41 } 42 43 #scroller1 { anchor-name: --scroller1; } 44 #scroller2 { anchor-name: --scroller2; } 45 #scroller3 { anchor-name: --scroller3; } 46 47 #anchor1 { anchor-name: --a1; } 48 #anchor2 { anchor-name: --a2; } 49 #anchor3 { anchor-name: --a3; } 50 51 /* Needs scroll adjustment in x axis only */ 52 #target1 { 53 position-anchor: --a1; 54 left: anchor(left); 55 top: anchor(--scroller1 bottom); 56 } 57 58 /* Needs scroll adjustment in y axis only */ 59 #target2 { 60 position-anchor: --a2; 61 top: anchor(top); 62 left: anchor(--scroller2 right); 63 } 64 65 /* No scroll adjustment needed */ 66 #target3 { 67 position-anchor: --a3; 68 top: anchor(--scroller3 bottom); 69 left: anchor(--scroller3 right); 70 } 71 </style> 72 73 <div class="scroller" id="scroller1"> 74 <div class="spacer"></div> 75 <div class="anchor" id="anchor1"></div> 76 </div> 77 <div class="target" id="target1"></div> 78 79 <script> 80 promise_test(async () => { 81 await waitUntilNextAnimationFrame(); 82 assert_equals(target1.getBoundingClientRect().left, 50); 83 assert_equals(target1.getBoundingClientRect().top, 150); 84 85 scroller1.scrollLeft = 50; 86 await waitUntilNextAnimationFrame(); 87 assert_equals(target1.getBoundingClientRect().left, 0); 88 89 scroller1.scrollTop = 50; 90 await waitUntilNextAnimationFrame(); 91 assert_equals(target1.getBoundingClientRect().top, 150); 92 }, '#target1 is scroll-adjusted in x axis only'); 93 </script> 94 95 <div class="scroller" id="scroller2"> 96 <div class="spacer"></div> 97 <div class="anchor" id="anchor2"></div> 98 </div> 99 <div class="target" id="target2"></div> 100 101 <script> 102 promise_test(async () => { 103 await waitUntilNextAnimationFrame(); 104 assert_equals(target2.getBoundingClientRect().left, 150); 105 assert_equals(target2.getBoundingClientRect().top, 250); 106 107 scroller2.scrollLeft = 50; 108 await waitUntilNextAnimationFrame(); 109 assert_equals(target2.getBoundingClientRect().left, 150); 110 111 scroller2.scrollTop = 50; 112 await waitUntilNextAnimationFrame(); 113 assert_equals(target2.getBoundingClientRect().top, 200); 114 }, '#target2 is scroll-adjusted in y axis only'); 115 </script> 116 117 <div class="scroller" id="scroller3"> 118 <div class="spacer"></div> 119 <div class="anchor" id="anchor3"></div> 120 </div> 121 <div class="target" id="target3"></div> 122 123 <script> 124 promise_test(async () => { 125 await waitUntilNextAnimationFrame(); 126 assert_equals(target3.getBoundingClientRect().left, 150); 127 assert_equals(target3.getBoundingClientRect().top, 550); 128 129 scroller3.scrollLeft = 50; 130 await waitUntilNextAnimationFrame(); 131 assert_equals(target3.getBoundingClientRect().left, 150); 132 133 scroller3.scrollTop = 50; 134 await waitUntilNextAnimationFrame(); 135 assert_equals(target3.getBoundingClientRect().top, 550); 136 }, '#target3 is scroll-adjusted in neither axis'); 137 </script>