gecko/editor/libeditor/html/tests/test_contenteditable_focus.html

215 lines
9.2 KiB
HTML

<html>
<head>
<title>Test for contenteditable focus</title>
<script type="text/javascript"
src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css"
href="/tests/SimpleTest/test.css" />
</head>
<body>
<div id="display">
First text in this document.<br>
<input id="inputText" type="text"><br>
<input id="inputTextReadonly" type="text" readonly><br>
<input id="inputButton" type="button" value="input[type=button]"><br>
<button id="button">button</button><br>
<div id="editor" contenteditable="true">
editable contents.<br>
<input id="inputTextInEditor" type="text"><br>
<input id="inputTextReadonlyInEditor" type="text" readonly><br>
<input id="inputButtonInEditor" type="button" value="input[type=button]"><br>
<button id="buttonInEditor">button</button><br>
<div id="noeditableInEditor" contenteditable="false">
<span id="spanInNoneditableInEditor">span element in noneditable in editor</span><br>
<input id="inputTextInNoneditableInEditor" type="text"><br>
<input id="inputTextReadonlyInNoneditableInEditor" type="text" readonly><br>
<input id="inputButtonInNoneditableInEditor" type="button" value="input[type=button]"><br>
<button id="buttonInNoneditableInEditor">button</button><br>
</div>
<span id="spanInEditor">span element in editor</span><br>
</div>
<div id="otherEditor" contenteditable="true">
other editor.
</div>
</div>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script class="testbody" type="application/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(runTests, window);
function runTests()
{
try {
runTestsInternal();
} catch (e) {
ok(false, "Unexpected error happened: " + e);
}
SimpleTest.finish();
}
function runTestsInternal()
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var fm = Components.classes["@mozilla.org/focus-manager;1"].
getService(Components.interfaces.nsIFocusManager);
// XXX using selCon for checking the visibility of the caret, however,
// selCon is shared in document, cannot get the element of owner of the
// caret from javascript?
var selCon =
window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
getInterface(Components.interfaces.nsIWebNavigation).
QueryInterface(Components.interfaces.nsIInterfaceRequestor).
getInterface(Components.interfaces.nsISelectionDisplay).
QueryInterface(Components.interfaces.nsISelectionController);
var selection = window.getSelection();
var inputText = document.getElementById("inputText");
var inputTextReadonly = document.getElementById("inputTextReadonly");
var inputButton = document.getElementById("inputButton");
var button = document.getElementById("button");
var editor = document.getElementById("editor");
var inputTextInEditor = document.getElementById("inputTextInEditor");
var inputTextReadonlyInEditor = document.getElementById("inputTextReadonlyInEditor");
var inputButtonInEditor = document.getElementById("inputButtonInEditor");
var noeditableInEditor = document.getElementById("noeditableInEditor");
var spanInNoneditableInEditor = document.getElementById("spanInNoneditableInEditor");
var inputTextInNoneditableInEditor = document.getElementById("inputTextInNoneditableInEditor");
var inputTextReadonlyInNoneditableInEditor = document.getElementById("inputTextReadonlyInNoneditableInEditor");
var inputButtonInNoneditableInEditor = document.getElementById("inputButtonInNoneditableInEditor");
var buttonInNoneditableInEditor = document.getElementById("buttonInNoneditableInEditor");
var spanInEditor = document.getElementById("spanInEditor");
var otherEditor = document.getElementById("otherEditor");
// XXX if there is a contenteditable element, HTML editor sets dom selection
// to first editable node, but this makes inconsistency with normal document
// behavior.
todo_is(selection.rangeCount, 0, "unexpected selection range is there");
ok(!selCon.caretVisible, "caret is visible in the document");
// Move focus to inputTextInEditor
inputTextInEditor.focus();
is(fm.focusedElement, inputTextInEditor,
"inputTextInEditor didn't get focus");
todo_is(selection.rangeCount, 0, "unexpected selection range is there");
ok(selCon.caretVisible, "caret isn't visible in the inputTextInEditor");
// Move focus to the editor
editor.focus();
is(fm.focusedElement, editor,
"editor didn't get focus");
is(selection.rangeCount, 1,
"there is no selection range when editor has focus");
var range = selection.getRangeAt(0);
ok(range.collapsed, "the selection range isn't collapsed");
var startNode = range.startContainer;
is(startNode.nodeType, 1, "the caret isn't set to the div node");
is(startNode, editor, "the caret isn't set to the editor");
ok(selCon.caretVisible, "caret isn't visible in the editor");
// Move focus to other editor
otherEditor.focus();
is(fm.focusedElement, otherEditor,
"the other editor didn't get focus");
is(selection.rangeCount, 1,
"there is no selection range when the other editor has focus");
range = selection.getRangeAt(0);
ok(range.collapsed, "the selection range isn't collapsed");
var startNode = range.startContainer;
is(startNode.nodeType, 1, "the caret isn't set to the div node");
is(startNode, otherEditor, "the caret isn't set to the other editor");
ok(selCon.caretVisible, "caret isn't visible in the other editor");
// Move focus to inputTextInEditor
inputTextInEditor.focus();
is(fm.focusedElement, inputTextInEditor,
"inputTextInEditor didn't get focus #2");
is(selection.rangeCount, 1, "selection range is lost from the document");
range = selection.getRangeAt(0);
ok(range.collapsed, "the selection range isn't collapsed");
var startNode = range.startContainer;
is(startNode.nodeType, 1, "the caret isn't set to the div node");
// XXX maybe, the caret can stay on the other editor if it's better.
is(startNode, editor,
"the caret should stay on the other editor");
ok(selCon.caretVisible,
"caret isn't visible in the inputTextInEditor");
// Move focus to the other editor again
otherEditor.focus();
is(fm.focusedElement, otherEditor,
"the other editor didn't get focus #2");
// Set selection to the span element in the editor (unfocused)
range = document.createRange();
range.setStart(spanInEditor.firstChild, 5);
selection.removeAllRanges();
selection.addRange(range);
is(selection.rangeCount, 1, "selection range is lost from the document");
is(fm.focusedElement, otherEditor,
"the other editor shouldn't lose focus by selection range change");
ok(selCon.caretVisible, "caret isn't visible in inputTextInEditor");
// Move focus to the editor
editor.focus();
is(fm.focusedElement, editor,
"the editor didn't get focus #2");
is(selection.rangeCount, 1, "selection range is lost from the document");
range = selection.getRangeAt(0);
ok(range.collapsed, "the selection range isn't collapsed");
is(range.startOffset, 5,
"the caret is moved when the editor was focused (offset)");
var startNode = range.startContainer;
is(startNode.nodeType, 3, "the caret isn't in text node");
is(startNode.parentNode, spanInEditor,
"the caret is moved when the editor was focused (node)");
ok(selCon.caretVisible, "caret isn't visible in the editor (spanInEditor)");
// Move focus to each focusable element in the editor.
function testFocusMove(aSetFocusElementID, aFocusable, aCaretVisible)
{
editor.focus();
is(fm.focusedElement, editor,
"testFocusMove: the editor didn't get focus at initializing (" +
aSetFocusElementID + ")");
var setFocusElement = document.getElementById(aSetFocusElementID);
setFocusElement.focus();
if (aFocusable) {
is(fm.focusedElement, setFocusElement,
"testFocusMove: the " + aSetFocusElementID +
" didn't get focus");
} else {
is(fm.focusedElement, editor,
"testFocusMove: the editor lost focus by focus() of the " +
aSetFocusElementID);
}
if (aCaretVisible) {
ok(selCon.caretVisible,
"testFocusMove: caret isn't visible when the " +
aSetFocusElementID + " has focus");
} else {
ok(!selCon.caretVisible,
"testFocusMove: caret is visible when the " +
aSetFocusElementID + " has focus");
}
}
testFocusMove("inputTextInEditor", true, true);
testFocusMove("inputTextReadonlyInEditor", true, true);
// XXX shouldn't the caret become invisible?
testFocusMove("inputButtonInEditor", true, true);
testFocusMove("noeditableInEditor", false, true);
testFocusMove("spanInNoneditableInEditor", false, true);
testFocusMove("inputTextInNoneditableInEditor", true, true);
testFocusMove("inputTextReadonlyInNoneditableInEditor", true, true);
testFocusMove("inputButtonInNoneditableInEditor", true, false);
testFocusMove("buttonInNoneditableInEditor", true, false);
testFocusMove("spanInEditor", false, true);
testFocusMove("inputText", true, true);
testFocusMove("inputTextReadonly", true, true);
testFocusMove("inputButton", true, false);
testFocusMove("button", true, false);
}
</script>
</body>
</html>