Add the test case for a transformed element

Jihye Hong · Jihye Hong · commit bac080230287 · 2018-11-15T14:40:05.000+09:00
Test case about the heuristic spatial navigation behavior for a transformed element.
diff --git a/tests/spatnav-distance-function-transformed-001.html b/tests/spatnav-distance-function-transformed-001.html
@@ -0,0 +1,57 @@
+<!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;
+    position: relative;
+    border: 1px solid black;
+    width: 500px;
+    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">
+    <div tabindex="0" class="box" id="initial_focus" style="width: 300px; left: 50px; top: 50px;"></div>
+    <div tabindex="0" class="box" style="left: 50px; top: 140px;"></div>
+    <div tabindex="0" class="box" id="down_focus" style="transform: rotateZ(-30deg); left: 200px; top: 140px;"></div>
+  </div>  
+</body>
+
+<script>
+test(function() {
+  document.getElementById("initial_focus").focus();
+  window.navigate("down");
+  assert_equals(document.activeElement.id, "down_focus");
+}, "Move focus down from the staring point")
+</script>
+</html>
