The Tor Browser / file comparison
comparison: toolkit/content/tests/widgets/test_mousecapture_area.html
toolkit/content/tests/widgets/test_mousecapture_area.html
- branch
- TOR_BUG_3246
- changeset 7
- 129ffea94266
equal
deleted
inserted
replaced
| -1:000000000000 | 0:296cea4ced59 |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>Mouse capture on area elements tests</title> | |
| 5 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> | |
| 6 <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script> | |
| 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> | |
| 8 </head> | |
| 9 <body> | |
| 10 <p id="display"></p> | |
| 11 | |
| 12 <div id="content"> | |
| 13 <!-- The border="0" on the images is needed so that when we use | |
| 14 synthesizeMouse we don't accidentally target the border of the image and | |
| 15 miss the area because synthesizeMouse gets the rect of the primary frame | |
| 16 of the target (the area), which is the image due to bug 135040, which | |
| 17 includes the border, but the events targetted at the border aren't | |
| 18 targeted at the area. --> | |
| 19 | |
| 20 <!-- 20x20 of red --> | |
| 21 <img id="image" border="0" | |
| 22 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" | |
| 23 usemap="#Map"/> | |
| 24 | |
| 25 <map name="Map"> | |
| 26 <!-- area over the whole image --> | |
| 27 <area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();" | |
| 28 shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/> | |
| 29 </map> | |
| 30 | |
| 31 | |
| 32 <!-- 20x20 of red --> | |
| 33 <img id="img1" border="0" | |
| 34 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" | |
| 35 usemap="#sharedMap"/> | |
| 36 | |
| 37 <!-- 20x20 of red --> | |
| 38 <img id="img2" border="0" | |
| 39 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" | |
| 40 usemap="#sharedMap"/> | |
| 41 | |
| 42 <map name="sharedMap"> | |
| 43 <!-- area over the whole image --> | |
| 44 <area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();" | |
| 45 shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/> | |
| 46 </map> | |
| 47 | |
| 48 | |
| 49 <div id="otherelement" style="width: 100px; height: 100px;"></div> | |
| 50 </div> | |
| 51 | |
| 52 <pre id="test"> | |
| 53 <script class="testbody" type="text/javascript"> | |
| 54 | |
| 55 SimpleTest.expectAssertions(3); | |
| 56 | |
| 57 SimpleTest.waitForExplicitFinish(); | |
| 58 | |
| 59 function runTests() | |
| 60 { | |
| 61 //XXX We send a useless click to each image to force it to setup its image | |
| 62 // map, because flushing layout won't do it. Hopefully bug 135040 will make | |
| 63 // this not suck. | |
| 64 synthesizeMouse($("image"), 5, 5, { type: "mousedown" }); | |
| 65 synthesizeMouse($("image"), 5, 5, { type: "mouseup" }); | |
| 66 synthesizeMouse($("img1"), 5, 5, { type: "mousedown" }); | |
| 67 synthesizeMouse($("img1"), 5, 5, { type: "mouseup" }); | |
| 68 synthesizeMouse($("img2"), 5, 5, { type: "mousedown" }); | |
| 69 synthesizeMouse($("img2"), 5, 5, { type: "mouseup" }); | |
| 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 // Bug 862673 - nuke all content so assertions in this test are attributed to | |
| 98 // this test rather than the one which happens to follow. | |
| 99 var content = document.getElementById("content"); | |
| 100 content.parentNode.removeChild(content); | |
| 101 SimpleTest.finish(); | |
| 102 } | |
| 103 | |
| 104 SimpleTest.waitForFocus(runTests); | |
| 105 | |
| 106 </script> | |
| 107 </pre> | |
| 108 </body> | |
| 109 </html> |
