2009-09-13 17:13:16 +04:00
<?xml version="1.0"?>
2016-03-18 15:48:22 +03:00
<!DOCTYPE HTML>
< html xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns="http://www.w3.org/1999/xhtml">
< head >
< title > Mouse Capture Tests< / title >
< link rel = "stylesheet" href = "chrome://global/skin/" type = "text/css" / >
< link rel = "stylesheet" type = "text/css" href = "/tests/SimpleTest/test.css" / >
2016-11-10 01:06:32 +03:00
< script type = "text/javascript" src = "/tests/SimpleTest/SimpleTest.js" > < / script >
< script type = "text/javascript" src = "/tests/SimpleTest/EventUtils.js" > < / script >
2016-03-18 15:48:22 +03:00
< / head >
< body id = "body" xmlns = "http://www.w3.org/1999/xhtml" >
< p id = "display" / > < div id = "content" style = "display: none" / > < pre id = "test" / >
2009-09-13 17:13:16 +04:00
2016-03-18 15:48:22 +03:00
< script > < ! [ C D A T A [
2009-09-13 17:13:16 +04:00
2015-08-07 17:04:01 +03:00
SimpleTest.expectAssertions(6, 12);
2013-02-26 06:39:21 +04:00
2009-09-13 17:13:16 +04:00
SimpleTest.waitForExplicitFinish();
var captureRetargetMode = false;
var cachedMouseDown = null;
var previousWidth = 0, originalWidth = 0;
2010-02-20 19:06:58 +03:00
var loadInWindow = false;
2009-09-13 17:13:16 +04:00
2016-12-31 05:47:25 +03:00
function splitterCallback(adjustment) {
2009-09-13 17:13:16 +04:00
var newWidth = Number($("leftbox").width); // getBoundingClientRect().width;
var expectedWidth = previousWidth + adjustment;
if (expectedWidth > $("splitterbox").getBoundingClientRect().width)
expectedWidth = $("splitterbox").getBoundingClientRect().width - $("splitter").getBoundingClientRect().width;
is(newWidth, expectedWidth, "splitter left box size (" + adjustment + ")");
previousWidth = newWidth;
}
2016-12-31 05:47:25 +03:00
function selectionCallback(adjustment) {
2009-09-13 17:13:16 +04:00
if (adjustment == 4000) {
is(frames[0].getSelection().toString(), "This is some text", "selection after drag (" + adjustment + ")");
ok(frames[0].scrollY > 40, "selection caused scroll down (" + adjustment + ")");
2016-12-31 05:47:25 +03:00
} else {
2009-09-13 17:13:16 +04:00
if (adjustment == 0) {
is(frames[0].getSelection().toString(), ".", "selection after drag (" + adjustment + ")");
}
is(frames[0].scrollY, 0, "selection scrollY (" + adjustment + ")");
}
}
2016-12-31 05:47:25 +03:00
function framesetCallback(adjustment) {
2009-09-13 17:13:16 +04:00
var newWidth = frames[1].frames[0].document.documentElement.clientWidth;
var expectedWidth = originalWidth + adjustment;
if (adjustment == 0)
expectedWidth = originalWidth - 12;
else if (expectedWidth >= 4000)
expectedWidth = originalWidth * 2 - 2;
2016-03-18 21:29:56 +03:00
ok(Math.abs(newWidth - expectedWidth) < = 1, "frameset after drag (" + adjustment + "), new width " + newWidth + ", expected " + expectedWidth);
2009-09-13 17:13:16 +04:00
}
2009-09-18 00:33:29 +04:00
var otherWindow = null;
2016-12-31 05:47:25 +03:00
function selectionScrollCheck() {
2009-09-18 00:33:29 +04:00
var element = otherWindow.document.documentElement;
var count = 0;
function selectionScrollDone() {
// wait for 6 scroll events to occur
if (count++ < 6 )
return;
2017-01-17 13:50:25 +03:00
otherWindow.removeEventListener("scroll", selectionScrollDone);
2009-09-18 00:33:29 +04:00
2010-10-25 18:06:30 +04:00
var selectedText = otherWindow.getSelection().toString().replace(/\r/g, "");
is(selectedText, "One\n\nTwo", "text is selected");
2016-05-05 19:28:09 +03:00
// should have scrolled 20 pixels from the mousemove above and at least 6
// extra 20-pixel increments from the selection scroll timer. "At least 6"
// because we waited for 6 scroll events but multiple scrolls could get
2017-01-18 19:10:49 +03:00
// coalesced into a single scroll event, and paints could be delayed when
// the window loads when the compositor is busy. As a result, we have no
// real guarantees about the upper bound here, and as the upper bound is
// not important for what we're testing here, we don't check it.
2016-05-05 19:28:09 +03:00
var scrollY = otherWindow.scrollY;
2017-01-18 19:10:49 +03:00
info(`Scrolled ${scrollY} pixels`);
2016-05-05 19:28:09 +03:00
ok(scrollY >= 140, "selection scroll position after timer is at least 140");
ok((scrollY % 20) == 0, "selection scroll position after timer is multiple of 20");
2009-09-18 00:33:29 +04:00
synthesizeMouse(element, 4, otherWindow.innerHeight + 25, { type: "mouseup" }, otherWindow);
disableNonTestMouseEvents(false);
otherWindow.close();
2010-02-20 19:06:58 +03:00
if (loadInWindow) {
SimpleTest.finish();
2016-12-31 05:47:25 +03:00
} else {
2010-02-20 19:06:58 +03:00
// now try again, but open the page in a new window
loadInWindow = true;
synthesizeMouse(document.getElementById("custom"), 2, 2, { type: "mousedown" });
// check to ensure that selection dragging scrolls the right scrollable area
2010-10-25 18:06:30 +04:00
otherWindow = window.open("data:text/html,< html > < p > One< / p > < p style = 'margin-top: 200px;' > Two< / p > < p style = 'margin-top: 4000px' > This is some text< / p > < / html > ", "_blank", "width=200,height=200,scrollbars=yes");
2016-03-18 21:29:56 +03:00
SimpleTest.waitForFocus(selectionScrollCheck, otherWindow);
2010-02-20 19:06:58 +03:00
}
2009-09-18 00:33:29 +04:00
}
2016-11-12 02:22:34 +03:00
SimpleTest.executeSoon(function() {
2010-02-20 19:06:58 +03:00
disableNonTestMouseEvents(true);
synthesizeMouse(element, 2, 2, { type: "mousedown" }, otherWindow);
2010-10-25 18:06:30 +04:00
synthesizeMouse(element, 100, otherWindow.innerHeight + 20, { type: "mousemove" }, otherWindow);
2017-01-17 13:50:25 +03:00
otherWindow.addEventListener("scroll", selectionScrollDone);
2010-02-20 19:06:58 +03:00
});
2009-09-18 00:33:29 +04:00
}
2016-12-31 05:47:25 +03:00
function runTests() {
2009-09-13 17:13:16 +04:00
previousWidth = $("leftbox").getBoundingClientRect().width;
runCaptureTest($("splitter"), splitterCallback);
var custom = document.getElementById("custom");
runCaptureTest(custom);
synthesizeMouseExpectEvent($("rightbox"), 2, 2, { type: "mousemove" },
$("rightbox"), "mousemove", "setCapture and releaseCapture");
custom.setCapture();
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
$("leftbox"), "mousemove", "setCapture fails on non mousedown");
var custom2 = document.getElementById("custom2");
synthesizeMouse(custom2, 2, 2, { type: "mousedown" });
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
$("leftbox"), "mousemove", "document.releaseCapture releases capture");
var custom3 = document.getElementById("custom3");
synthesizeMouse(custom3, 2, 2, { type: "mousedown" });
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
$("leftbox"), "mousemove", "element.releaseCapture releases capture");
var custom4 = document.getElementById("custom4");
synthesizeMouse(custom4, 2, 2, { type: "mousedown" });
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
custom4, "mousemove", "element.releaseCapture during mousemove before releaseCapture");
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
$("leftbox"), "mousemove", "element.releaseCapture during mousemove after releaseCapture");
var custom5 = document.getElementById("custom5");
runCaptureTest(custom5);
captureRetargetMode = true;
runCaptureTest(custom5);
captureRetargetMode = false;
2009-09-28 18:17:01 +04:00
var custom6 = document.getElementById("custom6");
synthesizeMouse(custom6, 2, 2, { type: "mousedown" });
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
$("leftbox"), "mousemove", "setCapture only works on elements in documents");
synthesizeMouse(custom6, 2, 2, { type: "mouseup" });
2010-02-03 05:07:08 +03:00
// test that mousedown on an image with setCapture followed by a big enough
// mouse move does not start a drag (bug 517737)
var image = document.getElementById("image");
2016-03-18 21:29:56 +03:00
image.scrollIntoView();
2010-02-03 05:07:08 +03:00
synthesizeMouse(image, 2, 2, { type: "mousedown" });
synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },
image, "mousemove", "setCapture works on images");
synthesizeMouse(image, 2, 2, { type: "mouseup" });
2016-08-24 00:38:57 +03:00
window.scroll(0, 0);
2016-03-18 21:29:56 +03:00
2010-11-25 04:35:01 +03:00
// save scroll
var scrollX = parent ? parent.scrollX : 0;
var scrollY = parent ? parent.scrollY : 0;
// restore scroll
if (parent) parent.scroll(scrollX, scrollY);
2011-07-02 04:52:32 +04:00
// frames[0].getSelection().collapseToStart();
2009-09-28 18:17:01 +04:00
var body = frames[0].document.body;
var fixed = frames[0].document.getElementById("fixed");
function captureOnBody() { body.setCapture() }
body.addEventListener("mousedown", captureOnBody, true);
synthesizeMouse(body, 8, 8, { type: "mousedown" }, frames[0]);
body.removeEventListener("mousedown", captureOnBody, true);
synthesizeMouseExpectEvent(fixed, 2, 2, { type: "mousemove" },
fixed, "mousemove", "setCapture on body retargets to root node", frames[0]);
synthesizeMouse(body, 8, 8, { type: "mouseup" }, frames[0]);
2009-09-13 17:13:16 +04:00
previousWidth = frames[1].frames[0].document.documentElement.clientWidth;
originalWidth = previousWidth;
runCaptureTest(frames[1].document.documentElement.lastChild, framesetCallback);
2009-10-05 18:00:05 +04:00
// ensure that clicking on an element where the frame disappears doesn't crash
synthesizeMouse(frames[2].document.getElementById("input"), 8, 8, { type: "mousedown" }, frames[2]);
synthesizeMouse(frames[2].document.getElementById("input"), 8, 8, { type: "mouseup" }, frames[2]);
2016-03-18 21:29:56 +03:00
var select = document.getElementById("select");
select.scrollIntoView();
2009-10-09 17:35:20 +04:00
synthesizeMouse(document.getElementById("option3"), 2, 2, { type: "mousedown" });
synthesizeMouse(document.getElementById("option3"), 2, 1000, { type: "mousemove" });
2015-07-14 03:15:47 +03:00
is(select.selectedIndex, 2, "scroll select");
2009-10-09 17:35:20 +04:00
synthesizeMouse(document.getElementById("select"), 2, 2, { type: "mouseup" });
2016-03-18 21:29:56 +03:00
window.scroll(0, 0);
2009-10-09 17:35:20 +04:00
2010-02-20 19:06:58 +03:00
synthesizeMouse(custom, 2, 2, { type: "mousedown" });
// check to ensure that selection dragging scrolls the right scrollable area.
// This should open the page in a new tab.
2010-10-25 18:06:30 +04:00
var topPos = window.innerHeight;
otherWindow = window.open("data:text/html,< html > < p > One< / p > < p style = 'margin-top: " + topPos + "' > Two< / p > < p style = 'margin-top: 4000px' > This is some text< / p > < / html > ", "_blank");
2016-03-18 21:29:56 +03:00
SimpleTest.waitForFocus(selectionScrollCheck, otherWindow);
2009-09-13 17:13:16 +04:00
}
2016-12-31 05:47:25 +03:00
function runCaptureTest(element, callback) {
2009-09-13 17:13:16 +04:00
var expectedTarget = null;
var win = element.ownerDocument.defaultView;
function mouseMoved(event) {
is(event.originalTarget, expectedTarget,
expectedTarget.id + " target for point " + event.clientX + "," + event.clientY);
}
2017-01-17 13:50:25 +03:00
win.addEventListener("mousemove", mouseMoved);
2009-09-13 17:13:16 +04:00
expectedTarget = element;
var basepoint = element.localName == "frameset" ? 50 : 2;
synthesizeMouse(element, basepoint, basepoint, { type: "mousedown" }, win);
// in setCapture(true) mode, all events should fire on custom5. In
// setCapture(false) mode, events can fire at a descendant
if (expectedTarget == $("custom5") & & !captureRetargetMode)
expectedTarget = $("custom5spacer");
// releaseCapture should do nothing for an element which isn't capturing
$("splitterbox").releaseCapture();
synthesizeMouse(element, basepoint + 2, basepoint + 2, { type: "mousemove" }, win);
if (callback)
callback(2);
if (expectedTarget == $("custom5spacer") & & !captureRetargetMode)
expectedTarget = $("custom5inner");
2009-09-17 20:59:42 +04:00
if (element.id == "b") {
var tooltip = document.getElementById("tooltip");
tooltip.openPopup();
tooltip.hidePopup();
}
2009-09-13 17:13:16 +04:00
synthesizeMouse(element, basepoint + 25, basepoint + 25, { type: "mousemove" }, win);
if (callback)
callback(25);
expectedTarget = element.localName == "b" ? win.document.documentElement : element;
synthesizeMouse(element, basepoint + 4000, basepoint + 4000, { type: "mousemove" }, win);
if (callback)
callback(4000);
synthesizeMouse(element, basepoint - 12, basepoint - 12, { type: "mousemove" }, win);
if (callback)
callback(-12);
expectedTarget = element.localName == "frameset" ? element : win.document.documentElement;
synthesizeMouse(element, basepoint + 30, basepoint + 30, { type: "mouseup" }, win);
synthesizeMouse(win.document.documentElement, 2, 2, { type: "mousemove" }, win);
if (callback)
callback(0);
2017-01-17 13:50:25 +03:00
win.removeEventListener("mousemove", mouseMoved);
2009-09-13 17:13:16 +04:00
}
2009-09-17 20:59:42 +04:00
SimpleTest.waitForFocus(runTests);
2009-09-13 17:13:16 +04:00
]]>
< / script >
2016-03-18 15:48:22 +03:00
< xul:vbox xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align = "start" >
< tooltip id = "tooltip" >
< label value = "Test" / >
< / tooltip >
< hbox id = "splitterbox" style = "margin-top: 5px;" onmousedown = "this.setCapture()" >
< hbox id = "leftbox" width = "100" flex = "1" / >
< splitter id = "splitter" height = "5" / >
< hbox id = "rightbox" width = "100" flex = "1" / >
< / hbox >
< vbox id = "custom" width = "10" height = "10" onmousedown = "this.setCapture(); cachedMouseDown = event;" / >
< vbox id = "custom2" width = "10" height = "10" onmousedown = "this.setCapture(); document.releaseCapture();" / >
< vbox id = "custom3" width = "10" height = "10" onmousedown = "this.setCapture(); this.releaseCapture();" / >
< vbox id = "custom4" width = "10" height = "10" onmousedown = "this.setCapture();"
onmousemove="this.releaseCapture();"/>
< hbox id = "custom5" width = "40" height = "40"
onmousedown="this.setCapture(captureRetargetMode);">
< spacer id = "custom5spacer" width = "5" / >
< hbox id = "custom5inner" width = "35" height = "35" / >
< / hbox >
< vbox id = "custom6" width = "10" height = "10"
onmousedown="document.createElement('hbox').setCapture();"/>
< / xul:vbox >
2009-09-13 17:13:16 +04:00
< iframe width = "100" height = "100"
2009-09-28 18:17:01 +04:00
src="data:text/html,%3Cbody style%3D'font-size%3A 40pt%3B'%3E.%3Cb id%3D'b'%3EThis%3C/b%3E is some text%3Cdiv id='fixed' style='position: fixed; left: 55px; top: 5px; width: 10px; height: 10px'%3E.%3C/div%3E%3C/body%3E"/>
2009-09-13 17:13:16 +04:00
< iframe width = "100" height = "100"
src="data:text/html,%3Cframeset cols='50%, 50%'%3E%3Cframe src='about:blank'%3E%3Cframe src='about:blank'%3E%3C/frameset%3E"/>
2009-10-05 18:00:05 +04:00
< iframe width = "100" height = "100"
2010-02-22 15:17:35 +03:00
src="data:text/html,%3Cinput id='input' onfocus='this.style.display = " none" ' style='float: left;'>"/>
2009-10-09 17:35:20 +04:00
< select id = "select" xmlns = "http://www.w3.org/1999/xhtml" size = "4" >
< option id = "option1" > One< / option >
< option id = "option2" > Two< / option >
< option id = "option3" > Three< / option >
< option id = "option4" > Four< / option >
< option id = "option5" > Five< / option >
< option id = "option6" > Six< / option >
< option id = "option7" > Seven< / option >
< option id = "option8" > Eight< / option >
< option id = "option9" > Nine< / option >
< option id = "option10" > Ten< / option >
< / select >
2009-09-13 17:13:16 +04:00
2010-02-03 05:07:08 +03:00
< img id = "image" xmlns = "http://www.w3.org/1999/xhtml"
onmousedown="this.setCapture();" onmouseup="this.releaseCapture();"
ondragstart="ok(false, 'should not get a drag when a setCapture is active');"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"/>
2009-09-13 17:13:16 +04:00
< / body >
2016-03-18 15:48:22 +03:00
< / html >