summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared/test/browser_html_tooltip-03.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/shared/test/browser_html_tooltip-03.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/shared/test/browser_html_tooltip-03.js')
-rw-r--r--devtools/client/shared/test/browser_html_tooltip-03.js155
1 files changed, 155 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_html_tooltip-03.js b/devtools/client/shared/test/browser_html_tooltip-03.js
new file mode 100644
index 000000000..6c189c127
--- /dev/null
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -0,0 +1,155 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_html_tooltip.js */
+
+"use strict";
+
+/**
+ * Test the HTMLTooltip autofocus configuration option.
+ */
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
+ <?xml-stylesheet href="chrome://global/skin/global.css"?>
+ <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
+ <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ title="Tooltip test">
+ <vbox flex="1">
+ <hbox id="box1" flex="1">
+ <textbox></textbox>
+ </hbox>
+ <hbox id="box2" flex="1">test2</hbox>
+ <hbox id="box3" flex="1">
+ <textbox id="box3-input"></textbox>
+ </hbox>
+ <hbox id="box4" flex="1">
+ <textbox id="box4-input"></textbox>
+ </hbox>
+ </vbox>
+ </window>`;
+
+const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
+loadHelperScript("helper_html_tooltip.js");
+
+let useXulWrapper;
+
+add_task(function* () {
+ yield addTab("about:blank");
+ let [, , doc] = yield createHost("bottom", TEST_URI);
+
+ info("Run tests for a Tooltip without using a XUL panel");
+ useXulWrapper = false;
+ yield runTests(doc);
+
+ info("Run tests for a Tooltip with a XUL panel");
+ useXulWrapper = true;
+ yield runTests(doc);
+});
+
+function* runTests(doc) {
+ yield testNoAutoFocus(doc);
+ yield testAutoFocus(doc);
+ yield testAutoFocusPreservesFocusChange(doc);
+}
+
+function* testNoAutoFocus(doc) {
+ yield focusNode(doc, "#box4-input");
+ ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
+
+ info("Test a tooltip without autofocus will not take focus");
+ let tooltip = yield createTooltip(doc, false);
+
+ yield showTooltip(tooltip, doc.getElementById("box1"));
+ ok(doc.activeElement.closest("#box4-input"), "Focus is still in the #box4-input");
+
+ yield hideTooltip(tooltip);
+ yield blurNode(doc, "#box4-input");
+
+ tooltip.destroy();
+}
+
+function* testAutoFocus(doc) {
+ yield focusNode(doc, "#box4-input");
+ ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
+
+ info("Test autofocus tooltip takes focus when displayed, " +
+ "and restores the focus when hidden");
+ let tooltip = yield createTooltip(doc, true);
+
+ yield showTooltip(tooltip, doc.getElementById("box1"));
+ ok(doc.activeElement.closest(".tooltip-content"), "Focus is in the tooltip");
+
+ yield hideTooltip(tooltip);
+ ok(doc.activeElement.closest("#box4-input"), "Focus is in the #box4-input");
+
+ info("Blur the textbox before moving to the next test to reset the state.");
+ yield blurNode(doc, "#box4-input");
+
+ tooltip.destroy();
+}
+
+function* testAutoFocusPreservesFocusChange(doc) {
+ yield focusNode(doc, "#box4-input");
+ ok(doc.activeElement.closest("#box4-input"), "Focus is still in the #box3-input");
+
+ info("Test autofocus tooltip takes focus when displayed, " +
+ "but does not try to restore the active element if it is not focused when hidden");
+ let tooltip = yield createTooltip(doc, true);
+
+ yield showTooltip(tooltip, doc.getElementById("box1"));
+ ok(doc.activeElement.closest(".tooltip-content"), "Focus is in the tooltip");
+
+ info("Move the focus to #box3-input while the tooltip is displayed");
+ yield focusNode(doc, "#box3-input");
+ ok(doc.activeElement.closest("#box3-input"), "Focus moved to the #box3-input");
+
+ yield hideTooltip(tooltip);
+ ok(doc.activeElement.closest("#box3-input"), "Focus is still in the #box3-input");
+
+ info("Blur the textbox before moving to the next test to reset the state.");
+ yield blurNode(doc, "#box3-input");
+
+ tooltip.destroy();
+}
+
+/**
+ * Fpcus the node corresponding to the provided selector in the provided document. Returns
+ * a promise that will resolve when receiving the focus event on the node.
+ */
+function focusNode(doc, selector) {
+ let node = doc.querySelector(selector);
+ let onFocus = once(node, "focus");
+ node.focus();
+ return onFocus;
+}
+
+/**
+ * Blur the node corresponding to the provided selector in the provided document. Returns
+ * a promise that will resolve when receiving the blur event on the node.
+ */
+function blurNode(doc, selector) {
+ let node = doc.querySelector(selector);
+ let onBlur = once(node, "blur");
+ node.blur();
+ return onBlur;
+}
+
+/**
+ * Create an HTMLTooltip instance with the provided autofocus setting.
+ *
+ * @param {Document} doc
+ * Document in which the tooltip should be created
+ * @param {Boolean} autofocus
+ * @return {Promise} promise that will resolve the HTMLTooltip instance created when the
+ * tooltip content will be ready.
+ */
+function* createTooltip(doc, autofocus) {
+ let tooltip = new HTMLTooltip(doc, {autofocus, useXulWrapper});
+ let div = doc.createElementNS(HTML_NS, "div");
+ div.classList.add("tooltip-content");
+ div.style.height = "50px";
+ div.innerHTML = '<input type="text"></input>';
+
+ tooltip.setContent(div, {width: 150, height: 50});
+ return tooltip;
+}