mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
HTML
<!doctype html>
|
|
<title>Navigating to a same-document text fragment directive</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 src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script>
|
|
function isInView(element) {
|
|
let rect = element.getBoundingClientRect();
|
|
return rect.top >= 0 && rect.top <= window.innerHeight;
|
|
}
|
|
|
|
function checkScroll(resolve) {
|
|
let position = 'unknown';
|
|
requestAnimationFrame(() => {
|
|
if (window.scrollY == 0)
|
|
position = 'top';
|
|
else if (isInView(document.getElementById('text')))
|
|
position = 'text';
|
|
resolve(position);
|
|
});
|
|
}
|
|
|
|
function reset() {
|
|
window.location.hash = "";
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
function runTest() {
|
|
promise_test(t => new Promise(resolve => {
|
|
reset();
|
|
window.location.href = "#:~:text=test";
|
|
requestAnimationFrame(function() {
|
|
checkScroll(resolve);
|
|
});
|
|
}).then(position => {
|
|
assert_equals(position, 'text');
|
|
assert_equals(window.location.href.indexOf(':~:'), -1, 'Expected fragment directive to be stripped from the URL.');
|
|
}), 'Activated for same-document window.location setter');
|
|
|
|
promise_test(t => new Promise(resolve => {
|
|
reset();
|
|
window.location.replace("#:~:text=test");
|
|
requestAnimationFrame(function() {
|
|
checkScroll(resolve);
|
|
});
|
|
}).then(position => {
|
|
assert_equals(position, 'text');
|
|
assert_equals(window.location.href.indexOf(':~:'), -1, 'Expected fragment directive to be stripped from the URL.');
|
|
}), 'Activated for same-document window.location.replace');
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
height: 3200px;
|
|
}
|
|
#text {
|
|
position: absolute;
|
|
top: 3000px;
|
|
}
|
|
</style>
|
|
<body onload="runTest()">
|
|
<p id="text">This is a test page</p>
|
|
</body>
|