-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfragment_text_demonstration.html
89 lines (69 loc) · 2.7 KB
/
fragment_text_demonstration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML template">
<meta name="author" content="UrlFormJS">
<title>Browser Demo</title>
</head>
<body>
<h4>See browser console logs.</h4>
<p>This demonstrates different behaviors for 'window.location' across various
browsers.
Firefox will correctly log all of the URL components, while Chrome
(and potentially others) will remove parts of the URL that come after
fragment directives.
</p>
<pre>
'golden': expected results.
'url': The url used to produce the results for the object.
'window_location_hash': value for `window.location.hash`
'correct': 'true' if the browser is properly interpreting the URL.
</pre>
<p><a href="fragment_text_demonstration.html#:~:text=linguistically%2C%20a%20question%20may%20be%20defined%20on%20three%20levels.">Fragment directive test link.</a>
May need to enable `chrome://flags/#enable-experimental-web-platform-features`</p>
</body>
<script>
// If running the server: https://localhost:8082/fragment_text_demonstration.html
// Test performance
// May want to use a URL like: /fragment_text_demonstration.html#:~:text=linguistically%2C%20a%20question%20may%20be%20defined%20on%20three%20levels.
// https://github.com/WICG/scroll-to-text-fragment/issues/196
console.log("performance.navigation.name is empty on protocol `file://`. Value: ", performance.getEntriesByType("navigation")[0].name);
console.log(document.fragmentDirective);
let root = window.location.origin + window.location.pathname;
let urls = [
// Where '!' needs to be percent encoded to work properly in the text fragment.
{
url: root + '/#a:~:text=Hello&text=World&text=!%20news&?first_name=Hello&last_name=World&phone_number=!',
golden: '#a:~:text=Hello&text=World&text=!%20news&?first_name=Hello&last_name=World&phone_number=!'
},
// Malformed text fragment (missing '&').
{
url: root + '/#anchor:~:text=hello?first_name=Hello&last_name=World',
golden: '#anchor:~:text=hello?first_name=Hello&last_name=World'
},
// Correct text fragment (present '&').
{
url: root + '/#anchor:~:text=hello&?first_name=Hello&last_name=World',
golden: '#anchor:~:text=hello&?first_name=Hello&last_name=World'
},
];
let url;
window.onload = () => {
for (let u of urls) {
url = new URL(u.url);
history.pushState({}, '', url);
console.log({
url: url.href,
window_location_hash: window.location.hash,
golden: u.golden,
correct: window.location.hash === u.golden,
});
}
// Set back to original URL after running tests.
url = new URL(root);
history.pushState({}, '', url);
};
</script>
</html>