Add a test case about the fragmented elements

Jihye Hong · Jihye Hong · commit 4b3f188bd1dd · 2018-11-15T14:49:53.000+09:00
Test case about the heuristic spatial navigation behavior of the fragmented elements.
diff --git a/tests/spatnav-distance-function-fragments.html b/tests/spatnav-distance-function-fragments.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Spatnav sanity check</title>
+<link rel="author" title="Jihye Hong" href="jh.hong@lge.com">
+<meta name=flags content="">
+<link rel=help href="https://wicg.github.io/spatial-navigation/#high-level-api">
+
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+
+<!--load polyfill. To be removed before submitting to WPT-->
+<script src="../polyfill/spatnav-heuristic.js"></script>
+
+<style>
+  :focus {
+    outline: 4px #3582ff solid;
+  }
+
+  .container {
+    margin: 10px;
+    padding: 10px;
+    position: relative;
+    border: 1px solid black;
+    width: 510px;
+    height: 300px;
+  }
+
+  .box {
+    position: absolute;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    border: 1px black solid;
+    background: #6ac;
+  }
+
+  #initial_focus {
+    background: #F08080;
+  }
+  
+</style>
+
+<body>
+  <div class="container">
+    This is a <a href="https://github.com/WICG/spatial-navigation" target="blank" id="repository">repository</a> for making the Web excellently embrace the 
+    <a href="https://wicg.github.io/spatial-navigation/" target="blank" id="spatial-navigation">spatial navigation</a>'s features so that 
+    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, 
+    and upcoming smart devices as well as PC and mobile for <a href="https://a11yproject.com/" target="blank" id="ally">a11y</a>.
+  </div>  
+</body>
+
+<script>
+test(function() {
+  document.getElementById("repository").focus();
+  window.navigate("right");
+  assert_equals(document.activeElement.id, "spatial-navigation");
+}, "Move focus right from `repository`")
+
+test(function() {
+  document.getElementById("several").focus();
+  window.navigate("up");
+  assert_equals(document.activeElement.id, "spatial-navigation");
+}, "Move focus up from `several`")
+
+test(function() {
+  document.getElementById("several").focus();
+  window.navigate("left");
+  assert_equals(document.activeElement.id, "spatial-navigation");
+}, "Move focus left from `several`")
+</script>
+</html>
