Skip to content

Commit fe349d8

Browse files
author
Jihye Hong
authored
Merge pull request w3c#42 from jihyerish/spatnav-polyfill
Upload SpatNav Polyfill and Test cases
2 parents ce3d4bd + 1692981 commit fe349d8

8 files changed

Lines changed: 1298 additions & 92 deletions

‎polyfill/spatnav-heuristic.js‎

Lines changed: 971 additions & 0 deletions
Large diffs are not rendered by default.

‎testcase/heuristic_default_move.html‎

Lines changed: 3 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!DOCTYPE html>
32
<html>
43
<head>
@@ -7,106 +6,19 @@
76
<meta name="application-name" content="Default focus moving behavior">
87
<meta name="author" content="Jihye Hong">
98
<meta name="description" content="You can check here the default focus moving behavior of our spatial-navigation heuristic algorithm using arrow keys.">
10-
<!-- <link rel="stylesheet" href="spatnav-style.css"> -->
11-
<style>
12-
@font-face {
13-
font-family: 'Roboto';
14-
font-style: normal;
15-
font-weight: 400;
16-
src: url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
17-
}
18-
body {
19-
spatial-navigation: active;
20-
font-family: 'Roboto';
21-
margin: 0;
22-
}
23-
#folder_btn {
24-
cursor: pointer;
25-
position: fixed;
26-
right: 0px;
27-
top: 0px;
28-
width: 30px;
29-
height: 37px;
30-
border: 1px #777 solid;
31-
background-color: #DDD;
32-
font-size: 1.5em;
33-
text-align: center;
34-
opacity: 0.8;
35-
}
36-
#folder_btn:hover {
37-
background-color: #CCC;
38-
}
39-
#info_panel {
40-
position: fixed;
41-
right: 0px;
42-
top: 0px;
43-
width: 600px;
44-
background-color: #EEE;
45-
border: 1px #777 solid;
46-
padding: 10px;
47-
padding-left: 20px;
48-
opacity: 0.8;
49-
font-weight: bold;
50-
font-size: 1.8em;
51-
line-height: 1.6;
52-
}
53-
#author_panel {
54-
font-weight: normal;
55-
font-style: italic;
56-
font-size: 0.5em;
57-
padding-bottom: 15px;
58-
text-align: right;
59-
}
60-
#description_panel {
61-
font-weight: normal;
62-
font-size: 0.6em;
63-
}
64-
.container {
65-
border: 3px #6ac solid;
66-
padding: 10px;
67-
margin: 10px;
68-
}
69-
.box {
70-
position: relative;
71-
box-sizing: border-box;
72-
width: 20px;
73-
height: 20px;
74-
border: 1px #555 solid;
75-
}
76-
.c1 {
77-
background: #6ac;
78-
}
79-
.c2 {
80-
background :#7b4;
81-
}
82-
.c3 {
83-
background :#88c;
84-
}
85-
.c4 {
86-
background :#c88;
87-
}
88-
.box:focus {
89-
border: 3px #555 solid;
90-
}
91-
input {
92-
margin:5px;
93-
}
94-
</style>
959

96-
<script src="../polyfill/spatnav-utils.js"></script>
10+
<link rel="stylesheet" href="spatnav-style.css">
11+
<script src="spatnav-utils.js"></script>
9712
<script src="../polyfill/spatnav-heuristic.js"></script>
98-
9913
</head>
10014

10115
<body>
10216
<h1>Spatial Navigation Test Cases</h1>
103-
10417
<div class="container" style="width:600px; height:100px;">
10518
<button class="box" style="top: 70px; left: 100px;"></button>
10619
<button class="box" style="top: 10px; left: 200px;"></button>
10720
<button class="box" style="top: 80px; left: 400px;"></button>
10821
</div>
109-
11022
<div class="container" style="width:600px; height:100px;">
11123
<button class="box" style="top: 60px; left: 40px;"></button>
11224
<button class="box" style="top: 20px; left: 10px;"></button>
@@ -139,7 +51,7 @@ <h1>Spatial Navigation Test Cases</h1>
13951
<button class="box" style="position: absolute; top: 650px; left: 200px; height: 90px; width: 150px;"></button>
14052
<button class="box" style="position: absolute; top: 650px; left: 200px;"></button>
14153
</div>
142-
<div class="container" style="width:600px; height:100px; overflow-y: scroll;">
54+
<div class="container" tabindex="0" style="width:600px; height:100px; overflow-y: scroll;">
14355
<button class="box" style="top: 70px; left: 200px;"></button>
14456
<button class="box" style="top: 550px; left: 200px;"></button>
14557
</div>

‎testcase/heuristic_overflow_regions.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="application-name" content="Various overflow regions">
8+
<meta name="author" content="Yeonjae Koo">
9+
<meta name="description" content="There are many overflow css property values like scroll, visible, hidden. You can check the behavior of the focus navigation in various overflow situations.">
10+
11+
<link rel="stylesheet" href="spatnav-style.css">
12+
<script src="spatnav-utils.js"></script>
13+
<script src="../polyfill/spatnav-heuristic.js"></script>
14+
</head>
15+
16+
<body>
17+
<h1>Spatial Navigation Overflow region Test Cases</h1>
18+
19+
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
20+
overflow-y: scroll
21+
<button class="box" style="top: 70px; left: 200px;"></button>
22+
<button class="box" style="top: 550px; left: 200px;"></button>
23+
</div>
24+
25+
<div class="container" tabindex="0" style="height: 160px; width: 600px; overflow-y: visible;">
26+
overflow-y: visible
27+
<button class="box" style="top: 30px; left: 200px;"></button>
28+
<button class="box" style="top: 160px; left: 200px;"></button>
29+
</div>
30+
31+
<div class="container" tabindex="0" style="height: 180px; width: 600px; overflow-y: hidden;">
32+
overflow-y: hidden
33+
<button class="box" style="top: 70px; left: 200px;"></button>
34+
<button class="box" style="top: 180px; left: 200px;"></button>
35+
</div>
36+
37+
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
38+
overflow-y: scroll, offscreen test
39+
<button class="box" style="top: 10px; left: 200px;"></button>
40+
41+
<div class="container c1" style="width:300px; height:1500px;">
42+
</div>
43+
<span style="color: red;">Can't scroll up back when container DIV tabIndex<0 </span>
44+
<br>
45+
46+
</div>
47+
48+
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
49+
overflow-y: scroll<br>
50+
<div class="box " style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
51+
overflow: unset
52+
<button class="box" style="top: 70px; left: 50px;"></button>
53+
<button class="box" style="top: 180px; left: 50px;"></button>
54+
</div>
55+
56+
<div style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
57+
overflow: inherit
58+
<button class="box" style="top: 70px; left: 50px;"></button>
59+
<button class="box" style="top: 180px; left: 50px;"></button>
60+
</div>
61+
</div>
62+
63+
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
64+
overflow-y: scroll<br>
65+
<p class="box polyfillContainer" style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
66+
&lt;p> tag container<br> overflow: unset
67+
<button class="box c1" style="top: 70px; left: 50px;"></button>
68+
<button class="box c1" style="top: 180px; left: 50px;"></button>
69+
</p>
70+
<button class="box" style="position: absolute; top: 1350px; left: 180px;"></button>
71+
<p style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
72+
&lt;p> tag<br> overflow: inherit
73+
<button class="box" style="top: 70px; left: 50px;"></button>
74+
<button class="box" style="top: 180px; left: 50px;"></button>
75+
</p>
76+
</div>
77+
78+
<p tabIndex=1 style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;">This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br></p>
79+
80+
<p style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll when scrollable area is tabIndex<0</span><br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br></p>
81+
<br>
82+
<div tabIndex=1 style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll up</span><br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br></div>
83+
84+
<div style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll when scrollable area is tabIndex<0 </span><br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br></div>
85+
86+
</body>
87+
</html>

‎testcase/heuristic_scrollable_iframe.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="application-name" content="Scrollable region and iframe region">
7+
<meta name="author" content="Jihye Hong">
8+
<meta name="description" content="Scrollable regions and iframe regions are considered as a container that can give a priority to the internal elements in case of the focus navigation. You can test the behavior of focus navigation in the couple of regions using arrow keys">
9+
10+
<link rel="stylesheet" href="spatnav-style.css">
11+
<script src="spatnav-utils.js"></script>
12+
<script src="../polyfill/spatnav-heuristic.js"></script>
13+
</head>
14+
<body>
15+
<div class="container" style="width: 600px;">
16+
<h2>A scrollable region</h2>
17+
<div tabindex="0" style="overflow-y: scroll; width: 200px; height: 200px; border: 3px #F08080 solid;">
18+
<div tabindex="0" class="box c2" style="left: 70px; top: 30px"></div>
19+
<div tabindex="0" class="box c2" style="left: 50px; top: 90px"></div>
20+
<div tabindex="0" class="box c2" style="left: 130px; top: 267px"></div>
21+
<div tabindex="0" class="box c2" style="left: 140px; top: 330px"></div>
22+
<div tabindex="0" class="box c2" style="left: 50px; top: 360px"></div>
23+
</div>
24+
<div tabindex="0" class="box c1" style="left: 130px; top: 20px;"></div>
25+
<div tabindex="0" class="box c1" style="left: 80px; top: -50px;"></div>
26+
<div tabindex="0" class="box c1" style="left: 20px; top: -70px;"></div>
27+
<h2>An iframe region that has a standalone document</h2>
28+
<iframe src="heuristic_scrollable_iframe_sub.html" style="width: 200px; height: 200px; overflow: hidden; border: 3px #88c solid;" tabindex="0"></iframe>
29+
<div tabindex="0" class="box c1" style="left: 50px; top: -180px;"></div>
30+
<div tabindex="0" class="box c1" style="left: 140px; top: -110px;"></div>
31+
<div tabindex="0" class="box c1" style="left: 80px; top: -70px;"></div>
32+
<div tabindex="0" class="box c1" style="left: 180px; top: -50px;"></div>
33+
</div>
34+
</body>
35+
</html>

‎testcase/heuristic_scrollable_iframe_sub.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="stylesheet" href="spatnav-style.css">
8+
<script src="../polyfill/spatnav-heuristic.js"></script>
9+
</head>
10+
<body>
11+
<div tabindex="0" class="box c3" style="left: 80px; top: 20px" tabindex="0"></div>
12+
<div tabindex="0" class="box c3" style="left: 150px; top: 30px" tabindex="0"></div>
13+
<div tabindex="0" class="box c3" style="left: 20px; top: 70px" tabindex="0"></div>
14+
<div tabindex="0" class="box c3" style="left: 130px; top: 100px" tabindex="0"></div>
15+
</body>
16+
</html>

‎testcase/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<base target="_blank">
7+
<title>Spatial Navigation Demo Collection</title>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
9+
<style>
10+
body {
11+
font-family: Roboto, sans-serif;
12+
font-weight: 300;
13+
margin: 0;
14+
padding: 0;
15+
word-break: break-word;
16+
}
17+
a {
18+
color: #15c;
19+
text-decoration: none;
20+
line-height: 1.3em;
21+
}
22+
a:hover {
23+
text-decoration: underline;
24+
}
25+
a#viewSource {
26+
border-top: 1px solid #999;
27+
display: block;
28+
margin-top: 1.3em;
29+
padding-top: 1em;
30+
}
31+
div#links a {
32+
display: block;
33+
margin-bottom: 1.5em;
34+
}
35+
div#links a.inline_link {
36+
display: inline-block;
37+
margin-bottom: 0;
38+
color: #b35;
39+
}
40+
div#top_status {
41+
font-size: 13px;
42+
border-top: 1px #182 solid;
43+
border-bottom: 1px #182 solid;
44+
text-align: center;
45+
color: #FFF;
46+
background: #293;
47+
top: 0px;
48+
width: 100%;
49+
position: fixed;
50+
}
51+
div#container {
52+
margin: 0 auto;
53+
max-width: 40em;
54+
}
55+
h1 {
56+
border-bottom: 1px solid #ccc;
57+
font-weight: 500;
58+
padding-bottom: 0.3em;
59+
}
60+
h2 {
61+
color: #679;
62+
border-top: 1px solid #eee;
63+
font-weight: 400;
64+
padding-top: 1em;
65+
margin-top: 1.2em;
66+
}
67+
p {
68+
color: #444;
69+
font-weight: 300;
70+
line-height: 1.6em;
71+
}
72+
</style>
73+
74+
<script src="../polyfill/spatnav-heuristic.js"></script>
75+
<script type="text/javascript">
76+
window.addEventListener("load", function() {
77+
78+
// load SpatNav polyfill
79+
focusNavigationHeuristics();
80+
});
81+
</script>
82+
</head>
83+
84+
<body>
85+
<div id="top_status">All demo pages support spatial navigation. Please use arrow keys for moving the focus.</div>
86+
<div id="container">
87+
<h1>Spatial Navigation Laboratory</h1>
88+
<p>This site aims to show several behaviors of spatial navigation.</p>
89+
<p>Please use only arrow keys with several shortcuts to navigate all pages.</p>
90+
<p>Submit bug reports, requests and comments on <a href="https://github.com/WICG/spatial-navigation/issues" title="github issues">github issues</a>.</p>
91+
92+
<div id="links">
93+
<h2>1. Why Spatial Navigation?</h2>
94+
<a href="https://github.com/WICG/spatial-navigation/blob/master/README.md" title="why spatial navigation">Introduction of spatial navigation</a>
95+
96+
<h2>2. Heuristic algorithm test cases using <a class="inline_link" href="https://github.com/WICG/spatial-navigation/">a polyfill</a></h2>
97+
<a href="heuristic_default_move.html">Default focus moving behavior</a>
98+
<a href="heuristic_scrollable_iframe.html">Scrollable region and iframe region</a>
99+
<a href="heuristic_overflow_regions.html">Various overflow regions</a>
100+
101+
<a href="https://github.com/WICG/spatial-navigation/tree/master/demo" id="viewSource">View source on GitHub</a>
102+
</div>
103+
<br><br>
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)