Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<title>Tests find-a-range-from-a-text-directive algorithm</title>
<script src="stash.js"></script>
<script>
window.didScroll = false;
function checkScroll() {
let results = {
didScroll: window.scrollY != 0
};
let key = (new URL(document.location)).searchParams.get("key");
stashResultsThenClose(key, results);
}
// Ensure animation frames on load to allow delayed text fragment processing and
// fallback to element anchor.
window.onload = function() {
requestAnimationFrame(() => requestAnimationFrame(() => {
requestAnimationFrame(() => requestAnimationFrame(checkScroll));
}));
}
</script>
<style>
.spacer {
width: 50vw;
height: 200vh;
}
#generatedSearch::before {
content: "search";
}
</style>
<body>
<span id="generatedSearch"></span>
Won't scroll if matched:
match suffix
match suffix3
<div class="spacer"></div>
<p>
The quick brown fox jumped over the lazy dog.
a a b b b c
</p>
<p>
foo foo foo bar bar bar
</p>
<p>
search Two words ending in flatten
</p>
<p>
match suffix2
prefix match suffix3 matchEnd suffix4 matchEnd suffix5
</p>
<p>
Lorem
<br> <i> </i>
<div>   </div>
<!-- This <p> puts lots of non textual stuff between words -->
<div style="display: none">This isn't rendered</div>
<div style="visibility: hidden">This also isn't visible</div>
<iframe srcdoc="Inner Iframe"></iframe>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII=">
  Ipsum
Whitespace
<br> <i> </i>
<div>   </div>
<!-- This <p> puts lots of non textual stuff between words -->
<div style="display: none">This isn't rendered</div>
<div style="visibility: hidden">This also isn't visible</div>
<iframe srcdoc="Inner Iframe"></iframe>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII=">
 
Dipsum
<div>Text
<div style="display: none">This isn't rendered</div>
with display: none
</div>
<div>Text
<div style="visibility: hidden">This also isn't visible</div>
with visibility: hidden as block boundary
</div>
<div>Text
<span style="visibility: hidden">This also isn't visible</span>
with visibility: hidden as inline
</div>
<div>Text
<iframe srcdoc="Inner Iframe"></iframe>
with Iframe
</div>
<div>Text
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII=">
with image
</div>
</p>
<p>
She caught it in one hand and a net.
z<i>z</i>z
</p>
<p>
This text appears at the end of the document
</p
</body>