gecko/toolkit/content/tests/widgets/window_tooltip.xul
2007-08-03 07:06:16 -07:00

189 lines
7.2 KiB
XML

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window title="Tooltip Tests"
onfocus="runTests()"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<title>Tooltip Tests</title>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<script type="application/javascript" src="popup_shared.js"></script>
<tooltip id="thetooltip">
<label id="label" value="This is a tooltip"/>
</tooltip>
<box tooltiptext="Box Tooltip">
<button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"/>
<button id="without" label="No Tooltip"/>
<!-- remove the native theme and borders to avoid some platform
specific sizing differences -->
<button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
class="plain" style="-moz-appearance: none;"/>
</box>
<script class="testbody" type="application/javascript">
<![CDATA[
var gOriginalWidth = -1;
var gOriginalHeight = -1;
function runTests()
{
startPopupTests(popupTests);
}
var popupTests = [
{
testname: "hover tooltiptext attribute",
events: [ "popupshowing #tooltip", "popupshown #tooltip" ],
test: function() {
var button = document.getElementById("withtext");
synthesizeMouse(button, 2, 2, { type: "mouseover" });
synthesizeMouse(button, 4, 4, { type: "mousemove" });
synthesizeMouse(button, 6, 6, { type: "mousemove" });
}
},
{
testname: "close tooltip",
events: [ "popuphiding #tooltip", "popuphidden #tooltip",
"DOMMenuInactive #tooltip" ],
test: function() {
synthesizeMouse(document.documentElement, 2, 2, { type: "mousemove" });
},
},
{
testname: "hover inherited tooltip",
events: [ "popupshowing #tooltip", "popupshown #tooltip" ],
test: function() {
var button = document.getElementById("without");
synthesizeMouse(button, 2, 2, { type: "mouseover" });
synthesizeMouse(button, 4, 4, { type: "mousemove" });
synthesizeMouse(button, 6, 6, { type: "mousemove" });
}
},
{
testname: "hover tooltip attribute",
events: [ "popuphiding #tooltip", "popuphidden #tooltip",
"DOMMenuInactive #tooltip",
"popupshowing thetooltip", "popupshown thetooltip" ],
test: function() {
var button = document.getElementById("withtooltip");
synthesizeMouse(button, 2, 2, { type: "mouseover" });
synthesizeMouse(button, 4, 4, { type: "mousemove" });
synthesizeMouse(button, 6, 6, { type: "mousemove" });
},
result: function(testname) {
var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
var rect = document.getElementById("thetooltip").getBoundingClientRect();
var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
is(Math.round(rect.left), Math.round(buttonrect.left) +
parseInt(popupstyle.marginLeft) + 6,
testname + " top position of tooltip");
is(Math.round(rect.top), Math.round(buttonrect.top) +
parseInt(popupstyle.marginTop) + 6,
testname + " top position of tooltip");
var labelrect = document.getElementById("label").getBoundingClientRect();
ok(labelrect.right < rect.right, testname + " tooltip width");
ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
gOriginalWidth = rect.right - rect.left;
gOriginalHeight = rect.bottom - rect.top;
}
},
{
testname: "click to close tooltip",
events: [ "popuphiding thetooltip", "popuphidden thetooltip",
"command withtooltip", "DOMMenuInactive thetooltip" ],
test: function() {
var button = document.getElementById("withtooltip");
synthesizeMouse(button, 2, 2, { });
},
},
{
testname: "hover tooltip after size increased",
events: [ "popupshowing thetooltip", "popupshown thetooltip" ],
test: function() {
var label = document.getElementById("label");
label.removeAttribute("value");
label.textContent = "This is a longer tooltip than before\nIt has multiple lines\nIt is testing tooltip sizing\n";
var button = document.getElementById("withtooltip");
synthesizeMouse(button, 2, 2, { type: "mouseover" });
synthesizeMouse(button, 6, 6, { type: "mousemove" });
synthesizeMouse(button, 4, 4, { type: "mousemove" });
},
result: function(testname) {
var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
var rect = document.getElementById("thetooltip").getBoundingClientRect();
var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), "");
is(Math.round(rect.left), Math.round(buttonrect.left) +
parseInt(popupstyle.marginLeft) + 4,
testname + " top position of tooltip");
is(Math.round(rect.top), Math.round(buttonrect.top) +
parseInt(popupstyle.marginTop) + 4,
testname + " top position of tooltip");
var labelrect = document.getElementById("label").getBoundingClientRect();
ok(labelrect.right < rect.right, testname + " tooltip width");
ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
// make sure that the tooltip is larger than it was before by just
// checking against the original height plus an arbitrary 15 pixels
ok(gOriginalWidth + 15 < rect.right - rect.left, testname + " tooltip is wider");
ok(gOriginalHeight + 15 < rect.bottom - rect.top, testname + " tooltip is taller");
}
},
{
testname: "close tooltip with hidePopup",
events: [ "popuphiding thetooltip", "popuphidden thetooltip",
"DOMMenuInactive thetooltip" ],
test: function() {
document.getElementById("thetooltip").hidePopup();
},
},
{
testname: "hover tooltip after size decreased",
events: [ "popupshowing thetooltip", "popupshown thetooltip" ],
autohide: "thetooltip",
test: function() {
var label = document.getElementById("label");
label.value = "This is a tooltip";
var button = document.getElementById("withtooltip");
synthesizeMouse(button, 2, 2, { type: "mouseover" });
synthesizeMouse(button, 4, 4, { type: "mousemove" });
synthesizeMouse(button, 6, 6, { type: "mousemove" });
},
result: function(testname) {
var buttonrect = document.getElementById("withtooltip").getBoundingClientRect();
var rect = document.getElementById("thetooltip").getBoundingClientRect();
var popupstyle = window.getComputedStyle(document.getElementById("thetooltip"), "");
var buttonstyle = window.getComputedStyle(document.getElementById("withtooltip"), "");
is(Math.round(rect.left), Math.round(buttonrect.left) +
parseInt(popupstyle.marginLeft) + 6,
testname + " top position of tooltip");
is(Math.round(rect.top), Math.round(buttonrect.top) +
parseInt(popupstyle.marginTop) + 6,
testname + " top position of tooltip");
var labelrect = document.getElementById("label").getBoundingClientRect();
ok(labelrect.right < rect.right, testname + " tooltip width");
ok(labelrect.bottom < rect.bottom, testname + " tooltip height");
is(gOriginalWidth, rect.right - rect.left, testname + " tooltip is original width");
is(gOriginalHeight, rect.bottom - rect.top, testname + " tooltip is original height");
}
},
];
]]>
</script>
</window>