gecko-dev/layout/forms/test/test_select_key_navigation_...

132 строки
5.1 KiB
HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=961363
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 961363</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<script type="application/javascript">
/** Test for Bug 961363 **/
SimpleTest.waitForExplicitFinish();
function test() {
SimpleTest.waitForFocus(function() {
const single_list = [
{key: "DOWN", change: true, state: [false, false, true, false]},
{key: "UP", change: true, state: [false, true, false, false]},
{key: "RIGHT", change: true, state: [false, false, true, false]},
{key: "LEFT", change: true, state: [false, true, false, false]},
{key: "END", change: true, state: [false, false, false, true ]},
{key: "HOME", change: true, state: [true, false, false, false]},
{key: "PAGE_DOWN", change: false, state: [true, false, false, false]},
{key: "PAGE_UP", change: false, state: [true, false, false, false]}
];
const single_dropdown = [
{key: "DOWN", change: true, state: [false, false, true, false]},
{key: "UP", change: true, state: [false, true, false, false]},
{key: "RIGHT", change: true, state: [false, false, true, false]},
{key: "LEFT", change: true, state: [false, true, false, false]},
{key: "END", change: true, state: [false, false, false, true ]},
{key: "HOME", change: true, state: [true, false, false, false]},
{key: "PAGE_DOWN", change: false, state: [true, false, false, false]},
{key: "PAGE_UP", change: false, state: [true, false, false, false]}
];
const multiple = [
{key: "DOWN", change: false, state: [false, true, true, false]},
{key: "UP", change: false, state: [false, false, true, false]},
{key: "RIGHT", change: false, state: [false, false, false, false]},
{key: "LEFT", change: false, state: [false, true, false, false]},
{key: "PAGE_DOWN", change: false, state: [false, true, false, true ]},
{key: "PAGE_UP", change: false, state: [false, false, false, true ]},
{key: "END", change: false, state: [false, false, false, false]},
{key: "HOME", change: false, state: [true, false, false, false]}
];
function select_test(id, tests) {
let element = document.getElementById(id);
element.focus();
tests.forEach(data => {
let previousValue = element.value;
let key = data.k;
synthesizeKey("VK_" + data.key, {shiftKey: false, metaKey: false,
ctrlKey: true });
(data.change ? isnot : is)(
element.value, previousValue,
`value should ${data.change ? "": "not "} have changed while testing CTRL+${data.key} (id: ${id})`
);
// Hit ctrl+space, but only for <select multiple> elements; doing so
// for single <select> elements will just trigger the dropdown to
// open. This is especially important because e10s-backed dropdowns
// behave differently: their .value isn't updated until the dropdown
// is closed (and the change confirmed), e.g. by pressing Enter.
let action;
if (element.multiple) {
synthesizeKey(" ", {shiftKey: false, metaKey: false,
ctrlKey: true});
action = `CTRL+SPACE (after testing CTRL+${data.key})`;
} else {
action = `testing CTRL+${data.key}`;
}
let selected = [...element.options].map(o => o.selected);
is(selected.toString(), data.state.toString(),
`selected options match after ${action} (id: ${id})`);
});
}
select_test("single-list", single_list);
if (navigator.platform.indexOf("Mac") == -1) {
select_test("single-dropdown", single_dropdown);
} else {
todo(false, "Make these tests work on OSX");
}
select_test("multiple", multiple);
SimpleTest.finish();
});
}
</script>
</head>
<body onload="test();">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=961363">Mozilla Bug 961363</a>
<div>
<ul>
<li>
<select id="single-list" size="3">
<option>0</option>
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<select id="single-dropdown" size="1">
<option>0</option>
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<select id="multiple" multiple size="3">
<option>0</option>
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
</ul>
</div>
<pre id="test">
</pre>
</body>
</html>