toolkit/content/tests/widgets/test_mousecapture_area.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <title>Mouse capture on area elements tests</title>
   5   <script type="text/javascript" src="/MochiKit/packed.js"></script>
   6   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   9 </head>
  10 <body>
  11 <p id="display"></p>
  12
  13 <div id="content">
  14   <!-- The border="0" on the images is needed so that when we use
  15        synthesizeMouse we don't accidentally target the border of the image and
  16        miss the area because synthesizeMouse gets the rect of the primary frame
  17        of the target (the area), which is the image due to bug 135040, which
  18        includes the border, but the events targetted at the border aren't
  19        targeted at the area. -->
  20
  21   <!-- 20x20 of red -->
  22   <img id="image" border="0"
  23        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
  24        usemap="#Map"/>
  25
  26   <map name="Map">
  27     <!-- area over the whole image -->
  28     <area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
  29           shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
  30   </map>
  31
  32
  33   <!-- 20x20 of red -->
  34   <img id="img1" border="0"
  35        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
  36        usemap="#sharedMap"/>
  37
  38   <!-- 20x20 of red -->
  39   <img id="img2" border="0"
  40        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
  41        usemap="#sharedMap"/>
  42
  43   <map name="sharedMap">
  44     <!-- area over the whole image -->
  45     <area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
  46           shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
  47   </map>
  48
  49
  50   <div id="otherelement" style="width: 100px; height: 100px;"></div>
  51 </div>
  52
  53 <pre id="test">
  54 <script class="testbody" type="text/javascript">
  55
  56 SimpleTest.waitForExplicitFinish();
  57
  58 function runTests()
  59 {
  60   //XXX We need to make sure a paint has happened on the images because that is
  61   // when the image maps actually get setup.
  62
  63   // Flush layout
  64   document.body.offsetWidth;
  65   // Flush out invalidation
  66   netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
  67   var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
  68                      getInterface(Components.interfaces.nsIDOMWindowUtils);
  69   utils.processUpdates();
  70
  71
  72   // test that setCapture works on an area element (bug 517737)
  73   var area = document.getElementById("area");
  74   synthesizeMouse(area, 5, 5, { type: "mousedown" });
  75   synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
  76                              area, "mousemove", "setCapture works on areas");
  77   synthesizeMouse(area, 5, 5, { type: "mouseup" });
  78
  79   // test that setCapture works on an area element when it is part of an image
  80   // map that is used by two images
  81
  82   var img1 = document.getElementById("img1");
  83   var sharedarea = document.getElementById("sharedarea");
  84   // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
  85   synthesizeMouse(img1, 5, 5, { type: "mousedown" });
  86   synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
  87                              sharedarea, "mousemove", "setCapture works on areas with multiple images");
  88   synthesizeMouse(img1, 5, 5, { type: "mouseup" });
  89
  90   var img2 = document.getElementById("img2");
  91   // synthesizeMouse just sends the event by coordinates, so this is really a click on the area
  92   synthesizeMouse(img2, 5, 5, { type: "mousedown" });
  93   synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
  94                              sharedarea, "mousemove", "setCapture works on areas with multiple images");
  95   synthesizeMouse(img2, 5, 5, { type: "mouseup" });
  96
  97   SimpleTest.finish();
  98 }
  99
 100 SimpleTest.waitForFocus(runTests);
 101
 102 </script>
 103 </pre>
 104 </body>
 105 </html>