Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
#1716 The indicated part of the document.
Interactive test for fragid resolution. Added HTML tests for scrolling to fragid Applied algorithm from whatwg spec https://html.spec.whatwg.org/multipage/#the-indicated-part-of-the-document Changes following code review
- Loading branch information
Peter
committed
Feb 17, 2016
1 parent
7aedb9c
commit e39e59e
Showing
11 changed files
with
424 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
<!DOCTYPE html> | ||
<title>Navigate to Fragment - issue #1716</title> | ||
<meta name=timeout content=long> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
.test-target{ | ||
height:20em; | ||
} | ||
.bottom-padding{ | ||
height:200em; | ||
} | ||
</style> | ||
<p id="test0"> | ||
Manual test to check each link goes to the right place.</p> | ||
<table id="tests-table"> | ||
<thead> | ||
<th>Fragment Identifier</th> | ||
<th>Intended Fragment</th> | ||
<th>Test Target</th> | ||
<th>Description</th> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td><a href="#top">#top</a></td> | ||
<td>Document</td> | ||
<td>test0</td> | ||
<td>Top of document</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#TOP">#TOP</a></a></td> | ||
<td>Document</td> | ||
<td>test0</td> | ||
<td>Top of document</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#Top">#Top</a></a></td> | ||
<td><p id="Top"></td> | ||
<td>test8</td> | ||
<td>Id takes precendence over "top"</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#sanity-check">#sanity-check</a></td> | ||
<td><p id="sanity-check"></td> | ||
<td>test1</td> | ||
<td>Sanity check</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#has%20space">#has%20space</a></td> | ||
<td><p id="has space"></td> | ||
<td>test2</td> | ||
<td>Contains a space</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#escaped%20space">#escaped%20space</a></td> | ||
<td><p id="escaped%20space"></td> | ||
<td></td> | ||
<td>Contains an escaped space. Only decoded fragid is used for ids.</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#escaped%20unescaped%20collide">#escaped%20unescaped%20collide</a></td> | ||
<td><p id="escaped unescaped collide"></td> | ||
<td>test4</td> | ||
<td>Another element has the same id but pecent-encoded. The decoded one should win.</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#name-match">#name-match</a></td> | ||
<td><a name="name-match"></td> | ||
<td>test5</td> | ||
<td></td> | ||
</tr> | ||
<tr> | ||
<td><a href="#name-collide">#name-collide</a></td> | ||
<td><a id="name-collide"></td> | ||
<td>test6</td> | ||
<td>Same id as an anchor name. Id should win.</td> | ||
</tr> | ||
<tr> | ||
<td><a href="#escaped%20name">#escaped%20name</a></td> | ||
<td><a name="escaped%20name"></td> | ||
<td>test7</td> | ||
<td>Undecoded fragid should be used for anchor names.</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
<div class="test-target" id="test1"> | ||
<p id="sanity-check">span id="sanity-check"</p><p>SUCCESS test1</p> | ||
</div> | ||
<div class="test-target" id="test2"> | ||
<p id="has space">span id="has space"</p><p>SUCCESS test2</p> | ||
</div> | ||
<div class="test-target" id="test3"> | ||
<p id="escaped%20space">span id="escaped%20space"</p><p>FAIL test3</p> | ||
Not in whatwg spec, but a <em>tolerant</em> implementation would do this to give content creator what they probably intended. | ||
</div> | ||
<div class="test-target" id="test4"> | ||
<p id="escaped unescaped collide">span id="escaped unescaped collide"</p><p>SUCCESS test4</p> | ||
</div> | ||
<div class="test-target"> | ||
<p id="escaped%20unescaped%20collide">span id="escaped%20unescaped%20collide"</p><p>FAIL test4</p> | ||
Not in whatwg spec, but a <em>tolerant</em> implementation would do this to give content creator what they probably intended. | ||
</div> | ||
<div class="test-target" id="test5"> | ||
<a name="name-match">a name="name-match"</a><p>SUCCESS test5</p> | ||
</div> | ||
<div class="test-target"> | ||
<a name="name-collide">a name="name-collide"</a><p>FAIL test6</p> | ||
An anchor name and an id have the same value. The id should take precence! | ||
</div> | ||
<div class="test-target" id="test6"> | ||
<a id="name-collide">a id="name-collide"</a><p>SUCCESS test6</p> | ||
</div> | ||
<div class="test-target" id="test7"> | ||
<a name="escaped%20name">a name="escaped%20name"</a><p>SUCCESS test7</p> | ||
</div> | ||
<div class="test-target" id="test8"> | ||
<p id="Top">p id="Top"</a><p>SUCCESS test8</p> | ||
</div> | ||
<div class="bottom-padding"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
...data/html/browsers/browsing-the-web/scroll-to-fragid/scroll-frag-percent-encoded.html.ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[scroll-frag-percent-encoded.html] | ||
type: testharness | ||
|
||
[Fragment Navigation: fragment id should be percent-decoded] | ||
expected: FAIL |
5 changes: 5 additions & 0 deletions
5
...t/metadata/html/browsers/browsing-the-web/scroll-to-fragid/scroll-to-anchor-name.html.ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[scroll-to-anchor-name.html] | ||
type: testharness | ||
|
||
[Fragment Navigation: scroll to anchor name is lower priority than equal id] | ||
expected: FAIL |
5 changes: 5 additions & 0 deletions
5
tests/wpt/metadata/html/browsers/browsing-the-web/scroll-to-fragid/scroll-to-id-top.html.ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[scroll-to-id-top.html] | ||
type: testharness | ||
|
||
[Fragment Navigation: TOP is a valid element id, which overrides navigating to top of the document] | ||
expected: FAIL |
5 changes: 5 additions & 0 deletions
5
tests/wpt/metadata/html/browsers/browsing-the-web/scroll-to-fragid/scroll-to-top.html.ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
[scroll-to-top.html] | ||
type: testharness | ||
|
||
[Fragment Navigation: When fragid is TOP scroll to the top of the document] | ||
expected: FAIL |
59 changes: 59 additions & 0 deletions
59
...rm-tests/html/browsers/browsing-the-web/scroll-to-fragid/scroll-frag-percent-encoded.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<!doctype html> | ||
<title>Fragment Navigation: fragment id should be percent-decoded</title> | ||
<meta name=timeout content=long> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<body> | ||
<div></div> | ||
<div id="has two spaces" style="position:absolute; top:200px;"></div> | ||
<div id="escape%20collision" style="position:absolute; top:300px;"></div> | ||
<div id="escape collision" style="position:absolute; top:400px;"></div> | ||
<div id="do%20not%20go%20here" style="position:absolute; top:400px;"></div> | ||
<div style="height:200em;"></div> | ||
<script> | ||
var steps = [{ | ||
fragid:'has%20two%20spaces', | ||
handler: function(){ | ||
assert_equals( scrollPosition(), 200 ); | ||
} | ||
},{ | ||
fragid:'escape%20collision', | ||
handler: function(){ | ||
assert_equals( scrollPosition(), 400 ); | ||
} | ||
},{ | ||
fragid:'do%20not%20go%20here', | ||
handler: function(){ | ||
// don't move | ||
assert_equals( scrollPosition(), 400 ); | ||
} | ||
}]; | ||
|
||
function scrollPosition(){ | ||
return document.documentElement.scrollTop || document.body.scrollTop; | ||
} | ||
|
||
function runNextStep(){ | ||
if( steps.length > 0 ) { | ||
var step = steps.shift(); | ||
var listener = t.step_func( function(){ | ||
step.handler(); | ||
runNextStep(); | ||
}); | ||
scrollToFragmentThenDo( step.fragid, listener ); | ||
} else { | ||
t.done(); | ||
} | ||
} | ||
|
||
function scrollToFragmentThenDo( fragid, then ){ | ||
location.hash = fragid; | ||
setTimeout( then, 1 ); | ||
} | ||
|
||
var t = async_test(); | ||
t.step( function(){ | ||
assert_equals(location.hash, "", "Page must be loaded with no hash"); | ||
runNextStep(); | ||
}) | ||
</script> |
53 changes: 53 additions & 0 deletions
53
...platform-tests/html/browsers/browsing-the-web/scroll-to-fragid/scroll-to-anchor-name.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<!doctype html> | ||
<title>Fragment Navigation: scroll to anchor name is lower priority than equal id</title> | ||
<meta name=timeout content=long> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<body> | ||
<div></div> | ||
<a name="anchor1" style="position:absolute; top:200px;"></a> | ||
<div id="id-equals-anchor" style="position:absolute; top:300px;"></div> | ||
<a name="id-equals-anchor" style="position:absolute; top:400px;"></a> | ||
<div style="height:200em;"></div> | ||
<script> | ||
var steps = [{ | ||
fragid:'anchor1', | ||
handler: function(){ | ||
assert_equals( scrollPosition(), 200 ); | ||
} | ||
},{ | ||
fragid:'id-equals-anchor', | ||
handler: function(){ | ||
// id still takes precedence over anchor name | ||
assert_equals( scrollPosition(), 300 ); | ||
} | ||
}]; | ||
|
||
function scrollPosition(){ | ||
return document.documentElement.scrollTop || document.body.scrollTop; | ||
} | ||
|
||
function runNextStep(){ | ||
if( steps.length > 0 ) { | ||
var step = steps.shift(); | ||
var listener = t.step_func( function(){ | ||
step.handler(); | ||
runNextStep(); | ||
}); | ||
scrollToFragmentThenDo( step.fragid, listener ); | ||
} else { | ||
t.done(); | ||
} | ||
} | ||
|
||
function scrollToFragmentThenDo( fragid, then ){ | ||
location.hash = fragid; | ||
setTimeout( then, 1 ); | ||
} | ||
|
||
var t = async_test(); | ||
t.step( function(){ | ||
assert_equals(location.hash, "", "Page must be loaded with no hash"); | ||
runNextStep(); | ||
}) | ||
</script> |
Oops, something went wrong.