Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<script src="/scroll-to-text-fragment/stash.js"></script>
<!-- This test is navigated to with the fragment #:~:text=foo -->
<body>
<div style="height: 4000px;">spacer</div>
<script>
const results = {};
results.beforematchFiredOnFoo = false;
results.beforematchFiredOnBar = false;
params = new URLSearchParams(window.location.search);
// This test adds the elements from JS
// (unlike beforematch-scroll-to-text-fragment-with-anchor.html,
// which uses parser-created elements)
const foo = document.createElement('div');
foo.textContent = 'foo';
foo.hidden = 'until-found';
document.body.appendChild(foo);
const bar = document.createElement('div');
bar.textContent = 'bar';
document.body.appendChild(bar);
bar.addEventListener('beforematch', () => {
// this handler should never run. If it does,
// send back the message immediately to make the test fail.
results.beforematchFiredOnBar = true;
params = new URLSearchParams(window.location.search);
stashResultsThenClose(params.get('key'), results);
});
foo.addEventListener('beforematch', () => {
if (results.beforematchFiredOnBar) {
return;
}
// This should be zero. Scrolling should happen after beforematch is
// fired.
results.pageYOffsetDuringBeforematch = window.pageYOffset;
results.beforematchFiredOnFoo = true;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// This should be greater than zero. The page should be scrolled down
// to foo.
results.pageYOffsetAfterRaf = window.pageYOffset;
stashResultsThenClose(params.get('key'), results);
});
});
});
</script>
</body>