LayoutTests/fast/spatial-navigation/snav-imagemap-overlapped-areas.html - WebKit - Git at Google

 <html>
   <head>

     <script src="../../resources/js-test-pre.js"></script>
     <script src="resources/spatial-navigation-utils.js"></script>
     <script type="application/javascript">

     var resultMap = [
       ["Down", "4"],
       ["Down", "1"],
       ["Down", "2"],
       ["Down", "5"],
       ["Up", "4"],
       ["Up", "3"],
       ["Up", "2"],
       ["Left", "1"],
       ["Right", "3"],
       ["Left", "2"],
       ["Up", "1"],
       ["Up", "start"],
       ["DONE", "DONE"]
     ];

     if (window.testRunner) {
       testRunner.dumpAsText();
       testRunner.setSpatialNavigationEnabled(true);
       testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
       testRunner.waitUntilDone();
     }

     function runTest()
     {
       // starting the test itself: get to a known place.
       document.getElementById("start").focus();

       initTest(resultMap, testCompleted);
     }

     function testCompleted()
     {
       if (window.testRunner)
         testRunner.notifyDone();
     }

     window.onload = runTest;

     </script>
     <script src="../resources/js-test-post.js"></script>
   </head>

   <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
   <map name="map" title="map" id="firstmap">
     <area shape="circle" coords="45,45,25" href="#" id="1">
     <area shape="rect" coords="45,60,95,110" href="#" id="2">
     <area shape="poly" coords="80,20,130,20,130,180,30,180,30,130,80,130" href="#" id="3">
     <area shape="default" href="#" id="4">
   </map>

     <a id="start" href="a"><img src="resources/green.png" width=50px height=50px></a>
     <br>
     <div>
       <img src="resources/green.png" width=200px height=200px usemap="#map">
     </div>
     <a id="5" href="a"><img src="resources/green.png" width=50px height=50px></a>
     <div id="console"></div>
     <div>This test tests that areas of an imagemap can be reached with spatial navigation even if they are overlapped.</div>
   </body>
 </html>
	<html>
	<head>

	<script src="../../resources/js-test-pre.js"></script>
	<script src="resources/spatial-navigation-utils.js"></script>
	<script type="application/javascript">

	var resultMap = [
	["Down", "4"],
	["Down", "1"],
	["Down", "2"],
	["Down", "5"],
	["Up", "4"],
	["Up", "3"],
	["Up", "2"],
	["Left", "1"],
	["Right", "3"],
	["Left", "2"],
	["Up", "1"],
	["Up", "start"],
	["DONE", "DONE"]
	];

	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.setSpatialNavigationEnabled(true);
	testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
	testRunner.waitUntilDone();
	}

	function runTest()
	{
	// starting the test itself: get to a known place.
	document.getElementById("start").focus();

	initTest(resultMap, testCompleted);
	}

	function testCompleted()
	{
	if (window.testRunner)
	testRunner.notifyDone();
	}

	window.onload = runTest;

	</script>
	<script src="../resources/js-test-post.js"></script>
	</head>

	<body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
	<map name="map" title="map" id="firstmap">
	<area shape="circle" coords="45,45,25" href="#" id="1">
	<area shape="rect" coords="45,60,95,110" href="#" id="2">
	<area shape="poly" coords="80,20,130,20,130,180,30,180,30,130,80,130" href="#" id="3">
	<area shape="default" href="#" id="4">
	</map>

	<a id="start" href="a"><img src="resources/green.png" width=50px height=50px></a>
	<br>
	<div>
	<img src="resources/green.png" width=200px height=200px usemap="#map">
	</div>
	<a id="5" href="a"><img src="resources/green.png" width=50px height=50px></a>
	<div id="console"></div>
	<div>This test tests that areas of an imagemap can be reached with spatial navigation even if they are overlapped.</div>
	</body>
	</html>