1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/editor/libeditor/html/tests/test_contenteditable_focus.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,209 @@
1.4 +<html>
1.5 +<head>
1.6 + <title>Test for contenteditable focus</title>
1.7 + <script type="text/javascript"
1.8 + src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <link rel="stylesheet" type="text/css"
1.10 + href="/tests/SimpleTest/test.css" />
1.11 +</head>
1.12 +<body>
1.13 +<div id="display">
1.14 + First text in this document.<br>
1.15 + <input id="inputText" type="text"><br>
1.16 + <input id="inputTextReadonly" type="text" readonly><br>
1.17 + <input id="inputButton" type="button" value="input[type=button]"><br>
1.18 + <button id="button">button</button><br>
1.19 + <div id="editor" contenteditable="true">
1.20 + editable contents.<br>
1.21 + <input id="inputTextInEditor" type="text"><br>
1.22 + <input id="inputTextReadonlyInEditor" type="text" readonly><br>
1.23 + <input id="inputButtonInEditor" type="button" value="input[type=button]"><br>
1.24 + <button id="buttonInEditor">button</button><br>
1.25 + <div id="noeditableInEditor" contenteditable="false">
1.26 + <span id="spanInNoneditableInEditor">span element in noneditable in editor</span><br>
1.27 + <input id="inputTextInNoneditableInEditor" type="text"><br>
1.28 + <input id="inputTextReadonlyInNoneditableInEditor" type="text" readonly><br>
1.29 + <input id="inputButtonInNoneditableInEditor" type="button" value="input[type=button]"><br>
1.30 + <button id="buttonInNoneditableInEditor">button</button><br>
1.31 + </div>
1.32 + <span id="spanInEditor">span element in editor</span><br>
1.33 + </div>
1.34 + <div id="otherEditor" contenteditable="true">
1.35 + other editor.
1.36 + </div>
1.37 +</div>
1.38 +<div id="content" style="display: none">
1.39 +
1.40 +</div>
1.41 +<pre id="test">
1.42 +</pre>
1.43 +
1.44 +<script class="testbody" type="application/javascript">
1.45 +
1.46 +SimpleTest.waitForExplicitFinish();
1.47 +SimpleTest.waitForFocus(runTests, window);
1.48 +
1.49 +function runTests()
1.50 +{
1.51 + runTestsInternal();
1.52 + SimpleTest.finish();
1.53 +}
1.54 +
1.55 +function runTestsInternal()
1.56 +{
1.57 + var fm = SpecialPowers.Cc["@mozilla.org/focus-manager;1"].
1.58 + getService(SpecialPowers.Ci.nsIFocusManager);
1.59 + // XXX using selCon for checking the visibility of the caret, however,
1.60 + // selCon is shared in document, cannot get the element of owner of the
1.61 + // caret from javascript?
1.62 + var selCon = SpecialPowers.wrap(window).
1.63 + QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor).
1.64 + getInterface(SpecialPowers.Ci.nsIWebNavigation).
1.65 + QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor).
1.66 + getInterface(SpecialPowers.Ci.nsISelectionDisplay).
1.67 + QueryInterface(SpecialPowers.Ci.nsISelectionController);
1.68 + var selection = window.getSelection();
1.69 +
1.70 + var inputText = document.getElementById("inputText");
1.71 + var inputTextReadonly = document.getElementById("inputTextReadonly");
1.72 + var inputButton = document.getElementById("inputButton");
1.73 + var button = document.getElementById("button");
1.74 + var editor = document.getElementById("editor");
1.75 + var inputTextInEditor = document.getElementById("inputTextInEditor");
1.76 + var inputTextReadonlyInEditor = document.getElementById("inputTextReadonlyInEditor");
1.77 + var inputButtonInEditor = document.getElementById("inputButtonInEditor");
1.78 + var noeditableInEditor = document.getElementById("noeditableInEditor");
1.79 + var spanInNoneditableInEditor = document.getElementById("spanInNoneditableInEditor");
1.80 + var inputTextInNoneditableInEditor = document.getElementById("inputTextInNoneditableInEditor");
1.81 + var inputTextReadonlyInNoneditableInEditor = document.getElementById("inputTextReadonlyInNoneditableInEditor");
1.82 + var inputButtonInNoneditableInEditor = document.getElementById("inputButtonInNoneditableInEditor");
1.83 + var buttonInNoneditableInEditor = document.getElementById("buttonInNoneditableInEditor");
1.84 + var spanInEditor = document.getElementById("spanInEditor");
1.85 + var otherEditor = document.getElementById("otherEditor");
1.86 +
1.87 + // XXX if there is a contenteditable element, HTML editor sets dom selection
1.88 + // to first editable node, but this makes inconsistency with normal document
1.89 + // behavior.
1.90 + todo_is(selection.rangeCount, 0, "unexpected selection range is there");
1.91 + ok(!selCon.caretVisible, "caret is visible in the document");
1.92 + // Move focus to inputTextInEditor
1.93 + inputTextInEditor.focus();
1.94 + is(SpecialPowers.unwrap(fm.focusedElement), inputTextInEditor,
1.95 + "inputTextInEditor didn't get focus");
1.96 + todo_is(selection.rangeCount, 0, "unexpected selection range is there");
1.97 + ok(selCon.caretVisible, "caret isn't visible in the inputTextInEditor");
1.98 + // Move focus to the editor
1.99 + editor.focus();
1.100 + is(SpecialPowers.unwrap(fm.focusedElement), editor,
1.101 + "editor didn't get focus");
1.102 + is(selection.rangeCount, 1,
1.103 + "there is no selection range when editor has focus");
1.104 + var range = selection.getRangeAt(0);
1.105 + ok(range.collapsed, "the selection range isn't collapsed");
1.106 + var startNode = range.startContainer;
1.107 + is(startNode.nodeType, 1, "the caret isn't set to the div node");
1.108 + is(startNode, editor, "the caret isn't set to the editor");
1.109 + ok(selCon.caretVisible, "caret isn't visible in the editor");
1.110 + // Move focus to other editor
1.111 + otherEditor.focus();
1.112 + is(SpecialPowers.unwrap(fm.focusedElement), otherEditor,
1.113 + "the other editor didn't get focus");
1.114 + is(selection.rangeCount, 1,
1.115 + "there is no selection range when the other editor has focus");
1.116 + range = selection.getRangeAt(0);
1.117 + ok(range.collapsed, "the selection range isn't collapsed");
1.118 + var startNode = range.startContainer;
1.119 + is(startNode.nodeType, 1, "the caret isn't set to the div node");
1.120 + is(startNode, otherEditor, "the caret isn't set to the other editor");
1.121 + ok(selCon.caretVisible, "caret isn't visible in the other editor");
1.122 + // Move focus to inputTextInEditor
1.123 + inputTextInEditor.focus();
1.124 + is(SpecialPowers.unwrap(fm.focusedElement), inputTextInEditor,
1.125 + "inputTextInEditor didn't get focus #2");
1.126 + is(selection.rangeCount, 1, "selection range is lost from the document");
1.127 + range = selection.getRangeAt(0);
1.128 + ok(range.collapsed, "the selection range isn't collapsed");
1.129 + var startNode = range.startContainer;
1.130 + is(startNode.nodeType, 1, "the caret isn't set to the div node");
1.131 + // XXX maybe, the caret can stay on the other editor if it's better.
1.132 + is(startNode, editor,
1.133 + "the caret should stay on the other editor");
1.134 + ok(selCon.caretVisible,
1.135 + "caret isn't visible in the inputTextInEditor");
1.136 + // Move focus to the other editor again
1.137 + otherEditor.focus();
1.138 + is(SpecialPowers.unwrap(fm.focusedElement), otherEditor,
1.139 + "the other editor didn't get focus #2");
1.140 + // Set selection to the span element in the editor (unfocused)
1.141 + range = document.createRange();
1.142 + range.setStart(spanInEditor.firstChild, 5);
1.143 + selection.removeAllRanges();
1.144 + selection.addRange(range);
1.145 + is(selection.rangeCount, 1, "selection range is lost from the document");
1.146 + is(SpecialPowers.unwrap(fm.focusedElement), otherEditor,
1.147 + "the other editor shouldn't lose focus by selection range change");
1.148 + ok(selCon.caretVisible, "caret isn't visible in inputTextInEditor");
1.149 + // Move focus to the editor
1.150 + editor.focus();
1.151 + is(SpecialPowers.unwrap(fm.focusedElement), editor,
1.152 + "the editor didn't get focus #2");
1.153 + is(selection.rangeCount, 1, "selection range is lost from the document");
1.154 + range = selection.getRangeAt(0);
1.155 + ok(range.collapsed, "the selection range isn't collapsed");
1.156 + is(range.startOffset, 5,
1.157 + "the caret is moved when the editor was focused (offset)");
1.158 + var startNode = range.startContainer;
1.159 + is(startNode.nodeType, 3, "the caret isn't in text node");
1.160 + is(startNode.parentNode, spanInEditor,
1.161 + "the caret is moved when the editor was focused (node)");
1.162 + ok(selCon.caretVisible, "caret isn't visible in the editor (spanInEditor)");
1.163 +
1.164 + // Move focus to each focusable element in the editor.
1.165 + function testFocusMove(aSetFocusElementID, aFocusable, aCaretVisible)
1.166 + {
1.167 + editor.focus();
1.168 + is(SpecialPowers.unwrap(fm.focusedElement), editor,
1.169 + "testFocusMove: the editor didn't get focus at initializing (" +
1.170 + aSetFocusElementID + ")");
1.171 + var setFocusElement = document.getElementById(aSetFocusElementID);
1.172 + setFocusElement.focus();
1.173 + if (aFocusable) {
1.174 + is(SpecialPowers.unwrap(fm.focusedElement), setFocusElement,
1.175 + "testFocusMove: the " + aSetFocusElementID +
1.176 + " didn't get focus");
1.177 + } else {
1.178 + is(SpecialPowers.unwrap(fm.focusedElement), editor,
1.179 + "testFocusMove: the editor lost focus by focus() of the " +
1.180 + aSetFocusElementID);
1.181 + }
1.182 + if (aCaretVisible) {
1.183 + ok(selCon.caretVisible,
1.184 + "testFocusMove: caret isn't visible when the " +
1.185 + aSetFocusElementID + " has focus");
1.186 + } else {
1.187 + ok(!selCon.caretVisible,
1.188 + "testFocusMove: caret is visible when the " +
1.189 + aSetFocusElementID + " has focus");
1.190 + }
1.191 + }
1.192 + testFocusMove("inputTextInEditor", true, true);
1.193 + testFocusMove("inputTextReadonlyInEditor", true, true);
1.194 + // XXX shouldn't the caret become invisible?
1.195 + testFocusMove("inputButtonInEditor", true, true);
1.196 + testFocusMove("noeditableInEditor", false, true);
1.197 + testFocusMove("spanInNoneditableInEditor", false, true);
1.198 + testFocusMove("inputTextInNoneditableInEditor", true, true);
1.199 + testFocusMove("inputTextReadonlyInNoneditableInEditor", true, true);
1.200 + testFocusMove("inputButtonInNoneditableInEditor", true, false);
1.201 + testFocusMove("buttonInNoneditableInEditor", true, false);
1.202 + testFocusMove("spanInEditor", false, true);
1.203 + testFocusMove("inputText", true, true);
1.204 + testFocusMove("inputTextReadonly", true, true);
1.205 + testFocusMove("inputButton", true, false);
1.206 + testFocusMove("button", true, false);
1.207 +}
1.208 +
1.209 +</script>
1.210 +</body>
1.211 +
1.212 +</html>
