diff options
Diffstat (limited to '')
-rw-r--r-- | editor/libeditor/tests/test_htmleditor_tab_key_handling.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/editor/libeditor/tests/test_htmleditor_tab_key_handling.html b/editor/libeditor/tests/test_htmleditor_tab_key_handling.html new file mode 100644 index 0000000000..2d428611af --- /dev/null +++ b/editor/libeditor/tests/test_htmleditor_tab_key_handling.html @@ -0,0 +1,112 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Testing indentation with `Tab` key</title> +<script src="/tests/SimpleTest/SimpleTest.js"></script> +<script src="/tests/SimpleTest/EventUtils.js"></script> +<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> +</head> +<body> +<script> +"use strict"; + +SimpleTest.waitForExplicitFinish(); +SimpleTest.waitForFocus(() => { + function initEditor(aEditingHostTag) { + const editor = document.createElement(aEditingHostTag); + editor.setAttribute("contenteditable", "true"); + document.body.insertBefore(editor, document.body.firstChild); + editor.getBoundingClientRect(); + const htmlEditor = SpecialPowers.wrap(window).docShell.editingSession.getEditorForWindow(window); + htmlEditor.flags &= ~SpecialPowers.Ci.nsIEditor.eEditorAllowInteraction; + return editor; + } + + (function test_tab_in_paragraph() { + const editor = initEditor("div"); + editor.innerHTML = "<p>abc</p><p>def</p>"; + editor.getBoundingClientRect(); + editor.focus(); + getSelection().collapse(editor.querySelector("p").firstChild, 1); + synthesizeKey("KEY_Tab"); + is( + editor.innerHTML.replace(/ /g, " "), + `<p>a bc</p><p>def</p>`, + "4 white-spaces should be inserted into the paragraph by Tab" + ); + + let blurred = false; + editor.addEventListener("blur", () => { + blurred = true; + }, {once: true}); + synthesizeKey("KEY_Tab", {shiftKey: true}); + is( + editor.innerHTML.replace(/ /g, " "), + `<p>a bc</p><p>def</p>`, + "The spaces in the paragraph shouldn't be removed by Shift-Tab" + ); + ok(blurred, "Shift-Tab should cause moving focus"); + editor.remove(); + })(); + + (function test_tab_in_body_text() { + const editor = initEditor("div"); + editor.innerHTML = "abc"; + editor.getBoundingClientRect(); + editor.focus(); + getSelection().collapse(editor.firstChild, 1); + synthesizeKey("KEY_Tab"); + is( + editor.innerHTML.replace(/ /g, " "), + `a bc`, + "4 white-spaces should be inserted into the body text by Tab" + ); + editor.remove(); + })(); + + (function test_tab_in_li() { + const editor = initEditor("div"); + for (const list of ["ol", "ul"]) { + editor.innerHTML = `abc<${list}><li>def</li><li>ghi</li><li>jkl</li></${list}>`; + editor.getBoundingClientRect(); + editor.focus(); + getSelection().collapse(editor.querySelector("li + li").firstChild, 1); + synthesizeKey("KEY_Tab"); + is( + editor.innerHTML, + `abc<${list}><li>def</li><${list}><li>ghi</li></${list}><li>jkl</li></${list}>`, + `The list item containing caret should be moved into new sub-<${list}> by Tab` + ); + synthesizeKey("KEY_Tab", {shiftKey: true}); + is( + editor.innerHTML, + `abc<${list}><li>def</li><li>ghi</li><li>jkl</li></${list}>`, + `The list item containing caret should be moved into parent <${list}> by Shift-Tab` + ); + } + editor.remove(); + })(); + + (function test_tab_in_nested_editing_host_in_li() { + const editor = initEditor("div"); + editor.innerHTML = `abc<ul><li>def</li><li><span contenteditable="false">g<span contenteditable="true">h</span>i</span></li><li>jkl</li></ul>`; + editor.getBoundingClientRect(); + editor.focus(); + getSelection().collapse(editor.querySelector("span[contenteditable=true]").firstChild, 1); + synthesizeKey("KEY_Tab"); + is( + editor.innerHTML, + `abc<ul><li>def</li><li><span contenteditable="false">g<span contenteditable="true">h</span>i</span></li><li>jkl</li></ul>`, + `The list item containing caret should be modified by Tab` + ); + editor.remove(); + })(); + + // TODO: Add table cell cases. + + SimpleTest.finish(); +}); +</script> +</body> +</html> |