Implementing imagemap support in Firefox driver

nimeacuerdo · Feb 26, 2013 · 5a0284c · 5a0284c
1 parent b10baac
commit 5a0284c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 10 deletions.
diff --git a/common/src/web/click_tests/google_map.html b/common/src/web/click_tests/google_map.html
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Google Map</title>
+  <title>Google Image Map</title>
 </head>
 <body>
-<img id="google_logo" src="google_map.png" usemap="#google_map" width="364" height="126"/>
+<h1>Google Image Map</h1>
+<img id="google_logo" src="google_map.png" usemap="#google_map" border="0" width="364" height="126"/>
 <map id="google_map" name="google_map">
-<area shape="rect" coords="0,0,90,126" href="mapped_page1.html" alt="area 1"/>
-<area shape="rect" coords="90,0,364,126" href="mapped_page2.html" alt="area 2"/>
+<area id="rectG" shape="rect" coords="0,0,90,100" href="mapped_page1.html" alt="area 1"/>
+<area id="circleO" shape="circle" coords="120,60,30" href="mapped_page2.html" alt="area 2"/>
+<area id="polyLE" shape="poly" coords="280,0,310,0,360,30,360,90,280,90" href="mapped_page3.html" alt="area 3"/>
 </map>
 </body>
 </html>
diff --git a/common/src/web/click_tests/mapped_page3.html b/common/src/web/click_tests/mapped_page3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Target Page 3</title>
+</head>
+<body>
+  <div>Target Page 3</div>
+</body>
+</html>
diff --git a/java/client/test/org/openqa/selenium/ClickTest.java b/java/client/test/org/openqa/selenium/ClickTest.java
@@ -35,7 +35,7 @@
 import static org.openqa.selenium.WaitingConditions.newWindowIsOpened;
 import static org.openqa.selenium.testing.Ignore.Driver.ANDROID;
 import static org.openqa.selenium.testing.Ignore.Driver.CHROME;
-import static org.openqa.selenium.testing.Ignore.Driver.FIREFOX;
+import static org.openqa.selenium.testing.Ignore.Driver.IE;
 import static org.openqa.selenium.testing.Ignore.Driver.IPHONE;
 import static org.openqa.selenium.testing.Ignore.Driver.OPERA;
 import static org.openqa.selenium.testing.Ignore.Driver.OPERA_MOBILE;
@@ -268,16 +268,19 @@ public void testClicksASurroundingStrongTag() {
   }
 
   @Test
-  @Ignore(value = {CHROME, FIREFOX, OPERA, OPERA_MOBILE, ANDROID, IPHONE, SELENESE}, reason
-      = "Chrome: element is no clickable, Opera: failed, "
-      + "Firefox: failed with native events, other: not tested")
+  @Ignore(value = {CHROME, IE, OPERA, OPERA_MOBILE, ANDROID, IPHONE, SELENESE}, reason
+      = "Chrome: element is no clickable, Opera, IE: failed, others: not tested")
   public void testCanClickAnImageMapArea() {
     driver.get(appServer.whereIs("click_tests/google_map.html"));
-    driver.findElements(By.tagName("area")).get(0).click();
+    driver.findElement(By.id("rectG")).click();
     waitFor(WaitingConditions.pageTitleToBe(driver, "Target Page 1"));
 
     driver.get(appServer.whereIs("click_tests/google_map.html"));
-    driver.findElements(By.tagName("area")).get(1).click();
+    driver.findElement(By.id("circleO")).click();
     waitFor(WaitingConditions.pageTitleToBe(driver, "Target Page 2"));
+
+    driver.get(appServer.whereIs("click_tests/google_map.html"));
+    driver.findElement(By.id("polyLE")).click();
+    waitFor(WaitingConditions.pageTitleToBe(driver, "Target Page 3"));
   }
 }
diff --git a/javascript/firefox-driver/js/utils.js b/javascript/firefox-driver/js/utils.js
@@ -716,6 +716,53 @@ Utils.getLocation = function(element, opt_onlyFirstRect) {
 
     // Firefox 3.5
     if (clientRect['width']) {
+      if ('area' == element.tagName.toLowerCase()) {
+        // TODO: implement coordinates specified in percents
+        var coords = element.coords.split(',');
+        if (element.shape == 'rect') {
+          var leftX = Number(coords[0]);
+          var topY = Number(coords[1]);
+          var rightX = Number(coords[2]);
+          var bottomY = Number(coords[3]);
+          return {
+            x: clientRect.left + leftX,
+            y: clientRect.top + topY,
+            width: rightX - leftX,
+            height: bottomY - topY
+          };
+        } else if (element.shape == 'circle') {
+          var centerX = Number(coords[0]);
+          var centerY = Number(coords[1]);
+          var radius = Number(coords[2]);
+          return {
+            x: clientRect.left + centerX - radius,
+            y: clientRect.top + centerY - radius,
+            width: 2*radius,
+            height: 2*radius
+          };
+        } else if (element.shape == 'poly') {
+          var minX = Number(coords[0]);
+          var minY = Number(coords[1]);
+          var maxX = minX;
+          var maxY = minY;
+          for (i = 0; i < coords.length / 2; i++) {
+            var xi = Number(coords[i*2]);
+            var yi = Number(coords[i*2 + 1]);
+            minX = Math.min(minX, xi);
+            minY = Math.min(minY, yi);
+            maxX = Math.max(maxX, xi);
+            maxY = Math.max(maxY, yi);
+          }
+
+          return {
+            x: clientRect.left + minX,
+            y: clientRect.top + minY,
+            width: maxX - minX,
+            height: maxY - minY
+          };
+        }
+      }
+
       return {
         x: clientRect.left,
         y: clientRect.top,