test_mousecapture.xhtml

mozilla-central/toolkit/content/tests/mochitest/test_mousecapture.xhtml (file symbol)

Enable keyboard shortcuts

Source code

File a bug in Core :: DOM: UI Events & Focus Handling

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

This test gets skipped with pattern: os == 'android' OR xorigin OR http3 OR http2
This test failed 1 times in the preceding 30 days. quicksearch this test
Manifest: toolkit/content/tests/mochitest/mochitest.toml

<?xml version="1.0"?>

<!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/global.css" type="text/css"/>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script src="/tests/SimpleTest/EventUtils.js"></script>

</head>

<body id="body" xmlns="http://www.w3.org/1999/xhtml">

  <p id="display"/><div id="content" style="display: none"/><pre id="test"/>

<script><![CDATA[

SimpleTest.expectAssertions(6, 12);

SimpleTest.waitForExplicitFinish();

const TEST_PATH = location.href.replace("test_mousecapture.xhtml", "");

var captureRetargetMode = false;

var cachedMouseDown = null;

var previousWidth = 0, originalWidth = 0;

var loadInWindow = false;

/**

 * We'll make sure to suppress any dragstart events and prevent them

 * from reaching the widget layer to avoid this assertion:

 * https://searchfox.org/mozilla-central/rev/47aea2f603cc18144afcedbd604a418f11e90f9b/widget/nsBaseDragService.cpp#341-355

*/

addEventListener("dragstart", e => {

  e.preventDefault();

  e.stopPropagation();

});

function splitterCallback(adjustment) {

  var newWidth = parseInt($("leftbox").style.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;

function selectionCallback(adjustment) {

  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 + ")");

  } else {

    if (adjustment == 0) {

      is(frames[0].getSelection().toString(), ".", "selection after drag (" + adjustment + ")");

    is(frames[0].scrollY, 0, "selection scrollY (" + adjustment + ")");

function framesetCallback(adjustment) {

  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;

  ok(Math.abs(newWidth - expectedWidth) <= 1, "frameset after drag (" + adjustment + "), new width " + newWidth + ", expected " + expectedWidth);

var otherWindow = null;

function selectionScrollCheck() {

  var element = otherWindow.document.documentElement;

  var count = 0;

  let previousScrollPosition = 0;

  function selectionScrollDone() {

    // Don't count unchanged scroll position.

    // There's a bug that scroll events get fired during reconstructing scroll

    // frames even if the scroll position is unchanged (bug 1825470). We need to

    // ignore the unchanged scroll events here.

    if (otherWindow.scrollY == previousScrollPosition) {

      return;

    previousScrollPosition = otherWindow.scrollY;

    // wait for 6 scroll events to occur

    if (count++ < 6) {

      return;

    otherWindow.removeEventListener("scroll", selectionScrollDone);

    var selectedText = otherWindow.getSelection().toString().replace(/\r/g, "");

    // We trim the end of the string because, per the below comment, we might

    // select additional newlines, and that's OK.

    is(selectedText.trimEnd(), "One\n\nTwo", "text is selected");

    // 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

    // 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.

    var scrollY = otherWindow.scrollY;

    info(`Scrolled ${scrollY} pixels`);

    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");

    synthesizeMouse(element, 4, otherWindow.innerHeight + 25, { type: "mouseup" }, otherWindow);

    disableNonTestMouseEvents(false);

    otherWindow.close();

    if (loadInWindow) {

      SimpleTest.finish();

    } else {

      // 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

      otherWindow = window.open(TEST_PATH + "file_mousecapture.html", "_blank", "width=200,height=200,scrollbars=yes");

      SimpleTest.waitForFocus(selectionScrollCheck, otherWindow);

  SimpleTest.executeSoon(function() {

    disableNonTestMouseEvents(true);

    synthesizeMouse(element, 2, 2, { type: "mousedown" }, otherWindow);

    synthesizeMouse(element, 100, otherWindow.innerHeight + 20, { type: "mousemove" }, otherWindow);

    otherWindow.addEventListener("scroll", selectionScrollDone);

});

function runTests() {

  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;

  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" });

  // 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");

  image.scrollIntoView();

  synthesizeMouse(image, 2, 2, { type: "mousedown" });

  synthesizeMouseExpectEvent($("leftbox"), 2, 2, { type: "mousemove" },

                             image, "mousemove", "setCapture works on images");

  synthesizeMouse(image, 2, 2, { type: "mouseup" });

  window.scroll(0, 0);

  // save scroll

  var scrollX = parent ? parent.scrollX : 0;

  var scrollY = parent ? parent.scrollY : 0;

  // restore scroll

  if (parent) parent.scroll(scrollX, scrollY);

//  frames[0].getSelection().collapseToStart();

  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]);

  previousWidth = frames[1].frames[0].document.documentElement.clientWidth;

  originalWidth = previousWidth;

  runCaptureTest(frames[1].document.documentElement.lastElementChild, framesetCallback);

  // 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]);

  var select = document.getElementById("select");

  select.scrollIntoView();

  synthesizeMouse(document.getElementById("option3"), 2, 2, { type: "mousedown" });

  synthesizeMouse(document.getElementById("option3"), 2, 1000, { type: "mousemove" });

  is(select.selectedIndex, 2, "scroll select");

  synthesizeMouse(document.getElementById("select"), 2, 2, { type: "mouseup" });

  window.scroll(0, 0);

  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.

  var topPos = window.innerHeight;

  otherWindow = window.open(TEST_PATH + "file_mousecapture2.html?topPos=" + topPos, "_blank");

  SimpleTest.waitForFocus(selectionScrollCheck, otherWindow);

function runCaptureTest(element, callback) {

  var expectedTarget = null;

  // ownerGlobal doesn't exist in content privileged windows.

  // eslint-disable-next-line mozilla/use-ownerGlobal

  var win = element.ownerDocument.defaultView;

  function mouseMoved(event) {

    is(event.originalTarget, expectedTarget,

       expectedTarget.id + " target for point " + event.clientX + "," + event.clientY);

  win.addEventListener("mousemove", mouseMoved);

  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");

  if (element.id == "b") {

    var tooltip = document.getElementById("tooltip");

    tooltip.openPopup();

    tooltip.hidePopup();

  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);

  win.removeEventListener("mousemove", mouseMoved);

SimpleTest.waitForFocus(runTests);

]]>

</script>

<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" style="width: 100px; flex: 1 auto"/>

    <splitter id="splitter" style="width: 5px; height: 5px"/>

    <hbox id="rightbox" style="width: 100px; flex: 1 auto"/>

  </hbox>

  <vbox id="custom"  style="width: 10px; height: 10px" onmousedown="this.setCapture(); cachedMouseDown = event;"/>

  <vbox id="custom2" style="width: 10px; height: 10px" onmousedown="this.setCapture(); document.releaseCapture();"/>

  <vbox id="custom3" style="width: 10px; height: 10px" onmousedown="this.setCapture(); this.releaseCapture();"/>

  <vbox id="custom4" style="width: 10px; height: 10px" onmousedown="this.setCapture();"

                                            onmousemove="this.releaseCapture();"/>

  <hbox id="custom5" style="width: 40px; height: 40px"

        onmousedown="this.setCapture(captureRetargetMode);">

    <spacer id="custom5spacer" style="width: 5px"/>

    <hbox id="custom5inner" style="width: 35px; height: 35px"/>

  </hbox>

  <vbox id="custom6" style="width: 10px; height: 10px"

        onmousedown="document.createElement('hbox').setCapture();"/>

</xul:vbox>

  <iframe style="width: 100px; height: 100px" src="file_mousecapture3.html"/>

  <iframe style="width: 100px; height: 100px" src="file_mousecapture4.html"/>

  <iframe style="width: 100px; height: 100px" src="file_mousecapture5.html"/>

  <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>

  <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"/>

</body>

</html>