mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
121 lines
4.8 KiB
HTML
121 lines
4.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Mouse capture on area elements tests</title>
|
|
<script type="text/javascript" src="/MochiKit/packed.js"></script>
|
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
</head>
|
|
<body>
|
|
<p id="display"></p>
|
|
|
|
<div id="content">
|
|
<!-- The border="0" on the images is needed so that when we use
|
|
synthesizeMouse we don't accidentally target the border of the image and
|
|
miss the area because synthesizeMouse gets the rect of the primary frame
|
|
of the target (the area), which is the image due to bug 135040, which
|
|
includes the border, but the events targetted at the border aren't
|
|
targeted at the area. -->
|
|
|
|
<!-- 20x20 of red -->
|
|
<img id="image" border="0"
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
|
|
usemap="#Map"/>
|
|
|
|
<map name="Map">
|
|
<!-- area over the whole image -->
|
|
<area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
|
|
shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
|
|
</map>
|
|
|
|
|
|
<!-- 20x20 of red -->
|
|
<img id="img1" border="0"
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
|
|
usemap="#sharedMap"/>
|
|
|
|
<!-- 20x20 of red -->
|
|
<img id="img2" border="0"
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"
|
|
usemap="#sharedMap"/>
|
|
|
|
<map name="sharedMap">
|
|
<!-- area over the whole image -->
|
|
<area id="sharedarea" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
|
|
shape="poly" coords="0,0, 0,20, 20,20, 20,0" href="javascript:void(0);"/>
|
|
</map>
|
|
|
|
|
|
<div id="otherelement" style="width: 100px; height: 100px;"></div>
|
|
</div>
|
|
|
|
<pre id="test">
|
|
<script class="testbody" type="text/javascript">
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function runTests()
|
|
{
|
|
//XXX We need to make sure a paint has happened on the images because that is
|
|
// when the image maps actually get setup.
|
|
|
|
// There's no way to force painting to happen on OS X, maybe some synthesized
|
|
// mouse events will do the job?
|
|
synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
|
|
synthesizeMouse($("otherelement"), 5, 5, { type: "mousemove" });
|
|
synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
|
|
|
|
// Flush layout
|
|
document.body.offsetWidth;
|
|
// Flush out invalidation
|
|
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
|
|
var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
|
|
getInterface(Components.interfaces.nsIDOMWindowUtils);
|
|
utils.processUpdates();
|
|
|
|
// There's no way to force painting to happen on OS X, maybe a synthesized
|
|
// mouse click will do the job?
|
|
synthesizeMouse($("image"), 5, 5, { type: "mousedown" });
|
|
synthesizeMouse($("otherelement"), 5, 5, { type: "mousemove" });
|
|
synthesizeMouse($("image"), 5, 5, { type: "mouseup" });
|
|
|
|
setTimeout(finishTests, 100);
|
|
}
|
|
|
|
function finishTests() {
|
|
// test that setCapture works on an area element (bug 517737)
|
|
var area = document.getElementById("area");
|
|
synthesizeMouse(area, 5, 5, { type: "mousedown" });
|
|
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
|
|
area, "mousemove", "setCapture works on areas");
|
|
synthesizeMouse(area, 5, 5, { type: "mouseup" });
|
|
|
|
// test that setCapture works on an area element when it is part of an image
|
|
// map that is used by two images
|
|
|
|
var img1 = document.getElementById("img1");
|
|
var sharedarea = document.getElementById("sharedarea");
|
|
// synthesizeMouse just sends the event by coordinates, so this is really a click on the area
|
|
synthesizeMouse(img1, 5, 5, { type: "mousedown" });
|
|
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
|
|
sharedarea, "mousemove", "setCapture works on areas with multiple images");
|
|
synthesizeMouse(img1, 5, 5, { type: "mouseup" });
|
|
|
|
var img2 = document.getElementById("img2");
|
|
// synthesizeMouse just sends the event by coordinates, so this is really a click on the area
|
|
synthesizeMouse(img2, 5, 5, { type: "mousedown" });
|
|
synthesizeMouseExpectEvent($("otherelement"), 5, 5, { type: "mousemove" },
|
|
sharedarea, "mousemove", "setCapture works on areas with multiple images");
|
|
synthesizeMouse(img2, 5, 5, { type: "mouseup" });
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForFocus(runTests);
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|