gecko-dev/testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html
David Bokan 58c4792f58 Bug 1616842 [wpt PR 21899] - [text-fragment] Fix prefix matching edge case, a=testonly
Automatic update from web-platform-tests
[text-fragment] Fix prefix matching edge case

The current algorithm first finds a |prefix|, then checks if the
immediate following text is the |search_text|. If it is it'll advance
|search_start| to the end of the |search_text| so it can confirm it's
followed by the |suffix| text. However, this means that if the |suffix|
text doesn't match, the next iteration of the algorithm will start
searching for the |prefix| at the end of the |search_text|. This is a
problem if the |search_text| == |prefix| because we've now skipped the
|search_text| part of the range for prefix matching.

E.g. With prefix=foo search_text=foo suffix=bar we'll fail to match:

foo foo foo bar

Because the first iteration of the loop will use the first "foo" as
the prefix, and the next iteration will use the third "foo" as the
prefix; we skip the second.

Bug: 1054243
Change-Id: I62b8a32f89c987e5bed8ea439ae1b7d53d12436d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2065979
Reviewed-by: Nick Burris <nburris@chromium.org>
Commit-Queue: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743108}

--

wpt-commits: 845ce4ccd97b2ff6b39e698ce2abe7d639111ede
wpt-pr: 21899
2020-02-24 10:22:54 +00:00

99 lines
3.1 KiB
HTML

<!doctype html>
<title>Navigating to a text fragment anchor</title>
<script src="stash.js"></script>
<script>
function isInView(element) {
let rect = element.getBoundingClientRect();
return rect.top >= 0 && rect.top <= window.innerHeight
&& rect.left >= 0 && rect.left <= window.innerWidth;
}
function checkScroll() {
let position = 'unknown';
if (window.scrollY == 0)
position = 'top';
else if (isInView(document.getElementById('element')))
position = 'element';
else if (isInView(document.getElementById('text')))
position = 'text';
else if (isInView(document.getElementById('more-text')))
position = 'more-text';
else if (isInView(document.getElementById('cross-node-context')))
position = 'cross-node-context';
else if (isInView(document.getElementById('text-directive-parameters')))
position = 'text-directive-parameters';
else if (isInView(document.getElementById('shadow-parent')))
position = 'shadow-parent';
else if (isInView(document.getElementById('hidden')))
position = 'hidden';
else if (isInView(document.getElementById('horizontal-scroll')) && window.scrollX > 0)
position = 'horizontal-scroll';
let target = document.querySelector(":target");
if (!target && position == 'shadow-parent') {
let shadow = document.getElementById("shadow-parent").shadowRoot.firstElementChild;
if (shadow.matches(":target")) {
target = shadow;
position = 'shadow';
}
}
let results = {
scrollPosition: position,
href: window.location.href,
target: target ? target.id : 'undefined'
};
let key = (new URL(document.location)).searchParams.get("key");
stashResultsThenClose(key, results);
}
// Ensure two animation frames on load to test the fallback to element anchor,
// which gets queued for the next frame if the text fragment is not found.
window.onload = function() {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(checkScroll);
})
}
</script>
<style>
.scroll-section {
/* 1000px margin on top and bottom so only one section can be in view. */
margin: 1000px 0px;
}
#hidden {
visibility: hidden;
}
#horizontal-scroll {
margin-left: 2000px;
}
#display-none {
display: none;
}
</style>
<body>
<div id="element" class="scroll-section">Element</div>
<p id="text" class="scroll-section">
This is a test page !$'()*+./:;=?@_~ &,- &#x30cd;&#x30b3;
<br>
foo foo foo bar bar bar
</p>
<p id="more-text" class="scroll-section">More test page text</p>
<div class="scroll-section">
<div>
<p>prefix</p>
<p id="cross-node-context">test page</p>
</div>
<div><p>suffix</p></div>
</div>
<p id="text-directive-parameters" class="scroll-section">this,is,test,page</p>
<div id="shadow-parent" class="scroll-section"></div>
<script>
let shadow = document.getElementById("shadow-parent").attachShadow({mode: 'open'});
shadow.innerHTML = '<p id="shadow">shadow text</p>';
</script>
<p id="hidden" class="scroll-section">hidden text</p>
<p id="horizontal-scroll" class="scroll-section">horizontally scrolled text</p>
<p id="display-none" class="scroll-section">display none</p>
</body>