Skip to content

Commit 4b3f188

Browse files
author
Jihye Hong
committed
Add a test case about the fragmented elements
Test case about the heuristic spatial navigation behavior of the fragmented elements.
1 parent bac0802 commit 4b3f188

File tree

1 file changed

+71
-0
lines changed

1 file changed

+71
-0
lines changed
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>Spatnav sanity check</title>
4+
<link rel="author" title="Jihye Hong" href="jh.hong@lge.com">
5+
<meta name=flags content="">
6+
<link rel=help href="https://wicg.github.io/spatial-navigation/#high-level-api">
7+
8+
<script src="../resources/testharness.js"></script>
9+
<script src="../resources/testharnessreport.js"></script>
10+
11+
<!--load polyfill. To be removed before submitting to WPT-->
12+
<script src="../polyfill/spatnav-heuristic.js"></script>
13+
14+
<style>
15+
:focus {
16+
outline: 4px #3582ff solid;
17+
}
18+
19+
.container {
20+
margin: 10px;
21+
padding: 10px;
22+
position: relative;
23+
border: 1px solid black;
24+
width: 510px;
25+
height: 300px;
26+
}
27+
28+
.box {
29+
position: absolute;
30+
box-sizing: border-box;
31+
width: 50px;
32+
height: 50px;
33+
border: 1px black solid;
34+
background: #6ac;
35+
}
36+
37+
#initial_focus {
38+
background: #F08080;
39+
}
40+
41+
</style>
42+
43+
<body>
44+
<div class="container">
45+
This is a <a href="https://github.com/WICG/spatial-navigation" target="blank" id="repository">repository</a> for making the Web excellently embrace the
46+
<a href="https://wicg.github.io/spatial-navigation/" target="blank" id="spatial-navigation">spatial navigation</a>'s features so that
47+
the Web technology can be propagated into <a href="https://www.merriam-webster.com/dictionary/several" target="blank" id="several">several</a> industries such as TV, IVI, game console,
48+
and upcoming smart devices as well as PC and mobile for <a href="https://a11yproject.com/" target="blank" id="ally">a11y</a>.
49+
</div>
50+
</body>
51+
52+
<script>
53+
test(function() {
54+
document.getElementById("repository").focus();
55+
window.navigate("right");
56+
assert_equals(document.activeElement.id, "spatial-navigation");
57+
}, "Move focus right from `repository`")
58+
59+
test(function() {
60+
document.getElementById("several").focus();
61+
window.navigate("up");
62+
assert_equals(document.activeElement.id, "spatial-navigation");
63+
}, "Move focus up from `several`")
64+
65+
test(function() {
66+
document.getElementById("several").focus();
67+
window.navigate("left");
68+
assert_equals(document.activeElement.id, "spatial-navigation");
69+
}, "Move focus left from `several`")
70+
</script>
71+
</html>

0 commit comments

Comments
 (0)