203 lines
8.7 KiB
HTML
203 lines
8.7 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
function setup()
|
|
{
|
|
var results = document.createElement('div');
|
|
results.id = "res";
|
|
results.appendChild(document.createTextNode("Results:"));
|
|
document.body.appendChild(results);
|
|
}
|
|
function checkSelection(expected)
|
|
{
|
|
actual = getSelectedOptions("sl1");
|
|
if (actual.toString() != expected)
|
|
log('Incorrect selection: "' + actual + '" instead of "' + expected + '"');
|
|
}
|
|
function test()
|
|
{
|
|
setup();
|
|
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
checkSelection("0");
|
|
|
|
log("1) Make sure onChange doesn't fire when clicking on an initially selected item");
|
|
mouseDownOnSelect("sl1", 0, false, false);
|
|
mouseUpOnSelect("sl1", 0, false, false);
|
|
checkSelection("0");
|
|
|
|
log("2) Make sure onChange fires when deselecting an initially selected item");
|
|
mouseDownOnSelect("sl1", 0, false, true);
|
|
mouseUpOnSelect("sl1", 0, false, true);
|
|
checkSelection("");
|
|
|
|
log("3) Make sure onChange fires when clicking");
|
|
mouseDownOnSelect("sl1", 2, false, false);
|
|
mouseUpOnSelect("sl1", 2, false, false);
|
|
checkSelection("2");
|
|
|
|
log("4) Make sure onChange doesn't fire when clicking again on the same item");
|
|
mouseDownOnSelect("sl1", 2, false, false);
|
|
mouseUpOnSelect("sl1", 2, false, false);
|
|
checkSelection("2");
|
|
|
|
log("5) Make sure onChange fires when clicking on a new item");
|
|
mouseDownOnSelect("sl1", 0, false, false);
|
|
mouseUpOnSelect("sl1", 0, false, false);
|
|
checkSelection("0");
|
|
|
|
log("6) Make sure onChange fires when changing the selection with the keyboard");
|
|
keyDownOnSelect("sl1", "downArrow", true, false);
|
|
checkSelection("0,1");
|
|
|
|
log("7) Make sure onChange doesn't fire when setting the select element's value from JS");
|
|
document.getElementById("sl1").value = "2";
|
|
checkSelection("2");
|
|
|
|
log("8) Make sure onChange doesn't fire when clicking on the already selected option");
|
|
mouseDownOnSelect("sl1", 2, false, false);
|
|
mouseUpOnSelect("sl1", 2, false, false);
|
|
checkSelection("2");
|
|
|
|
log("9) Make sure onChange doesn't fire when setting an option's selected state from JS");
|
|
document.getElementById("sl1").item(3).selected = true;
|
|
checkSelection("2,3");
|
|
document.getElementById("sl1").item(2).selected = false;
|
|
checkSelection("3");
|
|
|
|
log("10) Make sure onChange doesn't fire when clicking on this option");
|
|
mouseDownOnSelect("sl1", 3, false, false);
|
|
mouseUpOnSelect("sl1", 3, false, false);
|
|
checkSelection("3");
|
|
|
|
log("11) Make sure onChange fires when deselecting the last selected option with a mouse click");
|
|
mouseDownOnSelect("sl1", 3, false, true);
|
|
mouseUpOnSelect("sl1", 3, false, true);
|
|
checkSelection("");
|
|
|
|
log("12) Make sure onChange doesn't fire when adding a new selected option");
|
|
option = document.createElement("option");
|
|
option.setAttribute("selected", "");
|
|
option.appendChild(document.createTextNode("item 4"));
|
|
document.getElementById("sl1").appendChild(option);
|
|
checkSelection("4");
|
|
|
|
log("13) Make sure onChange doesn't fire when clicking on it");
|
|
mouseDownOnSelect("sl1", 4, false, false);
|
|
mouseUpOnSelect("sl1", 4, false, false);
|
|
checkSelection("4");
|
|
|
|
log("14) Make sure onChange fires when clicking on a previously selected option");
|
|
mouseDownOnSelect("sl1", 3, false, true);
|
|
mouseUpOnSelect("sl1", 3, false, true);
|
|
checkSelection("3,4");
|
|
|
|
log("15) Make sure onChange doesn't fire when removing a selected option");
|
|
document.getElementById("sl1").removeChild(document.getElementById("sl1").item(4));
|
|
checkSelection("3");
|
|
|
|
log("16) Make sure onChange doesn't fire when clicking on the option that remains selected");
|
|
mouseDownOnSelect("sl1", 3, false, false);
|
|
mouseUpOnSelect("sl1", 3, false, false);
|
|
checkSelection("3");
|
|
|
|
log("17) Make sure onChange fires when typing the name of an option");
|
|
option = document.createElement("option");
|
|
option.appendChild(document.createTextNode("keyboard test"));
|
|
document.getElementById("sl1").appendChild(option);
|
|
keyDownOnSelect("sl1", "K", false, false);
|
|
checkSelection("4");
|
|
|
|
log("18) Make sure onChange doesn't fire when leaving the select");
|
|
document.getElementById("sl1").blur();
|
|
checkSelection("4");
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
|
|
function mouseDownOnSelect(selId, index, shift, metaOrCtrl)
|
|
{
|
|
var meta = false;
|
|
var ctrl = false;
|
|
if (metaOrCtrl) {
|
|
if (navigator.userAgent.search(/\bMac OS X\b/) != -1)
|
|
meta = true;
|
|
else
|
|
ctrl = true;
|
|
}
|
|
var sl = document.getElementById(selId);
|
|
var itemHeight = 14;
|
|
var border = 1;
|
|
var y = border + index * itemHeight - window.pageYOffset;
|
|
var event = document.createEvent("MouseEvent");
|
|
event.initMouseEvent("mousedown", true, true, document.defaultView, 1, sl.offsetLeft + border, sl.offsetTop + y, sl.offsetLeft + border, sl.offsetTop + y, ctrl, false, shift, meta, 0, document);
|
|
sl.dispatchEvent(event);
|
|
}
|
|
|
|
function mouseUpOnSelect(selId, index, shift, metaOrCtrl)
|
|
{
|
|
var meta = false;
|
|
var ctrl = false;
|
|
if (metaOrCtrl) {
|
|
if (navigator.userAgent.search(/\bMac OS X\b/) != -1)
|
|
meta = true;
|
|
else
|
|
ctrl = true;
|
|
}
|
|
var sl = document.getElementById(selId);
|
|
var itemHeight = 14;
|
|
var border = 1;
|
|
var y = border + index * itemHeight - window.pageYOffset;
|
|
var event = document.createEvent("MouseEvent");
|
|
event.initMouseEvent("mouseup", true, true, document.defaultView, 1, sl.offsetLeft + border, sl.offsetTop + y, sl.offsetLeft + border, sl.offsetTop + y, ctrl, false, shift, meta, 0, document);
|
|
sl.dispatchEvent(event);
|
|
}
|
|
|
|
function keyDownOnSelect(selId, identifier, shift, metaOrCtrl)
|
|
{
|
|
modifiers = [];
|
|
if (shift)
|
|
modifiers[0] = "shiftKey";
|
|
if (metaOrCtrl) {
|
|
if (navigator.userAgent.search(/\bMac OS X\b/) != -1)
|
|
modifiers[modifiers.length] = "metaKey";
|
|
else
|
|
modifiers[modifiers.length] = "controlKey";
|
|
}
|
|
|
|
document.getElementById(selId).focus();
|
|
eventSender.keyDown(identifier, modifiers);
|
|
}
|
|
|
|
function getSelectedOptions(selId)
|
|
{
|
|
result = new Array;
|
|
var sl = document.getElementById(selId);
|
|
for (i = 0; i < sl.options.length; ++i)
|
|
if (sl.item(i).selected)
|
|
result.push(i);
|
|
return result;
|
|
}
|
|
|
|
function log(msg)
|
|
{
|
|
var r = document.getElementById('res');
|
|
r.innerHTML = r.innerHTML + "<br>" + msg;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="test()">
|
|
<select id="sl1" size=5 multiple onchange="log('onChange fired')">
|
|
<option selected value="0">item 0</option>
|
|
<option value="1">item 1
|
|
<option value="2">item 2
|
|
<option value="3">item 3
|
|
</select>
|
|
</body>
|
|
</html>
|