1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/tests/chrome/test_tooltip.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,250 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
1.7 +
1.8 +<window title="Tooltip Tests"
1.9 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
1.10 +
1.11 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
1.13 + <script type="application/javascript" src="popup_shared.js"></script>
1.14 +
1.15 +<tooltip id="thetooltip">
1.16 + <label id="label" value="This is a tooltip"/>
1.17 +</tooltip>
1.18 +
1.19 +<box tooltiptext="Box Tooltip">
1.20 + <button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"
1.21 + style="-moz-appearance: none; padding: 0;"/>
1.22 + <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/>
1.23 + <!-- remove the native theme and borders to avoid some platform
1.24 + specific sizing differences -->
1.25 + <button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
1.26 + class="plain" style="-moz-appearance: none; padding: 0;"/>
1.27 + <iframe id="childframe" type="content" width="10" height="10"
1.28 + src="http://sectest2.example.org:80/chrome/toolkit/content/tests/chrome/popup_childframe_node.xul"/>
1.29 +</box>
1.30 +
1.31 +<script class="testbody" type="application/javascript">
1.32 +<![CDATA[
1.33 +
1.34 +SimpleTest.waitForExplicitFinish();
1.35 +var gOriginalWidth = -1;
1.36 +var gOriginalHeight = -1;
1.37 +var gButton = null;
1.38 +
1.39 +function runTest()
1.40 +{
1.41 + startPopupTests(popupTests);
1.42 +}
1.43 +
1.44 +function checkCoords(event)
1.45 +{
1.46 + // all but one test open the tooltip at the button location offset by 6
1.47 + // in each direction. Test 5 opens it at 4 in each direction.
1.48 + var mod = (gTestIndex == 5) ? 4 : 6;
1.49 +
1.50 + var rect = gButton.getBoundingClientRect();
1.51 + var popupstyle = window.getComputedStyle(gButton, "");
1.52 + is(event.clientX, Math.round(rect.left + mod),
1.53 + "step " + (gTestIndex + 1) + " clientX");
1.54 + is(event.clientY, Math.round(rect.top + mod),
1.55 + "step " + (gTestIndex + 1) + " clientY");
1.56 + ok(event.screenX > 0, "step " + (gTestIndex + 1) + " screenX");
1.57 + ok(event.screenY > 0, "step " + (gTestIndex + 1) + " screenY");
1.58 +}
1.59 +
1.60 +var popupTests = [
1.61 +{
1.62 + testname: "hover tooltiptext attribute",
1.63 + events: [ "popupshowing #tooltip", "popupshown #tooltip" ],
1.64 + test: function() {
1.65 + gButton = document.getElementById("withtext");
1.66 + disableNonTestMouse(true);
1.67 + synthesizeMouse(gButton, 2, 2, { type: "mouseover" });
1.68 + synthesizeMouse(gButton, 4, 4, { type: "mousemove" });
1.69 + synthesizeMouse(gButton, 6, 6, { type: "mousemove" });
1.70 + disableNonTestMouse(false);
1.71 + }
1.72 +},
1.73 +{
1.74 + testname: "close tooltip",
1.75 + events: [ "popuphiding #tooltip", "popuphidden #tooltip",
1.76 + "DOMMenuInactive #tooltip" ],
1.77 + test: function() {
1.78 + disableNonTestMouse(true);
1.79 + synthesizeMouse(document.documentElement, 2, 2, { type: "mousemove" });
1.80 + disableNonTestMouse(false);
1.81 + }
1.82 +},
1.83 +{
1.84 + testname: "hover inherited tooltip",
1.85 + events: [ "popupshowing #tooltip", "popupshown #tooltip" ],
1.86 + test: function() {
1.87 + gButton = document.getElementById("without");
1.88 + disableNonTestMouse(true);
1.89 + synthesizeMouse(gButton, 2, 2, { type: "mouseover" });
1.90 + synthesizeMouse(gButton, 4, 4, { type: "mousemove" });
1.91 + synthesizeMouse(gButton, 6, 6, { type: "mousemove" });
1.92 + disableNonTestMouse(false);
1.93 + }
1.94 +},
1.95 +{
1.96 + testname: "hover tooltip attribute",
1.97 + events: [ "popuphiding #tooltip", "popuphidden #tooltip",
1.98 + "DOMMenuInactive #tooltip",
1.99 + "popupshowing thetooltip", "popupshown thetooltip" ],
1.100 + test: function() {
1.101 + gButton = document.getElementById("withtooltip");
1.102 + gExpectedTriggerNode = gButton;
1.103 + disableNonTestMouse(true);
1.104 + synthesizeMouse(gButton, 2, 2, { type: "mouseover" });
1.105 + synthesizeMouse(gButton, 4, 4, { type: "mousemove" });
1.106 + synthesizeMouse(gButton, 6, 6, { type: "mousemove" });
1.107 + disableNonTestMouse(false);
1.108 + },
1.109 + result: function(testname) {
1.110 + var tooltip = document.getElementById("thetooltip");
1.111 + gExpectedTriggerNode = null;
1.112 + is(tooltip.triggerNode, gButton, testname + " triggerNode");
1.113 + is(document.popupNode, null, testname + " document.popupNode");
1.114 + is(document.tooltipNode, gButton, testname + " document.tooltipNode");
1.115 +
1.116 + var child = $("childframe").contentDocument;
1.117 + var evt = child.createEvent("Event");
1.118 + evt.initEvent("click", true, true);
1.119 + child.documentElement.dispatchEvent(evt);
1.120 + is(child.documentElement.getAttribute("data"), "xnull",
1.121 + "cannot get tooltipNode from other document");
1.122 +
1.123 + var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
1.124 + var rect = tooltip.getBoundingClientRect();
1.125 + var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
1.126 +
1.127 + is(Math.round(rect.left),
1.128 + Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 6),
1.129 + testname + " left position of tooltip");
1.130 + is(Math.round(rect.top),
1.131 + Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 6),
1.132 + testname + " top position of tooltip");
1.133 +
1.134 + var labelrect = document.getElementById("label").getBoundingClientRect();
1.135 + ok(labelrect.right < rect.right, testname + " tooltip width");
1.136 + ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
1.137 +
1.138 + gOriginalWidth = rect.right - rect.left;
1.139 + gOriginalHeight = rect.bottom - rect.top;
1.140 + }
1.141 +},
1.142 +{
1.143 + testname: "click to close tooltip",
1.144 + events: [ "popuphiding thetooltip", "popuphidden thetooltip",
1.145 + "command withtooltip", "DOMMenuInactive thetooltip" ],
1.146 + test: function() {
1.147 + gButton = document.getElementById("withtooltip");
1.148 + synthesizeMouse(gButton, 2, 2, { });
1.149 + },
1.150 + result: function(testname) {
1.151 + var tooltip = document.getElementById("thetooltip");
1.152 + is(tooltip.triggerNode, null, testname + " triggerNode");
1.153 + is(document.popupNode, null, testname + " document.popupNode");
1.154 + is(document.tooltipNode, null, testname + " document.tooltipNode");
1.155 + }
1.156 +},
1.157 +{
1.158 + testname: "hover tooltip after size increased",
1.159 + events: [ "popupshowing thetooltip", "popupshown thetooltip" ],
1.160 + test: function() {
1.161 + var label = document.getElementById("label");
1.162 + label.removeAttribute("value");
1.163 + label.textContent = "This is a longer tooltip than before\nIt has multiple lines\nIt is testing tooltip sizing\n";
1.164 + gButton = document.getElementById("withtooltip");
1.165 + disableNonTestMouse(true);
1.166 + synthesizeMouse(gButton, 2, 2, { type: "mouseover" });
1.167 + synthesizeMouse(gButton, 6, 6, { type: "mousemove" });
1.168 + synthesizeMouse(gButton, 4, 4, { type: "mousemove" });
1.169 + disableNonTestMouse(false);
1.170 + },
1.171 + result: function(testname) {
1.172 + var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
1.173 + var rect = document.getElementById("thetooltip").getBoundingClientRect();
1.174 + var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
1.175 + var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), "");
1.176 +
1.177 + is(Math.round(rect.left),
1.178 + Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 4),
1.179 + testname + " left position of tooltip");
1.180 + is(Math.round(rect.top),
1.181 + Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 4),
1.182 + testname + " top position of tooltip");
1.183 +
1.184 + var labelrect = document.getElementById("label").getBoundingClientRect();
1.185 + ok(labelrect.right < rect.right, testname + " tooltip width");
1.186 + ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
1.187 +
1.188 + // make sure that the tooltip is larger than it was before by just
1.189 + // checking against the original height plus an arbitrary 15 pixels
1.190 + ok(gOriginalWidth + 15 < rect.right - rect.left, testname + " tooltip is wider");
1.191 + ok(gOriginalHeight + 15 < rect.bottom - rect.top, testname + " tooltip is taller");
1.192 + }
1.193 +},
1.194 +{
1.195 + testname: "close tooltip with hidePopup",
1.196 + events: [ "popuphiding thetooltip", "popuphidden thetooltip",
1.197 + "DOMMenuInactive thetooltip" ],
1.198 + test: function() {
1.199 + document.getElementById("thetooltip").hidePopup();
1.200 + },
1.201 +},
1.202 +{
1.203 + testname: "hover tooltip after size decreased",
1.204 + events: [ "popupshowing thetooltip", "popupshown thetooltip" ],
1.205 + autohide: "thetooltip",
1.206 + test: function() {
1.207 + var label = document.getElementById("label");
1.208 + label.value = "This is a tooltip";
1.209 + gButton = document.getElementById("withtooltip");
1.210 + disableNonTestMouse(true);
1.211 + synthesizeMouse(gButton, 2, 2, { type: "mouseover" });
1.212 + synthesizeMouse(gButton, 4, 4, { type: "mousemove" });
1.213 + synthesizeMouse(gButton, 6, 6, { type: "mousemove" });
1.214 + disableNonTestMouse(false);
1.215 + },
1.216 + result: function(testname) {
1.217 + var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
1.218 + var rect = document.getElementById("thetooltip").getBoundingClientRect();
1.219 + var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
1.220 + var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), "");
1.221 +
1.222 + is(Math.round(rect.left),
1.223 + Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 6),
1.224 + testname + " left position of tooltip");
1.225 + is(Math.round(rect.top),
1.226 + Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 6),
1.227 + testname + " top position of tooltip");
1.228 +
1.229 + var labelrect = document.getElementById("label").getBoundingClientRect();
1.230 + ok(labelrect.right < rect.right, testname + " tooltip width");
1.231 + ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
1.232 +
1.233 + is(gOriginalWidth, rect.right - rect.left, testname + " tooltip is original width");
1.234 + is(gOriginalHeight, rect.bottom - rect.top, testname + " tooltip is original height");
1.235 + }
1.236 +}
1.237 +
1.238 +];
1.239 +
1.240 +SimpleTest.waitForFocus(runTest);
1.241 +]]>
1.242 +</script>
1.243 +
1.244 +<body xmlns="http://www.w3.org/1999/xhtml">
1.245 +<p id="display">
1.246 +</p>
1.247 +<div id="content" style="display: none">
1.248 +</div>
1.249 +<pre id="test">
1.250 +</pre>
1.251 +</body>
1.252 +
1.253 +</window>
