Skip to content

Commit

Permalink
Merge pull request w3c#42 from jihyerish/spatnav-polyfill
Browse files Browse the repository at this point in the history 
Upload SpatNav Polyfill and Test cases
  • Loading branch information
Jihye Hong authored Mar 30, 2018
2 parents ce3d4bd + 1692981 commit fe349d8
Show file tree
Hide file tree
Showing 8 changed files with 1,298 additions and 92 deletions.
971 changes: 971 additions & 0 deletions polyfill/spatnav-heuristic.js
View file

Large diffs are not rendered by default.

94 changes: 3 additions & 91 deletions testcase/heuristic_default_move.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<!DOCTYPE html>
<html>
<head>
Expand All @@ -7,106 +6,19 @@
<meta name="application-name" content="Default focus moving behavior">
<meta name="author" content="Jihye Hong">
<meta name="description" content="You can check here the default focus moving behavior of our spatial-navigation heuristic algorithm using arrow keys.">
<!-- <link rel="stylesheet" href="spatnav-style.css"> -->
<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
}
body {
spatial-navigation: active;
font-family: 'Roboto';
margin: 0;
}
#folder_btn {
cursor: pointer;
position: fixed;
right: 0px;
top: 0px;
width: 30px;
height: 37px;
border: 1px #777 solid;
background-color: #DDD;
font-size: 1.5em;
text-align: center;
opacity: 0.8;
}
#folder_btn:hover {
background-color: #CCC;
}
#info_panel {
position: fixed;
right: 0px;
top: 0px;
width: 600px;
background-color: #EEE;
border: 1px #777 solid;
padding: 10px;
padding-left: 20px;
opacity: 0.8;
font-weight: bold;
font-size: 1.8em;
line-height: 1.6;
}
#author_panel {
font-weight: normal;
font-style: italic;
font-size: 0.5em;
padding-bottom: 15px;
text-align: right;
}
#description_panel {
font-weight: normal;
font-size: 0.6em;
}
.container {
border: 3px #6ac solid;
padding: 10px;
margin: 10px;
}
.box {
position: relative;
box-sizing: border-box;
width: 20px;
height: 20px;
border: 1px #555 solid;
}
.c1 {
background: #6ac;
}
.c2 {
background :#7b4;
}
.c3 {
background :#88c;
}
.c4 {
background :#c88;
}
.box:focus {
border: 3px #555 solid;
}
input {
margin:5px;
}
</style>

<script src="../polyfill/spatnav-utils.js"></script>
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../polyfill/spatnav-heuristic.js"></script>

</head>

<body>
<h1>Spatial Navigation Test Cases</h1>

<div class="container" style="width:600px; height:100px;">
<button class="box" style="top: 70px; left: 100px;"></button>
<button class="box" style="top: 10px; left: 200px;"></button>
<button class="box" style="top: 80px; left: 400px;"></button>
</div>

<div class="container" style="width:600px; height:100px;">
<button class="box" style="top: 60px; left: 40px;"></button>
<button class="box" style="top: 20px; left: 10px;"></button>
Expand Down Expand Up @@ -139,7 +51,7 @@ <h1>Spatial Navigation Test Cases</h1>
<button class="box" style="position: absolute; top: 650px; left: 200px; height: 90px; width: 150px;"></button>
<button class="box" style="position: absolute; top: 650px; left: 200px;"></button>
</div>
<div class="container" style="width:600px; height:100px; overflow-y: scroll;">
<div class="container" tabindex="0" style="width:600px; height:100px; overflow-y: scroll;">
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 550px; left: 200px;"></button>
</div>
Expand Down
87 changes: 87 additions & 0 deletions testcase/heuristic_overflow_regions.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Various overflow regions">
<meta name="author" content="Yeonjae Koo">
<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.">

<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../polyfill/spatnav-heuristic.js"></script>
</head>

<body>
<h1>Spatial Navigation Overflow region Test Cases</h1>

<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 550px; left: 200px;"></button>
</div>

<div class="container" tabindex="0" style="height: 160px; width: 600px; overflow-y: visible;">
overflow-y: visible
<button class="box" style="top: 30px; left: 200px;"></button>
<button class="box" style="top: 160px; left: 200px;"></button>
</div>

<div class="container" tabindex="0" style="height: 180px; width: 600px; overflow-y: hidden;">
overflow-y: hidden
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 180px; left: 200px;"></button>
</div>

<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll, offscreen test
<button class="box" style="top: 10px; left: 200px;"></button>

<div class="container c1" style="width:300px; height:1500px;">
</div>
<span style="color: red;">Can't scroll up back when container DIV tabIndex<0 </span>
<br>

</div>

<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll<br>
<div class="box " style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
overflow: unset
<button class="box" style="top: 70px; left: 50px;"></button>
<button class="box" style="top: 180px; left: 50px;"></button>
</div>

<div style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
overflow: inherit
<button class="box" style="top: 70px; left: 50px;"></button>
<button class="box" style="top: 180px; left: 50px;"></button>
</div>
</div>

<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll<br>
<p class="box polyfillContainer" style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
&lt;p> tag container<br> overflow: unset
<button class="box c1" style="top: 70px; left: 50px;"></button>
<button class="box c1" style="top: 180px; left: 50px;"></button>
</p>
<button class="box" style="position: absolute; top: 1350px; left: 180px;"></button>
<p style="margin:15px; width: 250px; height: 150px; overflow: inherit; display: inline-flex;">
&lt;p> tag<br> overflow: inherit
<button class="box" style="top: 70px; left: 50px;"></button>
<button class="box" style="top: 180px; left: 50px;"></button>
</p>
</div>

<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>

<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>
<br>
<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>

<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>

</body>
</html>
35 changes: 35 additions & 0 deletions testcase/heuristic_scrollable_iframe.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Scrollable region and iframe region">
<meta name="author" content="Jihye Hong">
<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">

<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../polyfill/spatnav-heuristic.js"></script>
</head>
<body>
<div class="container" style="width: 600px;">
<h2>A scrollable region</h2>
<div tabindex="0" style="overflow-y: scroll; width: 200px; height: 200px; border: 3px #F08080 solid;">
<div tabindex="0" class="box c2" style="left: 70px; top: 30px"></div>
<div tabindex="0" class="box c2" style="left: 50px; top: 90px"></div>
<div tabindex="0" class="box c2" style="left: 130px; top: 267px"></div>
<div tabindex="0" class="box c2" style="left: 140px; top: 330px"></div>
<div tabindex="0" class="box c2" style="left: 50px; top: 360px"></div>
</div>
<div tabindex="0" class="box c1" style="left: 130px; top: 20px;"></div>
<div tabindex="0" class="box c1" style="left: 80px; top: -50px;"></div>
<div tabindex="0" class="box c1" style="left: 20px; top: -70px;"></div>
<h2>An iframe region that has a standalone document</h2>
<iframe src="heuristic_scrollable_iframe_sub.html" style="width: 200px; height: 200px; overflow: hidden; border: 3px #88c solid;" tabindex="0"></iframe>
<div tabindex="0" class="box c1" style="left: 50px; top: -180px;"></div>
<div tabindex="0" class="box c1" style="left: 140px; top: -110px;"></div>
<div tabindex="0" class="box c1" style="left: 80px; top: -70px;"></div>
<div tabindex="0" class="box c1" style="left: 180px; top: -50px;"></div>
</div>
</body>
</html>
16 changes: 16 additions & 0 deletions testcase/heuristic_scrollable_iframe_sub.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="spatnav-style.css">
<script src="../polyfill/spatnav-heuristic.js"></script>
</head>
<body>
<div tabindex="0" class="box c3" style="left: 80px; top: 20px" tabindex="0"></div>
<div tabindex="0" class="box c3" style="left: 150px; top: 30px" tabindex="0"></div>
<div tabindex="0" class="box c3" style="left: 20px; top: 70px" tabindex="0"></div>
<div tabindex="0" class="box c3" style="left: 130px; top: 100px" tabindex="0"></div>
</body>
</html>
105 changes: 105 additions & 0 deletions testcase/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_blank">
<title>Spatial Navigation Demo Collection</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
body {
font-family: Roboto, sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
word-break: break-word;
}
a {
color: #15c;
text-decoration: none;
line-height: 1.3em;
}
a:hover {
text-decoration: underline;
}
a#viewSource {
border-top: 1px solid #999;
display: block;
margin-top: 1.3em;
padding-top: 1em;
}
div#links a {
display: block;
margin-bottom: 1.5em;
}
div#links a.inline_link {
display: inline-block;
margin-bottom: 0;
color: #b35;
}
div#top_status {
font-size: 13px;
border-top: 1px #182 solid;
border-bottom: 1px #182 solid;
text-align: center;
color: #FFF;
background: #293;
top: 0px;
width: 100%;
position: fixed;
}
div#container {
margin: 0 auto;
max-width: 40em;
}
h1 {
border-bottom: 1px solid #ccc;
font-weight: 500;
padding-bottom: 0.3em;
}
h2 {
color: #679;
border-top: 1px solid #eee;
font-weight: 400;
padding-top: 1em;
margin-top: 1.2em;
}
p {
color: #444;
font-weight: 300;
line-height: 1.6em;
}
</style>

<script src="../polyfill/spatnav-heuristic.js"></script>
<script type="text/javascript">
window.addEventListener("load", function() {

// load SpatNav polyfill
focusNavigationHeuristics();
});
</script>
</head>

<body>
<div id="top_status">All demo pages support spatial navigation. Please use arrow keys for moving the focus.</div>
<div id="container">
<h1>Spatial Navigation Laboratory</h1>
<p>This site aims to show several behaviors of spatial navigation.</p>
<p>Please use only arrow keys with several shortcuts to navigate all pages.</p>
<p>Submit bug reports, requests and comments on <a href="https://github.com/WICG/spatial-navigation/issues" title="github issues">github issues</a>.</p>

<div id="links">
<h2>1. Why Spatial Navigation?</h2>
<a href="https://github.com/WICG/spatial-navigation/blob/master/README.md" title="why spatial navigation">Introduction of spatial navigation</a>

<h2>2. Heuristic algorithm test cases using <a class="inline_link" href="https://github.com/WICG/spatial-navigation/">a polyfill</a></h2>
<a href="heuristic_default_move.html">Default focus moving behavior</a>
<a href="heuristic_scrollable_iframe.html">Scrollable region and iframe region</a>
<a href="heuristic_overflow_regions.html">Various overflow regions</a>

<a href="https://github.com/WICG/spatial-navigation/tree/master/demo" id="viewSource">View source on GitHub</a>
</div>
<br><br>
</body>
</html>
Loading

0 comments on commit fe349d8

Please sign in to comment.