Skip to content

Commit 5705e9d

Browse files
frivoalfrivoal
authored
Merge pull request w3c#135 from jihyerish/distance-function-experiment
Test cases about the distance function of the spatial navigation
2 parents 0bd2d5c + 047bc3e commit 5705e9d

8 files changed

+310
-4
lines changed

‎tests/spatnav-focus-001.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010

1111
<!--load polyfill. To be removed before submitting to WPT-->
1212
<script src="../polyfill/spatnav-heuristic.js"></script>
13-
<script src="../polyfill/spatnav-api.js"></script>
14-
<script>focusNavigationHeuristics({"standardName": "true" });</script>
1513

1614
<body>
1715
<table>

‎tests/spatnav-scroll-001.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111

1212
<!--load polyfill. To be removed before submitting to WPT-->
1313
<script src="../polyfill/spatnav-heuristic.js"></script>
14-
<script src="../polyfill/spatnav-api.js"></script>
15-
<script>focusNavigationHeuristics({"standardName": "true" });</script>
1614

1715
<style>
1816
#d {

‎tests/ux/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
The tests in this directory **do not** attempt to match the spec.
2+
3+
Instead, they attempt to cover intuition would suggest should be the correct
4+
target for spatial navigation in various scenario.
5+
6+
This is certainly subjective, and may evolve over time as our understanding
7+
of the problem space improves.
8+
9+
It is expected that this will be used to influence the specification,
10+
but not necessarily that there will be a perfect match.

‎tests/ux/spatnav-distance-function-fragments.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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+
</style>
41+
42+
<div class="container">
43+
This is a <a href="https://github.com/WICG/spatial-navigation" target="blank" id="repository">repository</a> for making the Web excellently embrace the
44+
<a href="https://wicg.github.io/spatial-navigation/" target="blank" id="spatial-navigation">spatial navigation</a>'s features so that
45+
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,
46+
and upcoming smart devices as well as PC and mobile for <a href="https://a11yproject.com/" target="blank" id="ally">a11y</a>.
47+
</div>
48+
49+
<script>
50+
test(function() {
51+
document.getElementById("repository").focus();
52+
window.navigate("right");
53+
assert_equals(document.activeElement.id, "spatial-navigation");
54+
}, "Move focus right from `repository`")
55+
56+
test(function() {
57+
document.getElementById("several").focus();
58+
window.navigate("up");
59+
assert_equals(document.activeElement.id, "spatial-navigation");
60+
}, "Move focus up from `several`")
61+
62+
test(function() {
63+
document.getElementById("several").focus();
64+
window.navigate("left");
65+
assert_equals(document.activeElement.id, "spatial-navigation");
66+
}, "Move focus left from `several`")
67+
</script>

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
</style>
36+
37+
<div class="container">
38+
<div tabindex="0" class="box"></div>
39+
<div tabindex="0" class="box" style="left: 50px; top: -50px;"></div>
40+
<div tabindex="0" class="box" id="up_focus" style="left: calc(50px * 2); top: calc(-50px * 2);"></div>
41+
<div tabindex="0" class="box" style="top: calc(-50px * 2);"></div>
42+
<div tabindex="0" class="box" id="left_focus" style="left: 50px; top: calc(-50px * 3);"></div>
43+
<div tabindex="0" class="box" id="initial_focus" style="left: calc(50px * 2); top: calc(-50px * 4);"></div>
44+
<div tabindex="0" class="box" style="top: calc(-50px * 4);"></div>
45+
<div tabindex="0" class="box" style="left: 50px; top: calc(-50px * 5);"></div>
46+
<div tabindex="0" class="box" id="down_focus" style="left: calc(50px * 2); top: calc(-50px * 6);"></div>
47+
</div>
48+
49+
<script>
50+
test(function() {
51+
document.getElementById("initial_focus").focus();
52+
window.navigate("left");
53+
assert_equals(document.activeElement.id, "left_focus");
54+
}, "Move focus left from the initially focused element")
55+
56+
test(function() {
57+
document.getElementById("initial_focus").focus();
58+
window.navigate("up");
59+
assert_equals(document.activeElement.id, "up_focus");
60+
}, "Move focus up from the initially focused element")
61+
62+
test(function() {
63+
document.getElementById("initial_focus").focus();
64+
window.navigate("down");
65+
assert_equals(document.activeElement.id, "down_focus");
66+
}, "Move focus down from the initially focused element")
67+
68+
</script>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
</style>
40+
41+
<div class="container">
42+
<div tabindex="0" class="box" style="left: 220px; top: 40px;"></div>
43+
<div tabindex="0" class="box" style="left: 280px; top: 40px;"></div>
44+
<div tabindex="0" class="box" style="left: 340px; top: 40px;"></div>
45+
<div tabindex="0" class="box" style="left: 320px; top: 175px;"></div>
46+
<div tabindex="0" class="box" id="right_focus" style="left: 340px; top: 120px;"></div>
47+
<div tabindex="0" class="box" id="initial_focus" style="width: 200px; left: 50px; top: 120px;"></div>
48+
</div>
49+
50+
<script>
51+
test(function() {
52+
document.getElementById("initial_focus").focus();
53+
window.navigate("right");
54+
assert_equals(document.activeElement.id, "right_focus");
55+
}, "Move focus right from the staring point")
56+
</script>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
</style>
40+
41+
<div class="container">
42+
<div tabindex="0" class="box" style="left: 220px; top: 40px;"></div>
43+
<div tabindex="0" class="box" id="right_focus" style="left: 280px; top: 40px;"></div>
44+
<div tabindex="0" class="box" style="left: 340px; top: 40px;"></div>
45+
<div tabindex="0" class="box" style="left: 300px; top: 160px;"></div>
46+
<div tabindex="0" class="box" style="left: 400px; top: 100px;"></div>
47+
<div tabindex="0" class="box" id="initial_focus" style="width: 200px; left: 50px; top: 100px;"></div>
48+
</div>
49+
50+
<script>
51+
test(function() {
52+
document.getElementById("initial_focus").focus();
53+
window.navigate("right");
54+
assert_equals(document.activeElement.id, "right_focus");
55+
}, "Move focus right from the staring point")
56+
</script>

‎tests/ux/spatnav-distance-function-transformed-001.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
</style>
40+
41+
<div class="container">
42+
<div tabindex="0" class="box" id="initial_focus" style="width: 300px; left: 50px; top: 50px;"></div>
43+
<div tabindex="0" class="box" style="left: 50px; top: 140px;"></div>
44+
<div tabindex="0" class="box" id="down_focus" style="transform: rotateZ(-30deg); left: 200px; top: 140px;"></div>
45+
</div>
46+
47+
<script>
48+
test(function() {
49+
document.getElementById("initial_focus").focus();
50+
window.navigate("down");
51+
assert_equals(document.activeElement.id, "down_focus");
52+
}, "Move focus down from the staring point")
53+
</script>

0 commit comments

Comments
 (0)