fragment-scrolling-anchors.html (1418B)
1 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 2 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 body { 7 margin: 0px; 8 height: 2000px; 9 width: 2000px; 10 } 11 12 #first { 13 height: 1000px; 14 background-color: #FFA5D2; 15 } 16 17 #anchor { 18 position: absolute; 19 background-color: #84BE6A; 20 height: 600px; 21 width: 100%; 22 } 23 24 #fragment { 25 position: relative; 26 background-color: orange; 27 height: 200px; 28 width: 200px; 29 margin: 10px; 30 } 31 </style> 32 33 <div id="first"></div> 34 <div id="changer"></div> 35 <div id="anchor"> 36 <div id="fragment" name="fragment"></div> 37 </div> 38 39 <script> 40 promise_test(async function(t) { 41 // Note that this test passes even without scroll anchoring because of 42 // fragment anchoring. 43 window.location.hash = 'fragment'; 44 // Height of first + fragment margin-top. 45 assert_equals(window.scrollY, 1010); 46 47 // Change height of content above fragment. 48 var ch = document.getElementById('changer'); 49 ch.style.height = 100; 50 51 await new Promise(resolve => addEventListener('scroll', resolve, {once: true})); 52 53 // Height of first + height changer + fragment margin-top. 54 assert_equals(window.scrollY, 1110); 55 56 first.remove(); 57 changer.remove(); 58 anchor.remove(); 59 }, 'Verify scroll anchoring interaction with fragment scrolls'); 60 </script>