beforematch-scroll-to-text-fragment-with-anchor.html (2171B)
1 <!DOCTYPE html> 2 <script src="/scroll-to-text-fragment/stash.js"></script> 3 4 <!-- This test is navigated to with the fragment #bar:~:text=foo --> 5 6 <!-- This test uses parser-created elements, 7 unlike beforematch-scroll-to-text-fragment-basic.html, 8 which adds them from JS --> 9 <div style="height:10000px"></div> 10 <div id=foo hidden=until-found>foo</div> 11 <div id=bar hidden=until-found>bar</div> 12 13 <script> 14 (async () => { 15 const results = {}; 16 const key = (new URLSearchParams(window.location.search)).get('key'); 17 18 // This should be true. hidden=until-found revealing should not happen until 19 // after the script tag loads. 20 results.fooHasHiddenAttribute = foo.hasAttribute('hidden'); 21 22 let beforematchResolver = null; 23 const beforematchPromise = new Promise(resolve => { 24 beforematchResolver = resolve; 25 }); 26 27 // This should be true. Foo was searched for, so it should get the 28 // beforematch event. 29 results.beforematchFiredOnFoo = false; 30 foo.addEventListener('beforematch', () => { 31 results.beforematchFiredOnFoo = true; 32 // This should be zero. Scrolling should happen after beforematch is fired. 33 results.pageYOffsetDuringBeforematch = window.pageYOffset; 34 beforematchResolver(); 35 }); 36 37 // This should be false. Bar should not get the beforematch event 38 // despite being the target of an element fragment due to the text 39 // fragment. 40 results.beforematchFiredOnBar = false; 41 bar.addEventListener('beforematch', () => { 42 // this handler should never run. If it does, 43 // send back the message immediately to make the test fail. 44 results.beforematchFiredOnBar = true; 45 stashResultsThenClose(key, results); 46 }); 47 48 if (!results.fooHasHiddenAttribute) { 49 // No need to wait for the beforematch event if it will never come. 50 stashResultsThenClose(key, results); 51 } else { 52 await beforematchPromise; 53 await new Promise(requestAnimationFrame); 54 await new Promise(requestAnimationFrame); 55 // This should be greater than zero. Scrolling should happen after the 56 // beforematch event handler. 57 results.pageYOffsetAfterRaf = window.pageYOffset; 58 stashResultsThenClose(key, results); 59 } 60 })(); 61 </script>