snav-imagemap-overlapped-areas.html

<!doctype html>
<map name="map" title="map" id="firstmap">
  <area shape="circle" coords="45,45,25" href="#" id="circle">
  <area shape="rect" coords="45,60,95,110" href="#" id="rect">
  <area shape="poly" coords="80,20,130,20,130,180,30,180,30,130,80,130" href="#" id="poly">
  <area shape="default" href="#" id="default">
</map>

<a id="first" href="a"><img src="resources/green.png" width=50px height=50px></a>
<br><br>
<div>
  <img src="resources/green.png" width=200px height=200px usemap="#map">
</div>
<a id="last" href="a"><img src="resources/green.png" width=50px height=50px></a>

<p>All areas of an image map should be reachable with spatial navigation, even if they overlap.</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "default"],
    ["Down", "poly"],
    ["Left", "rect"],
    ["Left", "circle"],
    ["Down", "rect"],
    ["Down", "last"],
    ["Up", "default"],
    ["Up", "poly"],
    ["Up", "rect"],
    ["Up", "circle"],
    ["Up", "first"],
  ];
  // Start at a known place.
  document.getElementById("first").focus();
  snav.assertFocusMoves(resultMap);
</script>

<p><em>Manual test instruction: Ensure the img's default area gets visited first since it is the
outermost area and closest to #first. From there, ensure that all internal areas are reachable too.
</em></p>

<p>In general, if two areas are on the same distance from current focus F, SpatNav should prioritize
the area that can absorb most of F's projection.</p>

<p>When looking for the closest "insider" (here, areas inside the focused img), SpatNav projects
he img's edge onto each area. Here #poly wins over #circle because #poly's area absorbs more
of the projection.</p>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-imagemap-overlapped-areas.html
