anchor-scroll-js-expose.html (2486B)
1 <!DOCTYPE html> 2 <title>Tests that anchored element's actual rendered location is property exposed via JS APIs under scrolling</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #container { 9 position: absolute; 10 top: 0px; 11 left: 0px; 12 } 13 #scroller { 14 margin-left: 100px; 15 margin-top: 100px; 16 width: 400px; 17 height: 400px; 18 overflow: scroll; 19 } 20 #anchor-container { 21 width: 2000px; 22 height: 1000px; 23 } 24 #anchor { 25 margin: 400px; 26 margin-left: 1400px; 27 width: 100px; 28 height: 100px; 29 background-color: yellow; 30 anchor-name: --anchor; 31 } 32 #anchored { 33 position: absolute; 34 left: anchor(left); 35 bottom: anchor(top); 36 width: 100px; 37 height: 100px; 38 position-anchor: --anchor; 39 background-color: green; 40 } 41 </style> 42 43 <div id="container"> 44 <div id="scroller"> 45 <div id="anchor"></div> 46 </div> 47 <div id="anchored">Text</div> 48 </div> 49 50 <script> 51 promise_setup(async () => { 52 // Move both the anchor and the anchored elements into the visible area of the 53 // scroller. This also runs layout to setup an empty scroll snapshot. 54 scroller.scrollTop = 300; 55 scroller.scrollLeft = 1300; 56 57 // Ensure up-to-date scroll snapshot. 58 await new Promise(resolve => { 59 requestAnimationFrame(() => { 60 requestAnimationFrame(resolve); 61 }); 62 }); 63 }); 64 65 promise_test(async () => { 66 let rect = anchored.getBoundingClientRect(); 67 assert_equals(rect.x, 200); 68 assert_equals(rect.y, 100); 69 }, 'Element.getBoundingClientRect() returns the actual rendered location'); 70 71 promise_test(async () => { 72 let range = document.createRange(); 73 let text = anchored.firstChild; 74 range.setStart(text, 0); 75 range.setEnd(text, text.length); 76 let rect = range.getBoundingClientRect(); 77 assert_equals(rect.x, 200); 78 assert_equals(rect.y, 100); 79 }, 'Range.getBoundingClientRect() returns the actual rendered location'); 80 81 promise_test(async () => { 82 assert_equals(anchored.offsetLeft, 200); 83 assert_equals(anchored.offsetTop, 100); 84 }, 'Element.offset* return adjusted offsets'); 85 86 promise_test(() => new Promise(resolve => { 87 let observer = new IntersectionObserver(entryList => { 88 if (entryList.some(entry => entry.isIntersecting)) 89 resolve(); 90 }); 91 observer.observe(anchored); 92 }), 'IntersectionObserver should fire when anchored element is moved into visible area'); 93 </script>