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>