11 files changed, 558 insertions, 0 deletions
diff --git a/toolkit/content/tests/mochitest/file_mousecapture.html b/toolkit/content/tests/mochitest/file_mousecapture.html
new file mode 100644
index 0000000000..bc3d1869f6
--- /dev/null
+++ b/toolkit/content/tests/mochitest/file_mousecapture.html
@@ -0,0 +1 @@
+<html><p>One</p><p style='margin-top: 200px;'>Two</p><p style='margin-top: 4000px'>This is some text</p></html>
diff --git a/toolkit/content/tests/mochitest/file_mousecapture2.html b/toolkit/content/tests/mochitest/file_mousecapture2.html
new file mode 100644
index 0000000000..e746cf7807
--- /dev/null
+++ b/toolkit/content/tests/mochitest/file_mousecapture2.html
@@ -0,0 +1,8 @@
+<html><p>One</p>
+<p id="myStyle">Two</p>
+<p style='margin-top: 4000px'>This is some text</p>
+</html>
+
+<script type="application/javascript">
+document.getElementById("myStyle").style.marginTop = new URL(location.href).searchParams.get("topPos");
+</script>
diff --git a/toolkit/content/tests/mochitest/file_mousecapture3.html b/toolkit/content/tests/mochitest/file_mousecapture3.html
new file mode 100644
index 0000000000..ee3fad455a
--- /dev/null
+++ b/toolkit/content/tests/mochitest/file_mousecapture3.html
@@ -0,0 +1 @@
+<body style='font-size: 40pt;'>.<b id='b'>This</b> is some text<div id='fixed' style='position: fixed; left: 55px; top: 5px; width: 10px; height: 10px'>.</div></body>
diff --git a/toolkit/content/tests/mochitest/file_mousecapture4.html b/toolkit/content/tests/mochitest/file_mousecapture4.html
new file mode 100644
index 0000000000..fbf30589c1
--- /dev/null
+++ b/toolkit/content/tests/mochitest/file_mousecapture4.html
@@ -0,0 +1 @@
+<frameset cols='50%, 50%'><frame src='about:blank'><frame src='about:blank'></frameset>
diff --git a/toolkit/content/tests/mochitest/file_mousecapture5.html b/toolkit/content/tests/mochitest/file_mousecapture5.html
new file mode 100644
index 0000000000..bc632b6156
--- /dev/null
+++ b/toolkit/content/tests/mochitest/file_mousecapture5.html
@@ -0,0 +1 @@
+<input id='input' onfocus='this.style.display = "none"' style='float: left;'>
diff --git a/toolkit/content/tests/mochitest/gizmo.mp4 b/toolkit/content/tests/mochitest/gizmo.mp4
new file mode 100644
index 0000000000..87efad5ade
--- /dev/null
+++ b/toolkit/content/tests/mochitest/gizmo.mp4
diff --git a/toolkit/content/tests/mochitest/mochitest.ini b/toolkit/content/tests/mochitest/mochitest.ini
new file mode 100644
index 0000000000..e635d2f103
--- /dev/null
+++ b/toolkit/content/tests/mochitest/mochitest.ini
@@ -0,0 +1,20 @@
+[test_bug1407085.html]
+
+[test_autocomplete_change_after_focus.html]
+skip-if = toolkit == "android"
+[test_mousecapture.xhtml]
+allow_xul_xbl = true
+support-files =
+  file_mousecapture.html
+  file_mousecapture2.html
+  file_mousecapture3.html
+  file_mousecapture4.html
+  file_mousecapture5.html
+skip-if =
+  toolkit == "android"
+  xorigin  # SecurityError: Permission denied to access property "scrollX" on cross-origin object at runTests@http://mochi.test:8888/tests/toolkit/content/tests/mochitest/test_mousecapture.xhtml:170:17, inconsistent fail/pass
+  http3
+[test_video_control_no_control_overlay.html]
+support-files =
+  gizmo.mp4
+skip-if = toolkit != "android"
diff --git a/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
new file mode 100644
index 0000000000..c9ee4870e9
--- /dev/null
+++ b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=998893
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 998893 - Ensure that input.value changes affect autocomplete</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="text/javascript">
+  /** Test for Bug 998893 **/
+  add_task(async function waitForFocus() {
+    await new Promise(resolve => SimpleTest.waitForFocus(resolve));
+  });
+
+  add_task(async function setup() {
+    await new Promise(resolve => {
+      let chromeScript = SpecialPowers.loadChromeScript(function() {
+        /* eslint-env mozilla/chrome-script */
+        const {FormHistory} = ChromeUtils.import("resource://gre/modules/FormHistory.jsm");
+        FormHistory.update([
+          { op: "bump", fieldname: "field1", value: "Default text option" },
+          { op: "bump", fieldname: "field1", value: "New value option" },
+        ]).then(() => {
+          sendAsyncMessage("Test:Resume");
+        });
+      });
+
+      chromeScript.addMessageListener("Test:Resume", function resumeListener() {
+        chromeScript.removeMessageListener("Test:Resume", resumeListener);
+        chromeScript.destroy();
+        resolve();
+      });
+    });
+  });
+
+  add_task(async function runTest() {
+    let promisePopupShown = new Promise(resolve => {
+      let chromeScript = SpecialPowers.loadChromeScript(function() {
+        /* eslint-env mozilla/chrome-script */
+        let window = Services.wm.getMostRecentWindow("navigator:browser");
+        let popup = window.document.getElementById("PopupAutoComplete");
+        popup.addEventListener("popupshown", function() {
+          sendAsyncMessage("Test:Resume");
+        }, {once: true});
+      });
+
+      chromeScript.addMessageListener("Test:Resume", function resumeListener() {
+        chromeScript.removeMessageListener("Test:Resume", resumeListener);
+        chromeScript.destroy();
+        resolve();
+      });
+    });
+
+    let field = document.getElementById("field1");
+
+    let promiseFieldFocus = new Promise(resolve => {
+      field.addEventListener("focus", function onFocus() {
+        info("field focused");
+        field.value = "New value";
+        sendKey("DOWN");
+        resolve();
+      });
+    });
+
+    let handleEnterPromise = new Promise(resolve => {
+      function handleEnter(evt) {
+        if (evt.keyCode != KeyEvent.DOM_VK_RETURN) {
+          return;
+        }
+        info("RETURN received for phase: " + evt.eventPhase);
+        is(evt.target.value, "New value option", "Check that the correct autocomplete entry was used");
+        resolve();
+      }
+
+      SpecialPowers.addSystemEventListener(field, "keypress", handleEnter, true);
+    });
+
+    field.focus();
+
+    await promiseFieldFocus;
+
+    await promisePopupShown;
+
+    synthesizeKey("KEY_ArrowDown");
+    synthesizeKey("KEY_Enter");
+    synthesizeKey("KEY_Enter");
+
+    await handleEnterPromise;
+  });
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=998893">Mozilla Bug 998893</a>
+<p id="display"><input id="field1" value="Default text"></p>
+<div id="content" style="display: none"></div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/toolkit/content/tests/mochitest/test_bug1407085.html b/toolkit/content/tests/mochitest/test_bug1407085.html
new file mode 100644
index 0000000000..17fc2f8a3b
--- /dev/null
+++ b/toolkit/content/tests/mochitest/test_bug1407085.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for Bug 1407085</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script 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">
+  <input id="input" value="original value">
+</div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.waitForFocus(runTests);
+
+function runTests() {
+  let input = document.getElementById("input");
+  input.focus();
+  input.addEventListener("keydown", () => {
+    input.value = "new value";
+  }, { once: true });
+  synthesizeKey("KEY_Escape");
+  is(input.value, "new value",
+     "New <input> value changed by an Escape key event listener shouldn't be " +
+     "overwritten by original value even if Escape key is pressed");
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/toolkit/content/tests/mochitest/test_mousecapture.xhtml b/toolkit/content/tests/mochitest/test_mousecapture.xhtml
new file mode 100644
index 0000000000..15576ab45b
--- /dev/null
+++ b/toolkit/content/tests/mochitest/test_mousecapture.xhtml
@@ -0,0 +1,351 @@
+<?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>
diff --git a/toolkit/content/tests/mochitest/test_video_control_no_control_overlay.html b/toolkit/content/tests/mochitest/test_video_control_no_control_overlay.html
new file mode 100644
index 0000000000..6a079d77dc
--- /dev/null
+++ b/toolkit/content/tests/mochitest/test_video_control_no_control_overlay.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Show 'click-to-play' icon on blocked autoplay media</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+/**
+ * This test is used to check whether 'click-to-play' icon would be showed
+ * correctly when autoplay media is blocked.
+ */
+add_task(async function testShowClickToPlayWhenAutoplayMediaGetsBlocked() {
+  info(`setting testing pref`);
+  await SpecialPowers.pushPrefEnv(
+    {"set": [["media.autoplay.default", 1 /* BLOCKED */]]}
+  );
+
+  info(`create video and load resource`);
+  let video = document.createElement('video');
+  video.src = "gizmo.mp4";
+  document.body.appendChild(video);
+
+  info(`blocking autoplay would reject media to play`);
+  ok(await video.play().then(_ => false, _ => true), "Play got rejected");
+
+  info(`'click-to-play' should display when autoplay media is blocked`);
+  const button = SpecialPowers.wrap(video).openOrClosedShadowRoot.querySelector(".clickToPlay");
+  ok(!button.hidden, "Click-to-play button is not hidden");
+});
+
+</script>
+</head>
+<body>
+</body>
+</html>