Skip to content

Commit b461388

Browse files
author
Jihye Hong
committed
Add the test cases for the grid layout
Test cases about the spatial navigation on the grid-like layout. Those are aimed to - Experiment the proper result of the distance function - Investigate the reasonable heuristic spatial navigation behavior on the grid-like layout.
1 parent ffd3bff commit b461388

3 files changed

Lines changed: 192 additions & 0 deletions

File tree

‎tests/spatnav-distance-function-grid-001.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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+
}
22+
23+
.box {
24+
position: relative;
25+
box-sizing: border-box;
26+
width: 50px;
27+
height: 50px;
28+
border: 1px black solid;
29+
background: #6ac;
30+
}
31+
32+
#initial_focus {
33+
background: #F08080;
34+
}
35+
36+
</style>
37+
38+
<body>
39+
<div class="container">
40+
<div tabindex="0" class="box"></div>
41+
<div tabindex="0" class="box" style="left: 50px; top: -50px;"></div>
42+
<div tabindex="0" class="box" id="up_focus" style="left: calc(50px * 2); top: calc(-50px * 2);"></div>
43+
<div tabindex="0" class="box" style="top: calc(-50px * 2);"></div>
44+
<div tabindex="0" class="box" id="left_focus" style="left: 50px; top: calc(-50px * 3);"></div>
45+
<div tabindex="0" class="box" id="initial_focus" style="left: calc(50px * 2); top: calc(-50px * 4);"></div>
46+
<div tabindex="0" class="box" style="top: calc(-50px * 4);"></div>
47+
<div tabindex="0" class="box" style="left: 50px; top: calc(-50px * 5);"></div>
48+
<div tabindex="0" class="box" id="down_focus" style="left: calc(50px * 2); top: calc(-50px * 6);"></div>
49+
</div>
50+
</body>
51+
52+
<script>
53+
test(function() {
54+
document.getElementById("initial_focus").focus();
55+
window.navigate("left");
56+
assert_equals(document.activeElement.id, "left_focus");
57+
}, "Move focus left from the initially focused element")
58+
59+
test(function() {
60+
document.getElementById("initial_focus").focus();
61+
window.navigate("up");
62+
assert_equals(document.activeElement.id, "up_focus");
63+
}, "Move focus up from the initially focused element")
64+
65+
test(function() {
66+
document.getElementById("initial_focus").focus();
67+
window.navigate("down");
68+
assert_equals(document.activeElement.id, "down_focus");
69+
}, "Move focus down from the initially focused element")
70+
71+
</script>
72+
</html>

‎tests/spatnav-distance-function-grid-002.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
position: relative;
22+
border: 1px solid black;
23+
width: 500px;
24+
height: 300px;
25+
}
26+
27+
.box {
28+
position: absolute;
29+
box-sizing: border-box;
30+
width: 50px;
31+
height: 50px;
32+
border: 1px black solid;
33+
background: #6ac;
34+
}
35+
36+
#initial_focus {
37+
background: #F08080;
38+
}
39+
40+
</style>
41+
42+
<body>
43+
<div class="container">
44+
<div tabindex="0" class="box" style="left: 220px; top: 40px;"></div>
45+
<div tabindex="0" class="box" style="left: 280px; top: 40px;"></div>
46+
<div tabindex="0" class="box" style="left: 340px; top: 40px;"></div>
47+
<div tabindex="0" class="box" style="left: 320px; top: 175px;"></div>
48+
<div tabindex="0" class="box" id="right_focus" style="left: 340px; top: 120px;"></div>
49+
<div tabindex="0" class="box" id="initial_focus" style="width: 200px; left: 50px; top: 120px;"></div>
50+
</div>
51+
</body>
52+
53+
<script>
54+
test(function() {
55+
document.getElementById("initial_focus").focus();
56+
window.navigate("right");
57+
assert_equals(document.activeElement.id, "right_focus");
58+
}, "Move focus right from the staring point")
59+
</script>
60+
</html>

‎tests/spatnav-distance-function-grid-003.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
position: relative;
22+
border: 1px solid black;
23+
width: 500px;
24+
height: 300px;
25+
}
26+
27+
.box {
28+
position: absolute;
29+
box-sizing: border-box;
30+
width: 50px;
31+
height: 50px;
32+
border: 1px black solid;
33+
background: #6ac;
34+
}
35+
36+
#initial_focus {
37+
background: #F08080;
38+
}
39+
40+
</style>
41+
42+
<body>
43+
<div class="container">
44+
<div tabindex="0" class="box" style="left: 220px; top: 40px;"></div>
45+
<div tabindex="0" class="box" id="right_focus" style="left: 280px; top: 40px;"></div>
46+
<div tabindex="0" class="box" style="left: 340px; top: 40px;"></div>
47+
<div tabindex="0" class="box" style="left: 300px; top: 160px;"></div>
48+
<div tabindex="0" class="box" style="left: 400px; top: 100px;"></div>
49+
<div tabindex="0" class="box" id="initial_focus" style="width: 200px; left: 50px; top: 100px;"></div>
50+
</div>
51+
</body>
52+
53+
<script>
54+
test(function() {
55+
document.getElementById("initial_focus").focus();
56+
window.navigate("right");
57+
assert_equals(document.activeElement.id, "right_focus");
58+
}, "Move focus right from the staring point")
59+
</script>
60+
</html>

0 commit comments

Comments
 (0)