<!doctype html> <title>Same document navigation to text fragment directives</title> <meta charset=utf-8> <link rel="help" href="https://wicg.github.io/ScrollToTextFragment/"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> function reset() { location.hash = ''; window.scrollTo(0, 0); } function isInViewport(element) { const viewportRect = { left: visualViewport.offsetLeft, top: visualViewport.offsetTop, right: visualViewport.offsetLeft + visualViewport.width, bottom: visualViewport.offsetTop + visualViewport.height }; const elementRect = element.getBoundingClientRect(); const elementCenter = { x: elementRect.left + elementRect.width / 2, y: elementRect.top + elementRect.height / 2 }; return elementCenter.x > viewportRect.left && elementCenter.x < viewportRect.right && elementCenter.y > viewportRect.top && elementCenter.y < viewportRect.bottom; } function runTests() { // Ensure a simple text directive works correctly when navigated to the // same document using `location.hash`. promise_test(async t => { assert_implements(document.fragmentDirective, 'Text directive not implemented'); reset(); location.hash = ':~:text=line%20of%20text'; await t.step_wait(() => window.scrollY > 0, "Wait for scroll"); assert_true(isInViewport(document.getElementById('text')), 'Scrolled to text'); }, 'Basic text directive navigation'); // Test that we correctly fallback to the element id when we have a text // directive that doesn't match any text in the page. promise_test(async t => { assert_implements(document.fragmentDirective, 'Text directive not implemented'); reset(); location.hash = 'elementid:~:text=textDoesntExist'; await t.step_wait(() => window.scrollY > 0, "Wait for scroll"); assert_true(isInViewport(document.getElementById('elementid')), 'Scrolled to `elementid`'); }, 'Basic element id fallback'); // Test that we correctly fallback to the element id when we have a text // directive that's malformed and won't be parsed. promise_test(async t => { assert_implements(document.fragmentDirective, 'Text directive not implemented'); reset(); location.hash = 'elementid:~:text=,,,,,'; await t.step_wait(() => window.scrollY > 0, "Wait for scroll"); assert_true(isInViewport(document.getElementById('elementid')), 'Scrolled to `elementid`'); }, 'Malformed text directive element id fallback'); } </script> <style> div { margin: 200vh 0 200vh 0; } </style> <body onload="runTests()"> <div id="text"> This is a line of text. </div> <div id="elementid"> This div has an id: 'elementid'. </div> </body>