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
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPE html>
<title>Percent-encoding in a text 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 src="resources/util.js"></script>
<style>
.target {
margin-top: 2000px;
margin-bottom: 2000px;
}
</style>
<script>
function determineResult() {
if (window.scrollY == 0)
return 'noscroll';
for (let target of document.querySelectorAll('.target')) {
if (isInViewport(target)) {
return target.id;
}
}
return 'UNEXPECTED';
}
let test_cases = [
{
fragment: '#:~:text=%25',
expect: 'singlepercent',
description: 'Percent-encoded "%" char.'
},
{
fragment: '#:~:text=%',
expect: 'noscroll',
description: 'Percent char without hex digits is invalid.'
},
{
fragment: '#:~:text=%%',
expect: 'noscroll',
description: 'Percent char followed by percent char is invalid.'
},
{
fragment: '#:~:text=%F',
expect: 'noscroll',
description: 'Single digit percent-encoding is invalid.'
},
{
fragment: '#:~:text=%25F',
expect: 'percentf',
description: 'Percent-encoding limited to two digits.'
},
{
fragment: '#:~:text=%25%25F',
expect: 'doublepercentf',
description: 'Percent-encoded "%%F"'
},
{
fragment: '#:~:text=%E2%9C%85',
expect: 'checkmark',
description: 'Percent-encoding multibyte codepoint (CHECKMARK).'
},
];
for (const test_case of test_cases) {
promise_test(t => new Promise(resolve => {
// Clear the fragment and reset the scroll offset to prepare for the next
// test case.
location = `${location.pathname}#`;
scrollTo(0, 0);
location = `${location.pathname}${test_case.fragment}`;
requestAnimationFrame( () => requestAnimationFrame(resolve) );
}).then(() => {
assert_equals(determineResult(), test_case.expect);
}), `Test navigation with fragment: ${test_case.description}.`);
}
</script>
<p class="target" id="singlepercent">
%
</p>
<p class="target" id="doublepercent">
%%
</p>
<p class="target" id="percentf">
%F
</p>
<p class="target" id="doublepercentf">
%%f
</p>
<p class="target" id="checkmark">
<!-- U+2705 WHITE HEAVY CHECK MARK - UTF-8 percent encoding: %E2%9C%85 -->
✅
</p>
<p class="target" id="helloworld">
Hello world
</p>
|
