summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html')
-rw-r--r--testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html99
1 files changed, 99 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html b/testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html
new file mode 100644
index 0000000000..b2be85132c
--- /dev/null
+++ b/testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html
@@ -0,0 +1,99 @@
+<!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>