The Tor Browser / file comparison
comparison: toolkit/content/tests/chrome/test_tooltip.xul
toolkit/content/tests/chrome/test_tooltip.xul
- branch
- TOR_BUG_3246
- changeset 7
- 129ffea94266
equal
deleted
inserted
replaced
| -1:000000000000 | 0:6e7bb3277354 |
|---|---|
| 1 <?xml version="1.0"?> | |
| 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?> | |
| 3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> | |
| 4 | |
| 5 <window title="Tooltip Tests" | |
| 6 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | |
| 7 | |
| 8 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> | |
| 9 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> | |
| 10 <script type="application/javascript" src="popup_shared.js"></script> | |
| 11 | |
| 12 <tooltip id="thetooltip"> | |
| 13 <label id="label" value="This is a tooltip"/> | |
| 14 </tooltip> | |
| 15 | |
| 16 <box tooltiptext="Box Tooltip"> | |
| 17 <button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip" | |
| 18 style="-moz-appearance: none; padding: 0;"/> | |
| 19 <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/> | |
| 20 <!-- remove the native theme and borders to avoid some platform | |
| 21 specific sizing differences --> | |
| 22 <button id="withtooltip" label="Tooltip Element" tooltip="thetooltip" | |
| 23 class="plain" style="-moz-appearance: none; padding: 0;"/> | |
| 24 <iframe id="childframe" type="content" width="10" height="10" | |
| 25 src="http://sectest2.example.org:80/chrome/toolkit/content/tests/chrome/popup_childframe_node.xul"/> | |
| 26 </box> | |
| 27 | |
| 28 <script class="testbody" type="application/javascript"> | |
| 29 <![CDATA[ | |
| 30 | |
| 31 SimpleTest.waitForExplicitFinish(); | |
| 32 var gOriginalWidth = -1; | |
| 33 var gOriginalHeight = -1; | |
| 34 var gButton = null; | |
| 35 | |
| 36 function runTest() | |
| 37 { | |
| 38 startPopupTests(popupTests); | |
| 39 } | |
| 40 | |
| 41 function checkCoords(event) | |
| 42 { | |
| 43 // all but one test open the tooltip at the button location offset by 6 | |
| 44 // in each direction. Test 5 opens it at 4 in each direction. | |
| 45 var mod = (gTestIndex == 5) ? 4 : 6; | |
| 46 | |
| 47 var rect = gButton.getBoundingClientRect(); | |
| 48 var popupstyle = window.getComputedStyle(gButton, ""); | |
| 49 is(event.clientX, Math.round(rect.left + mod), | |
| 50 "step " + (gTestIndex + 1) + " clientX"); | |
| 51 is(event.clientY, Math.round(rect.top + mod), | |
| 52 "step " + (gTestIndex + 1) + " clientY"); | |
| 53 ok(event.screenX > 0, "step " + (gTestIndex + 1) + " screenX"); | |
| 54 ok(event.screenY > 0, "step " + (gTestIndex + 1) + " screenY"); | |
| 55 } | |
| 56 | |
| 57 var popupTests = [ | |
| 58 { | |
| 59 testname: "hover tooltiptext attribute", | |
| 60 events: [ "popupshowing #tooltip", "popupshown #tooltip" ], | |
| 61 test: function() { | |
| 62 gButton = document.getElementById("withtext"); | |
| 63 disableNonTestMouse(true); | |
| 64 synthesizeMouse(gButton, 2, 2, { type: "mouseover" }); | |
| 65 synthesizeMouse(gButton, 4, 4, { type: "mousemove" }); | |
| 66 synthesizeMouse(gButton, 6, 6, { type: "mousemove" }); | |
| 67 disableNonTestMouse(false); | |
| 68 } | |
| 69 }, | |
| 70 { | |
| 71 testname: "close tooltip", | |
| 72 events: [ "popuphiding #tooltip", "popuphidden #tooltip", | |
| 73 "DOMMenuInactive #tooltip" ], | |
| 74 test: function() { | |
| 75 disableNonTestMouse(true); | |
| 76 synthesizeMouse(document.documentElement, 2, 2, { type: "mousemove" }); | |
| 77 disableNonTestMouse(false); | |
| 78 } | |
| 79 }, | |
| 80 { | |
| 81 testname: "hover inherited tooltip", | |
| 82 events: [ "popupshowing #tooltip", "popupshown #tooltip" ], | |
| 83 test: function() { | |
| 84 gButton = document.getElementById("without"); | |
| 85 disableNonTestMouse(true); | |
| 86 synthesizeMouse(gButton, 2, 2, { type: "mouseover" }); | |
| 87 synthesizeMouse(gButton, 4, 4, { type: "mousemove" }); | |
| 88 synthesizeMouse(gButton, 6, 6, { type: "mousemove" }); | |
| 89 disableNonTestMouse(false); | |
| 90 } | |
| 91 }, | |
| 92 { | |
| 93 testname: "hover tooltip attribute", | |
| 94 events: [ "popuphiding #tooltip", "popuphidden #tooltip", | |
| 95 "DOMMenuInactive #tooltip", | |
| 96 "popupshowing thetooltip", "popupshown thetooltip" ], | |
| 97 test: function() { | |
| 98 gButton = document.getElementById("withtooltip"); | |
| 99 gExpectedTriggerNode = gButton; | |
| 100 disableNonTestMouse(true); | |
| 101 synthesizeMouse(gButton, 2, 2, { type: "mouseover" }); | |
| 102 synthesizeMouse(gButton, 4, 4, { type: "mousemove" }); | |
| 103 synthesizeMouse(gButton, 6, 6, { type: "mousemove" }); | |
| 104 disableNonTestMouse(false); | |
| 105 }, | |
| 106 result: function(testname) { | |
| 107 var tooltip = document.getElementById("thetooltip"); | |
| 108 gExpectedTriggerNode = null; | |
| 109 is(tooltip.triggerNode, gButton, testname + " triggerNode"); | |
| 110 is(document.popupNode, null, testname + " document.popupNode"); | |
| 111 is(document.tooltipNode, gButton, testname + " document.tooltipNode"); | |
| 112 | |
| 113 var child = $("childframe").contentDocument; | |
| 114 var evt = child.createEvent("Event"); | |
| 115 evt.initEvent("click", true, true); | |
| 116 child.documentElement.dispatchEvent(evt); | |
| 117 is(child.documentElement.getAttribute("data"), "xnull", | |
| 118 "cannot get tooltipNode from other document"); | |
| 119 | |
| 120 var buttonrect = document.getElementById("withtooltip").getBoundingClientRect(); | |
| 121 var rect = tooltip.getBoundingClientRect(); | |
| 122 var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), ""); | |
| 123 | |
| 124 is(Math.round(rect.left), | |
| 125 Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 6), | |
| 126 testname + " left position of tooltip"); | |
| 127 is(Math.round(rect.top), | |
| 128 Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 6), | |
| 129 testname + " top position of tooltip"); | |
| 130 | |
| 131 var labelrect = document.getElementById("label").getBoundingClientRect(); | |
| 132 ok(labelrect.right < rect.right, testname + " tooltip width"); | |
| 133 ok(labelrect.bottom < rect.bottom, testname + " tooltip height"); | |
| 134 | |
| 135 gOriginalWidth = rect.right - rect.left; | |
| 136 gOriginalHeight = rect.bottom - rect.top; | |
| 137 } | |
| 138 }, | |
| 139 { | |
| 140 testname: "click to close tooltip", | |
| 141 events: [ "popuphiding thetooltip", "popuphidden thetooltip", | |
| 142 "command withtooltip", "DOMMenuInactive thetooltip" ], | |
| 143 test: function() { | |
| 144 gButton = document.getElementById("withtooltip"); | |
| 145 synthesizeMouse(gButton, 2, 2, { }); | |
| 146 }, | |
| 147 result: function(testname) { | |
| 148 var tooltip = document.getElementById("thetooltip"); | |
| 149 is(tooltip.triggerNode, null, testname + " triggerNode"); | |
| 150 is(document.popupNode, null, testname + " document.popupNode"); | |
| 151 is(document.tooltipNode, null, testname + " document.tooltipNode"); | |
| 152 } | |
| 153 }, | |
| 154 { | |
| 155 testname: "hover tooltip after size increased", | |
| 156 events: [ "popupshowing thetooltip", "popupshown thetooltip" ], | |
| 157 test: function() { | |
| 158 var label = document.getElementById("label"); | |
| 159 label.removeAttribute("value"); | |
| 160 label.textContent = "This is a longer tooltip than before\nIt has multiple lines\nIt is testing tooltip sizing\n"; | |
| 161 gButton = document.getElementById("withtooltip"); | |
| 162 disableNonTestMouse(true); | |
| 163 synthesizeMouse(gButton, 2, 2, { type: "mouseover" }); | |
| 164 synthesizeMouse(gButton, 6, 6, { type: "mousemove" }); | |
| 165 synthesizeMouse(gButton, 4, 4, { type: "mousemove" }); | |
| 166 disableNonTestMouse(false); | |
| 167 }, | |
| 168 result: function(testname) { | |
| 169 var buttonrect = document.getElementById("withtooltip").getBoundingClientRect(); | |
| 170 var rect = document.getElementById("thetooltip").getBoundingClientRect(); | |
| 171 var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), ""); | |
| 172 var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), ""); | |
| 173 | |
| 174 is(Math.round(rect.left), | |
| 175 Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 4), | |
| 176 testname + " left position of tooltip"); | |
| 177 is(Math.round(rect.top), | |
| 178 Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 4), | |
| 179 testname + " top position of tooltip"); | |
| 180 | |
| 181 var labelrect = document.getElementById("label").getBoundingClientRect(); | |
| 182 ok(labelrect.right < rect.right, testname + " tooltip width"); | |
| 183 ok(labelrect.bottom < rect.bottom, testname + " tooltip height"); | |
| 184 | |
| 185 // make sure that the tooltip is larger than it was before by just | |
| 186 // checking against the original height plus an arbitrary 15 pixels | |
| 187 ok(gOriginalWidth + 15 < rect.right - rect.left, testname + " tooltip is wider"); | |
| 188 ok(gOriginalHeight + 15 < rect.bottom - rect.top, testname + " tooltip is taller"); | |
| 189 } | |
| 190 }, | |
| 191 { | |
| 192 testname: "close tooltip with hidePopup", | |
| 193 events: [ "popuphiding thetooltip", "popuphidden thetooltip", | |
| 194 "DOMMenuInactive thetooltip" ], | |
| 195 test: function() { | |
| 196 document.getElementById("thetooltip").hidePopup(); | |
| 197 }, | |
| 198 }, | |
| 199 { | |
| 200 testname: "hover tooltip after size decreased", | |
| 201 events: [ "popupshowing thetooltip", "popupshown thetooltip" ], | |
| 202 autohide: "thetooltip", | |
| 203 test: function() { | |
| 204 var label = document.getElementById("label"); | |
| 205 label.value = "This is a tooltip"; | |
| 206 gButton = document.getElementById("withtooltip"); | |
| 207 disableNonTestMouse(true); | |
| 208 synthesizeMouse(gButton, 2, 2, { type: "mouseover" }); | |
| 209 synthesizeMouse(gButton, 4, 4, { type: "mousemove" }); | |
| 210 synthesizeMouse(gButton, 6, 6, { type: "mousemove" }); | |
| 211 disableNonTestMouse(false); | |
| 212 }, | |
| 213 result: function(testname) { | |
| 214 var buttonrect = document.getElementById("withtooltip").getBoundingClientRect(); | |
| 215 var rect = document.getElementById("thetooltip").getBoundingClientRect(); | |
| 216 var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), ""); | |
| 217 var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), ""); | |
| 218 | |
| 219 is(Math.round(rect.left), | |
| 220 Math.round(buttonrect.left + parseFloat(popupstyle.marginLeft) + 6), | |
| 221 testname + " left position of tooltip"); | |
| 222 is(Math.round(rect.top), | |
| 223 Math.round(buttonrect.top + parseFloat(popupstyle.marginTop) + 6), | |
| 224 testname + " top position of tooltip"); | |
| 225 | |
| 226 var labelrect = document.getElementById("label").getBoundingClientRect(); | |
| 227 ok(labelrect.right < rect.right, testname + " tooltip width"); | |
| 228 ok(labelrect.bottom < rect.bottom, testname + " tooltip height"); | |
| 229 | |
| 230 is(gOriginalWidth, rect.right - rect.left, testname + " tooltip is original width"); | |
| 231 is(gOriginalHeight, rect.bottom - rect.top, testname + " tooltip is original height"); | |
| 232 } | |
| 233 } | |
| 234 | |
| 235 ]; | |
| 236 | |
| 237 SimpleTest.waitForFocus(runTest); | |
| 238 ]]> | |
| 239 </script> | |
| 240 | |
| 241 <body xmlns="http://www.w3.org/1999/xhtml"> | |
| 242 <p id="display"> | |
| 243 </p> | |
| 244 <div id="content" style="display: none"> | |
| 245 </div> | |
| 246 <pre id="test"> | |
| 247 </pre> | |
| 248 </body> | |
| 249 | |
| 250 </window> |
