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