Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>MozSelect Panel-List Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link
rel="stylesheet"
/>
<script src="lit-test-helpers.js"></script>
<script>
let testHelpers = new InputTestHelpers();
add_setup(async function setup() {
await testHelpers.setupLit();
let templateFn = (attrs, children) => testHelpers.html`
<moz-select ${attrs}>
<moz-option value="1" label="One" iconSrc="chrome://global/skin/icons/info.svg"></moz-option>
<moz-option value="2" label="Two" iconSrc="chrome://global/skin/icons/warning.svg"></moz-option>
<moz-option value="3" label="Three" iconSrc="chrome://global/skin/icons/error.svg"></moz-option>
${children}
</moz-select>
`;
testHelpers.setupTests({ templateFn });
});
add_task(async function testPanelListMousedownOpensPanel() {
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
ok(
select.usePanelList,
"Select should use panel-list for icon options"
);
ok(!select.panelList?.open, "Panel should be closed initially");
let panelButton = select.shadowRoot.querySelector(".panel-trigger");
ok(panelButton, "Panel trigger button should exist");
let shown = BrowserTestUtils.waitForEvent(select.panelList, "shown");
synthesizeMouseAtCenter(panelButton, {});
await shown;
ok(select.panelList.open, "Panel should open on mousedown");
let hidden = BrowserTestUtils.waitForEvent(select.panelList, "hidden");
select.panelList.hide();
await hidden;
});
add_task(async function testPanelListKeyboardClickOpensPanel() {
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
ok(
select.usePanelList,
"Select should use panel-list for icon options"
);
ok(!select.panelList?.open, "Panel should be closed initially");
let panelButton = select.shadowRoot.querySelector(".panel-trigger");
ok(panelButton, "Panel trigger button should exist");
panelButton.focus();
ok(document.activeElement === select, "Select should be focused");
let shown = BrowserTestUtils.waitForEvent(select.panelList, "shown");
synthesizeKey(" ");
await shown;
ok(
select.panelList.open,
"Panel should open on Space key (keyboard click)"
);
let hidden = BrowserTestUtils.waitForEvent(select.panelList, "hidden");
select.panelList.hide();
await hidden;
ok(!select.panelList.open, "Panel should be closed");
shown = BrowserTestUtils.waitForEvent(select.panelList, "shown");
panelButton.focus();
synthesizeKey("KEY_Enter");
await shown;
ok(
select.panelList.open,
"Panel should open on Enter key (keyboard click)"
);
hidden = BrowserTestUtils.waitForEvent(select.panelList, "hidden");
select.panelList.hide();
await hidden;
});
add_task(async function testPanelListRightClickDoesNotOpenPanel() {
let target = await testHelpers.renderTemplate();
let select = target.querySelector("moz-select");
await select.updateComplete;
ok(
select.usePanelList,
"Select should use panel-list for icon options"
);
ok(!select.panelList?.open, "Panel should be closed initially");
let panelButton = select.shadowRoot.querySelector(".panel-trigger");
ok(panelButton, "Panel trigger button should exist");
synthesizeMouseAtCenter(panelButton, { button: 2 });
await TestUtils.waitForTick();
ok(
!select.panelList.open,
"Panel should not open on right-click (button 2)"
);
});
</script>
</head>
<body></body>
</html>