Source code
Revision control
Copy as Markdown
Other Tools
/* import-globals-from ../widgets/popup_shared.js */
var gMenuPopup = null;
var gTrigger = null;
var gIsMenu = false;
var gScreenX = -1,
gScreenY = -1;
var gCachedEvent = null;
var gCachedEvent2 = null;
function cacheEvent(modifiers) {
var cachedEvent = null;
var mouseFn = function (event) {
cachedEvent = event;
};
window.addEventListener("mousedown", mouseFn);
synthesizeMouse(document.documentElement, 0, 0, modifiers);
window.removeEventListener("mousedown", mouseFn);
return cachedEvent;
}
function runTests() {
if (screen.height < 768) {
ok(
false,
"popup tests are likely to fail for screen heights less than 768 pixels"
);
}
gMenuPopup = document.getElementById("thepopup");
gTrigger = document.getElementById("trigger");
gIsMenu = gTrigger.hasMenu();
// a hacky way to get the screen position of the document. Cache the event
// so that we can use it in calls to openPopup.
gCachedEvent = cacheEvent({ shiftKey: true });
gScreenX = gCachedEvent.screenX;
gScreenY = gCachedEvent.screenY;
gCachedEvent2 = cacheEvent({
altKey: true,
ctrlKey: true,
shiftKey: true,
metaKey: true,
});
startPopupTests(popupTests);
}
var popupTests = [
{
testname: "mouse click on trigger",
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
// for menus, no trigger will be set. For non-menus using the popup
// attribute, the trigger will be set to the node with the popup attribute
gExpectedTriggerNode = gIsMenu ? "notset" : gTrigger;
synthesizeMouse(gTrigger, 4, 4, {});
},
async result(testname) {
gExpectedTriggerNode = null;
// menus are the anchor but non-menus are opened at screen coordinates
is(
gMenuPopup.anchorNode,
gIsMenu ? gTrigger : null,
testname + " anchorNode"
);
// menus are opened internally, but non-menus have a mouse event which
// triggered them
is(
gMenuPopup.triggerNode,
gIsMenu ? null : gTrigger,
testname + " triggerNode"
);
// Popup may have wrong initial size in non e10s mode tests, because
// layout is not yet ready for popup content lazy population on
// popupshowing event.
await new Promise(r =>
requestAnimationFrame(() => requestAnimationFrame(r))
);
// this will be used in some tests to ensure the size doesn't change
var popuprect = gMenuPopup.getBoundingClientRect();
gPopupWidth = Math.round(popuprect.width);
gPopupHeight = Math.round(popuprect.height);
checkActive(gMenuPopup, "", testname);
checkOpen("trigger", testname);
// if a menu, the popup should be opened underneath the menu in the
// 'after_start' position, otherwise it is opened at the mouse position
if (gIsMenu) {
compareEdge(gTrigger, gMenuPopup, "after_start", 0, 0, testname);
}
},
},
{
// check that pressing cursor down while there is no selection
// highlights the first item
testname: "cursor down no selection",
events: ["DOMMenuItemActive item1"],
test() {
synthesizeKey("KEY_ArrowDown");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// check that pressing cursor up wraps and highlights the last item
testname: "cursor up wrap",
events() {
// No wrapping on menus on Mac
return platformIsMac()
? []
: ["DOMMenuItemInactive item1", "DOMMenuItemActive last"];
},
test() {
synthesizeKey("KEY_ArrowUp");
},
result(testname) {
checkActive(gMenuPopup, platformIsMac() ? "item1" : "last", testname);
},
},
{
// check that pressing cursor down wraps and highlights the first item
testname: "cursor down wrap",
condition() {
return !platformIsMac();
},
events: ["DOMMenuItemInactive last", "DOMMenuItemActive item1"],
test() {
synthesizeKey("KEY_ArrowDown");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// check that pressing cursor down highlights the second item
testname: "cursor down",
events: ["DOMMenuItemInactive item1", "DOMMenuItemActive item2"],
test() {
synthesizeKey("KEY_ArrowDown");
},
result(testname) {
checkActive(gMenuPopup, "item2", testname);
},
},
{
// check that pressing cursor up highlights the second item
testname: "cursor up",
events: ["DOMMenuItemInactive item2", "DOMMenuItemActive item1"],
test() {
synthesizeKey("KEY_ArrowUp");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// cursor left should not do anything
testname: "cursor left",
test() {
synthesizeKey("KEY_ArrowLeft");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// cursor right should not do anything
testname: "cursor right",
test() {
synthesizeKey("KEY_ArrowRight");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// check cursor down when a disabled item exists in the menu
testname: "cursor down disabled",
events() {
// On Windows, disabled items are included when navigating, but on
// other platforms, disabled items are skipped over
if (navigator.platform.indexOf("Win") == 0) {
return ["DOMMenuItemInactive item1", "DOMMenuItemActive item2"];
}
return ["DOMMenuItemInactive item1", "DOMMenuItemActive amenu"];
},
test() {
document.getElementById("item2").disabled = true;
synthesizeKey("KEY_ArrowDown");
},
},
{
// check cursor up when a disabled item exists in the menu
testname: "cursor up disabled",
events() {
if (navigator.platform.indexOf("Win") == 0) {
return [
"DOMMenuItemInactive item2",
"DOMMenuItemActive amenu",
"DOMMenuItemInactive amenu",
"DOMMenuItemActive item2",
"DOMMenuItemInactive item2",
"DOMMenuItemActive item1",
];
}
return ["DOMMenuItemInactive amenu", "DOMMenuItemActive item1"];
},
test() {
if (navigator.platform.indexOf("Win") == 0) {
synthesizeKey("KEY_ArrowDown");
}
synthesizeKey("KEY_ArrowUp");
if (navigator.platform.indexOf("Win") == 0) {
synthesizeKey("KEY_ArrowUp");
}
},
},
{
testname: "mouse click outside",
events: [
"popuphiding thepopup",
"popuphidden thepopup",
"DOMMenuItemInactive item1",
"DOMMenuInactive thepopup",
],
test() {
gMenuPopup.hidePopup();
// XXXndeakin event simulation fires events outside of the platform specific
// widget code so the popup capturing isn't handled. Thus, the menu won't
// rollup this way.
// synthesizeMouse(gTrigger, 0, -12, { });
},
result(testname) {
is(gMenuPopup.anchorNode, null, testname + " anchorNode");
is(gMenuPopup.triggerNode, null, testname + " triggerNode");
checkClosed("trigger", testname);
},
},
{
// these tests check to ensure that passing an anchor and position
// puts the popup in the right place
testname: "open popup anchored",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
"topleft topleft",
"topcenter topleft",
"topright topleft",
"leftcenter topright",
"rightcenter topright",
"bottomleft bottomleft",
"bottomcenter bottomleft",
"bottomright bottomleft",
"topleft bottomright",
"bottomcenter bottomright",
"rightcenter topright",
"bottomcenter topcenter",
"rightcenter leftcenter",
],
test(testname, step) {
gExpectedTriggerNode = "notset";
gMenuPopup.openPopup(gTrigger, step, 0, 0, false, false);
},
result(testname, step) {
// no triggerNode because it was opened without passing an event
gExpectedTriggerNode = null;
is(gMenuPopup.anchorNode, gTrigger, testname + " anchorNode");
is(gMenuPopup.triggerNode, null, testname + " triggerNode");
compareEdge(gTrigger, gMenuPopup, step, 0, 0, testname);
},
},
{
// these tests check the same but with a 10 pixel margin on the popup
testname: "open popup anchored with margin",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
"topleft topleft",
"topcenter topleft",
"topright topleft",
"leftcenter topright",
"rightcenter topright",
"bottomleft bottomleft",
"bottomcenter bottomleft",
"bottomright bottomleft",
"topleft bottomright",
"bottomcenter bottomright",
"rightcenter topright",
],
test(testname, step) {
gMenuPopup.setAttribute("style", "margin: 10px;");
gMenuPopup.openPopup(gTrigger, step, 0, 0, false, false);
},
result(testname, step) {
var rightmod =
step == "before_end" ||
step == "after_end" ||
step == "start_before" ||
step == "start_after" ||
step.match(/topright$/) ||
step.match(/bottomright$/);
var bottommod =
step == "before_start" ||
step == "before_end" ||
step == "start_after" ||
step == "end_after" ||
step.match(/bottomleft$/) ||
step.match(/bottomright$/);
compareEdge(
gTrigger,
gMenuPopup,
step,
rightmod ? -10 : 10,
bottommod ? -10 : 10,
testname
);
gMenuPopup.removeAttribute("style");
},
},
{
// these tests check the same but with a -8 pixel margin on the popup
testname: "open popup anchored with negative margin",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
],
test(testname, step) {
gMenuPopup.setAttribute("style", "margin: -8px;");
gMenuPopup.openPopup(gTrigger, step, 0, 0, false, false);
},
result(testname, step) {
var rightmod =
step == "before_end" ||
step == "after_end" ||
step == "start_before" ||
step == "start_after";
var bottommod =
step == "before_start" ||
step == "before_end" ||
step == "start_after" ||
step == "end_after";
compareEdge(
gTrigger,
gMenuPopup,
step,
rightmod ? 8 : -8,
bottommod ? 8 : -8,
testname
);
gMenuPopup.removeAttribute("style");
},
},
{
testname: "open popup with large positive margin",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
],
test(testname, step) {
gMenuPopup.setAttribute("style", "margin: 1000px;");
gMenuPopup.openPopup(gTrigger, step, 0, 0, false, false);
},
result(testname, step) {
var popuprect = gMenuPopup.getBoundingClientRect();
// as there is more room on the 'end' or 'after' side, popups will always
// appear on the right or bottom corners, depending on which side they are
// allowed to be flipped by.
var expectedleft =
step == "before_end" || step == "after_end"
? 0
: Math.round(window.innerWidth - gPopupWidth);
var expectedtop =
step == "start_after" || step == "end_after"
? 0
: Math.round(window.innerHeight - gPopupHeight);
is(
Math.round(popuprect.left),
expectedleft,
testname + " x position " + step
);
is(
Math.round(popuprect.top),
expectedtop,
testname + " y position " + step
);
gMenuPopup.removeAttribute("style");
},
},
{
testname: "open popup with large negative margin",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
],
test(testname, step) {
gMenuPopup.setAttribute("style", "margin: -1000px;");
gMenuPopup.openPopup(gTrigger, step, 0, 0, false, false);
},
result(testname, step) {
var popuprect = gMenuPopup.getBoundingClientRect();
// using negative margins causes the reverse of positive margins, and
// popups will appear on the left or top corners.
var expectedleft =
step == "before_end" || step == "after_end"
? Math.round(window.innerWidth - gPopupWidth)
: 0;
var expectedtop =
step == "start_after" || step == "end_after"
? Math.round(window.innerHeight - gPopupHeight)
: 0;
is(
Math.round(popuprect.left),
expectedleft,
testname + " x position " + step
);
is(
Math.round(popuprect.top),
expectedtop,
testname + " y position " + step
);
gMenuPopup.removeAttribute("style");
},
},
{
testname: "popup with unknown step",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gMenuPopup.openPopup(gTrigger, "other", 0, 0, false, false);
},
result(testname) {
var triggerrect = gMenuPopup.getBoundingClientRect();
var popuprect = gMenuPopup.getBoundingClientRect();
is(
Math.round(popuprect.left),
triggerrect.left,
testname + " x position "
);
is(Math.round(popuprect.top), triggerrect.top, testname + " y position ");
},
},
{
// these tests check to ensure that the position attribute can be used
// to set the position of a popup instead of passing it as an argument
testname: "open popup anchored with attribute",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
steps: [
"before_start",
"before_end",
"after_start",
"after_end",
"start_before",
"start_after",
"end_before",
"end_after",
"after_pointer",
"overlap",
"topcenter topleft",
"topright bottomright",
"leftcenter topright",
],
test(testname, step) {
gMenuPopup.setAttribute("position", step);
gMenuPopup.openPopup(gTrigger, "", 0, 0, false, false);
},
result(testname, step) {
compareEdge(gTrigger, gMenuPopup, step, 0, 0, testname);
},
},
{
// this test checks to ensure that the attributes override flag to openPopup
// can be used to override the popup's position. This test also passes an
// event to openPopup to check the trigger node.
testname: "open popup anchored with override",
events: ["popupshowing thepopup 0010", "popupshown thepopup"],
test() {
// attribute overrides the position passed in
gMenuPopup.setAttribute("position", "end_after");
gExpectedTriggerNode = gCachedEvent.target;
gMenuPopup.openPopup(
gTrigger,
"before_start",
0,
0,
false,
true,
gCachedEvent
);
},
result(testname) {
gExpectedTriggerNode = null;
is(gMenuPopup.anchorNode, gTrigger, testname + " anchorNode");
is(
gMenuPopup.triggerNode,
gCachedEvent.target,
testname + " triggerNode"
);
compareEdge(gTrigger, gMenuPopup, "end_after", 0, 0, testname);
},
},
{
testname: "close popup with escape",
events: [
"popuphiding thepopup",
"popuphidden thepopup",
"DOMMenuInactive thepopup",
],
test(testname) {
synthesizeKey("KEY_Escape");
checkClosed("trigger", testname);
},
},
{
// check that offsets may be supplied to the openPopup method
testname: "open popup anchored with offsets",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
// attribute is empty so does not override
gMenuPopup.setAttribute("position", "");
gMenuPopup.openPopup(gTrigger, "before_start", 5, 10, true, true);
},
result(testname) {
compareEdge(gTrigger, gMenuPopup, "before_start", 5, 10, testname);
},
},
{
// if no anchor is supplied to openPopup, it should be opened relative
// to the viewport.
testname: "open popup unanchored",
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
gMenuPopup.openPopup(null, "after_start", 6, 8, false);
},
result(testname) {
var rect = gMenuPopup.getBoundingClientRect();
ok(
rect.left == 6 && rect.top == 8 && rect.right && rect.bottom,
testname
);
},
},
{
testname: "activate menuitem with mouse",
events: [
"DOMMenuInactive thepopup",
"command item3",
"popuphiding thepopup",
"popuphidden thepopup",
],
test() {
var item3 = document.getElementById("item3");
synthesizeMouse(item3, 4, 4, {});
},
result(testname) {
checkClosed("trigger", testname);
},
},
{
testname: "close popup",
condition() {
return false;
},
events: [
"popuphiding thepopup",
"popuphidden thepopup",
"DOMMenuInactive thepopup",
],
test() {
gMenuPopup.hidePopup();
},
},
{
testname: "open popup at screen",
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
gExpectedTriggerNode = "notset";
gMenuPopup.openPopupAtScreen(gScreenX + 24, gScreenY + 20, false);
},
result(testname) {
gExpectedTriggerNode = null;
is(gMenuPopup.anchorNode, null, testname + " anchorNode");
is(gMenuPopup.triggerNode, null, testname + " triggerNode");
var rect = gMenuPopup.getBoundingClientRect();
is(rect.left, 24, testname + " left");
is(rect.top, 20, testname + " top");
ok(rect.right, testname + " right is " + rect.right);
ok(rect.bottom, testname + " bottom is " + rect.bottom);
},
},
{
// check that pressing a menuitem's accelerator selects it. Note that
// the menuitem with the M accesskey overrides the earlier menuitem that
// begins with M.
testname: "menuitem accelerator",
events: [
"DOMMenuItemActive amenu",
"DOMMenuItemInactive amenu",
"DOMMenuInactive thepopup",
"command amenu",
"popuphiding thepopup",
"popuphidden thepopup",
],
test() {
sendString("M");
},
result(testname) {
checkClosed("trigger", testname);
},
},
{
testname: "open context popup at screen",
events: ["popupshowing thepopup 0010", "popupshown thepopup"],
test() {
gExpectedTriggerNode = gCachedEvent.target;
gMenuPopup.openPopupAtScreen(
gScreenX + 8,
gScreenY + 16,
true,
gCachedEvent
);
},
result(testname) {
gExpectedTriggerNode = null;
is(gMenuPopup.anchorNode, null, testname + " anchorNode");
is(
gMenuPopup.triggerNode,
gCachedEvent.target,
testname + " triggerNode"
);
var openX = 8;
var openY = 16;
var rect = gMenuPopup.getBoundingClientRect();
is(rect.left, openX + (platformIsMac() ? 1 : 2), testname + " left");
is(rect.top, openY + (platformIsMac() ? -6 : 2), testname + " top");
ok(rect.right, testname + " right is " + rect.right);
ok(rect.bottom, testname + " bottom is " + rect.bottom);
},
},
{
// pressing a letter that doesn't correspond to an accelerator, but does
// correspond to the first letter in a menu's label. The menu should not
// close because there is more than one item corresponding to that letter
testname: "menuitem with non accelerator",
events: ["DOMMenuItemActive one"],
test() {
sendString("O");
},
result(testname) {
checkOpen("trigger", testname);
checkActive(gMenuPopup, "one", testname);
},
},
{
// pressing the letter again should select the next one that starts with
// that letter
testname: "menuitem with non accelerator again",
events: ["DOMMenuItemInactive one", "DOMMenuItemActive submenu"],
test() {
sendString("O");
},
result(testname) {
// 'submenu' is a menu but it should not be open
checkOpen("trigger", testname);
checkClosed("submenu", testname);
checkActive(gMenuPopup, "submenu", testname);
},
},
{
// open the submenu with the cursor right key
testname: "open submenu with cursor right",
events: [
"popupshowing submenupopup",
"DOMMenuItemActive submenuitem",
"popupshown submenupopup",
],
test() {
synthesizeKey("KEY_ArrowRight");
},
result(testname) {
checkOpen("trigger", testname);
checkOpen("submenu", testname);
checkActive(gMenuPopup, "submenu", testname);
checkActive(
document.getElementById("submenupopup"),
"submenuitem",
testname
);
},
},
{
// close the submenu with the cursor left key
testname: "close submenu with cursor left",
events: [
"popuphiding submenupopup",
"popuphidden submenupopup",
"DOMMenuItemInactive submenuitem",
"DOMMenuInactive submenupopup",
],
test() {
synthesizeKey("KEY_ArrowLeft");
},
result(testname) {
checkOpen("trigger", testname);
checkClosed("submenu", testname);
checkActive(gMenuPopup, "submenu", testname);
checkActive(document.getElementById("submenupopup"), "", testname);
},
},
{
// open the submenu with the enter key
testname: "open submenu with enter",
events: [
"popupshowing submenupopup",
"DOMMenuItemActive submenuitem",
"popupshown submenupopup",
],
test() {
synthesizeKey("KEY_Enter");
},
result(testname) {
checkOpen("trigger", testname);
checkOpen("submenu", testname);
checkActive(gMenuPopup, "submenu", testname);
checkActive(
document.getElementById("submenupopup"),
"submenuitem",
testname
);
},
},
{
// close the submenu with the escape key
testname: "close submenu with escape",
events: [
"popuphiding submenupopup",
"popuphidden submenupopup",
"DOMMenuItemInactive submenuitem",
"DOMMenuInactive submenupopup",
],
test() {
synthesizeKey("KEY_Escape");
},
result(testname) {
checkOpen("trigger", testname);
checkClosed("submenu", testname);
checkActive(gMenuPopup, "submenu", testname);
checkActive(document.getElementById("submenupopup"), "", testname);
},
},
{
// pressing the letter again when the next item is disabled should still
// select the disabled item on Windows, but select the next item on other
// platforms
testname: "menuitem with non accelerator disabled",
events() {
if (navigator.platform.indexOf("Win") == 0) {
return [
"DOMMenuItemInactive submenu",
"DOMMenuItemActive other",
"DOMMenuItemInactive other",
"DOMMenuItemActive item1",
];
}
return [
"DOMMenuItemInactive submenu",
"DOMMenuItemActive last",
"DOMMenuItemInactive last",
"DOMMenuItemActive item1",
];
},
test() {
sendString("OF");
},
result(testname) {
checkActive(gMenuPopup, "item1", testname);
},
},
{
// pressing a letter that doesn't correspond to an accelerator nor the
// first letter of a menu. This should have no effect.
testname: "menuitem with keypress no accelerator found",
test() {
sendString("G");
},
result(testname) {
checkOpen("trigger", testname);
checkActive(gMenuPopup, "item1", testname);
},
},
{
// when only one menuitem starting with that letter exists, it should be
// selected and the menu closed
testname: "menuitem with non accelerator single",
events: [
"DOMMenuItemInactive item1",
"DOMMenuItemActive amenu",
"DOMMenuItemInactive amenu",
"DOMMenuInactive thepopup",
"command amenu",
"popuphiding thepopup",
"popuphidden thepopup",
],
test() {
sendString("M");
},
result(testname) {
checkClosed("trigger", testname);
checkActive(gMenuPopup, "", testname);
},
},
{
testname: "open context popup at screen with all modifiers set",
events: ["popupshowing thepopup 1111", "popupshown thepopup"],
autohide: "thepopup",
test() {
gMenuPopup.openPopupAtScreen(
gScreenX + 8,
gScreenY + 16,
true,
gCachedEvent2
);
},
},
{
testname: "open popup with open property",
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
openMenu(gTrigger);
},
result(testname) {
checkOpen("trigger", testname);
if (gIsMenu) {
compareEdge(gTrigger, gMenuPopup, "after_start", 0, 0, testname);
}
},
},
{
testname: "open submenu with open property",
events: [
"popupshowing submenupopup",
"DOMMenuItemActive submenu",
"popupshown submenupopup",
],
test() {
openMenu(document.getElementById("submenu"));
},
result(testname) {
checkOpen("trigger", testname);
checkOpen("submenu", testname);
// XXXndeakin
// getBoundingClientRect doesn't seem to working right for submenus
// so disable this test for now
// compareEdge(document.getElementById("submenu"),
// document.getElementById("submenupopup"), "end_before", 0, 0, testname);
},
},
{
testname: "hidePopup hides entire chain",
events: [
"popuphiding submenupopup",
"popuphidden submenupopup",
"popuphiding thepopup",
"popuphidden thepopup",
"DOMMenuInactive submenupopup",
"DOMMenuItemInactive submenu",
"DOMMenuInactive thepopup",
],
test() {
gMenuPopup.hidePopup();
},
result(testname) {
checkClosed("trigger", testname);
checkClosed("submenu", testname);
},
},
{
testname: "open submenu with open property without parent open",
test() {
openMenu(document.getElementById("submenu"));
},
result(testname) {
checkClosed("trigger", testname);
checkClosed("submenu", testname);
},
},
{
testname: "open popup with open property and position",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
gMenuPopup.setAttribute("position", "before_start");
openMenu(gTrigger);
},
result(testname) {
compareEdge(gTrigger, gMenuPopup, "before_start", 0, 0, testname);
},
},
{
testname: "close popup with open property",
condition() {
return gIsMenu;
},
events: [
"popuphiding thepopup",
"popuphidden thepopup",
"DOMMenuInactive thepopup",
],
test() {
closeMenu(gTrigger, gMenuPopup);
},
result(testname) {
checkClosed("trigger", testname);
},
},
{
testname: "open popup with open property, position, anchor and alignment",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gMenuPopup.setAttribute("position", "start_after");
gMenuPopup.setAttribute("popupanchor", "topright");
gMenuPopup.setAttribute("popupalign", "bottomright");
openMenu(gTrigger);
},
result(testname) {
compareEdge(gTrigger, gMenuPopup, "start_after", 0, 0, testname);
},
},
{
testname: "open popup with open property, anchor and alignment",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gMenuPopup.removeAttribute("position");
gMenuPopup.setAttribute("popupanchor", "bottomright");
gMenuPopup.setAttribute("popupalign", "topright");
openMenu(gTrigger);
},
result(testname) {
compareEdge(gTrigger, gMenuPopup, "after_end", 0, 0, testname);
gMenuPopup.removeAttribute("popupanchor");
gMenuPopup.removeAttribute("popupalign");
},
},
{
testname: "focus and cursor down on trigger",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gTrigger.focus();
synthesizeKey("KEY_ArrowDown", { altKey: !platformIsMac() });
},
result(testname) {
checkOpen("trigger", testname);
checkActive(gMenuPopup, "", testname);
},
},
{
testname: "focus and cursor up on trigger",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
test() {
gTrigger.focus();
synthesizeKey("KEY_ArrowUp", { altKey: !platformIsMac() });
},
result(testname) {
checkOpen("trigger", testname);
checkActive(gMenuPopup, "", testname);
},
},
{
testname: "select and enter on menuitem",
condition() {
return gIsMenu;
},
events: [
"DOMMenuItemActive item1",
"DOMMenuItemInactive item1",
"DOMMenuInactive thepopup",
"command item1",
"popuphiding thepopup",
"popuphidden thepopup",
],
test() {
synthesizeKey("KEY_ArrowDown");
synthesizeKey("KEY_Enter");
},
result(testname) {
checkClosed("trigger", testname);
},
},
{
testname: "focus trigger and key to open",
condition() {
return gIsMenu;
},
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gTrigger.focus();
synthesizeKey(platformIsMac() ? " " : "KEY_F4");
},
result(testname) {
checkOpen("trigger", testname);
checkActive(gMenuPopup, "", testname);
},
},
{
// the menu should only open when the meta or alt key is not pressed
testname: "focus trigger and key wrong modifier",
condition() {
return gIsMenu;
},
test() {
gTrigger.focus();
if (platformIsMac()) {
synthesizeKey("KEY_F4", { altKey: true });
} else {
synthesizeKey("", { metaKey: true });
}
},
result(testname) {
checkClosed("trigger", testname);
},
},
{
testname: "mouse click on disabled menu",
condition() {
return gIsMenu;
},
test() {
gTrigger.setAttribute("disabled", "true");
synthesizeMouse(gTrigger, 4, 4, {});
},
result(testname) {
checkClosed("trigger", testname);
gTrigger.removeAttribute("disabled");
},
},
{
// openPopup using object as position argument
testname: "openPopup with object argument",
events: ["popupshowing thepopup 0000", "popupshown thepopup"],
autohide: "thepopup",
test(testname) {
gMenuPopup.openPopup(gTrigger, { position: "before_start", x: 5, y: 7 });
checkOpen("trigger", testname);
},
result(testname) {
var triggerrect = gTrigger.getBoundingClientRect();
var popuprect = gMenuPopup.getBoundingClientRect();
is(
Math.round(popuprect.left),
Math.round(triggerrect.left + 5),
testname + " x position "
);
is(
Math.round(popuprect.bottom),
Math.round(triggerrect.top + 7),
testname + " y position "
);
},
},
{
testname: "openPopup with object argument with event",
events: ["popupshowing thepopup 1000", "popupshown thepopup"],
autohide: "thepopup",
test(testname) {
gMenuPopup.openPopup(gTrigger, {
position: "after_start",
x: 0,
y: 0,
triggerEvent: new MouseEvent("mousedown", { altKey: true }),
});
checkOpen("trigger", testname);
},
},
{
testname: "openPopup with no arguments",
events: ["popupshowing thepopup", "popupshown thepopup"],
autohide: "thepopup",
test() {
gMenuPopup.openPopup();
},
result(testname) {
let isMenu = gTrigger.type == "menu";
// With no arguments, open in default menu position
var triggerrect = gTrigger.getBoundingClientRect();
var popuprect = gMenuPopup.getBoundingClientRect();
is(
Math.round(popuprect.left),
isMenu ? Math.round(triggerrect.left) : 0,
testname + " x position "
);
is(
Math.round(popuprect.top),
isMenu ? Math.round(triggerrect.bottom) : 0,
testname + " y position "
);
},
},
{
// openPopup should open the menu synchronously, however popupshown
// is fired asynchronously
testname: "openPopup synchronous",
events: [
"popupshowing thepopup",
"popupshowing submenupopup",
"popupshown thepopup",
"DOMMenuItemActive submenu",
"popupshown submenupopup",
],
test(testname) {
gMenuPopup.openPopup(gTrigger, "after_start", 0, 0, false, true);
document
.getElementById("submenupopup")
.openPopup(gTrigger, "end_before", 0, 0, false, true);
checkOpen("trigger", testname);
checkOpen("submenu", testname);
},
},
{
// remove the content nodes for the popup
testname: "remove content",
test() {
var submenupopup = document.getElementById("submenupopup");
submenupopup.remove();
var popup = document.getElementById("thepopup");
popup.remove();
},
},
];
function platformIsMac() {
return navigator.platform.indexOf("Mac") > -1;
}