<html>
<head>
<script type="text/javascript">
function print(message)
{
var paragraph = document.createElement("div");
if (message == "") {
paragraph.appendChild(document.createElement("br"));
} else {
paragraph.appendChild(document.createTextNode(message));
}
document.getElementById("console").appendChild(paragraph);
}
function test()
{
if (window.testRunner) {
testRunner.dumpAsText();
}
var elt = document.getElementById("text");
print("===textarea===");
testElt(elt);
elt = document.getElementById("input");
print("");
print("===input===");
testElt(elt);
print("");
print("===button===");
// Make sure that accessing selectionStart and selectionEnd on
// the button throws exceptions.
elt = document.getElementById("button");
testButtonSelectionAccess(elt, ".selectionStart");
testButtonSelectionAccess(elt, ".selectionStart = 0");
testButtonSelectionAccess(elt, ".selectionEnd");
testButtonSelectionAccess(elt, ".selectionEnd = 0");
testButtonSelectionAccess(elt, ".selectionDirection");
testButtonSelectionAccess(elt, ".selectionDirection = 'none'");
// Make sure that setSelectionRange is defined on the button element,
// but throws an exception if called.
if (elt.setSelectionRange != undefined) {
print("button.setSelectionRange defined");
testButtonSelectionAccess(elt, ".setSelectionRange(0,0)");
}
}
function testElt(elt)
{
// make sure that setSelectionRange is defined
if (elt.setSelectionRange == undefined) {
print("Failed: no setSelectionRange");
return;
}
elt.value = "This is a test value. Just filling in some text.";
// the value is 48 characters long
print("setSelectionRange():");
elt.setSelectionRange(3,7);
display(elt);
elt.setSelectionRange(-2,5);
display(elt);
elt.setSelectionRange(42,54);
display(elt);
elt.setSelectionRange(5,2);
display(elt);
print("");
print("selectionStart:");
elt.selectionStart = 3;
display(elt);
elt.selectionStart = 7;
display(elt);
elt.selectionStart = -1;
display(elt);
elt.selectionStart = 54;
display(elt);
elt.selectionStart = 3;
display(elt);
print("");
print("selectionEnd:");
elt.selectionEnd = 5;
display(elt);
elt.selectionEnd = 2;
display(elt);
elt.selectionEnd = -1;
display(elt);
elt.selectionEnd = 54;
display(elt);
elt.selectionStart = 7;
elt.selectionEnd = 7;
display(elt);
print("");
print("selectionStart and selectionEnd in focus handler don't return wrong values 0,0:");
elt.selectionStart = elt.selectionEnd = 7;
// Need to clear selection. Selection API calls above modified
// both of real selection and |elt|'s cached selection even
// though |elt| has no focus.
// We'd like to check the behavior in case that real selection
// and the cached selection are mismatched.
getSelection().removeAllRanges();
// selectionStart and selectionEnd are still 7.
elt.onfocus = function() { display(elt); };
elt.focus();
elt.value = "";
}
function testButtonSelectionAccess(button, access)
{
var source = "button" + access;
try {
eval(source);
print(source + " did not throw exception");
} catch(e) {
print(source + " threw exception");
}
}
function display(elt)
{
var actStart = elt.selectionStart;
var actEnd = elt.selectionEnd;
var txt = actStart.toString() + ", " + actEnd.toString();
print(txt);
}
</script>
</head>
<body onload="test();">
<p>This test checks if setSelectionRange(), selectionStart, and selectionEnd on a textarea and input work as expected. This includes checking edge cases such as out-of-bound values.</p>
<p>If this test passed you'll see a bunch of correct selection ranges below. Check the expected file for the correct ranges.</p>
<hr />
<form>
<textarea id="text"></textarea>
<input type="text" id="input" />
<input type="button" id="button" />
</form>
<hr />
<p id="console"></p>
</body>
</html>
Codebase Browser
chromium