test_htmleditor_tab_key_handling.html (3788B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testing indentation with `Tab` key</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <script> 12 "use strict"; 13 14 SimpleTest.waitForExplicitFinish(); 15 SimpleTest.waitForFocus(() => { 16 function initEditor(aEditingHostTag) { 17 const editor = document.createElement(aEditingHostTag); 18 editor.setAttribute("contenteditable", "true"); 19 document.body.insertBefore(editor, document.body.firstChild); 20 editor.getBoundingClientRect(); 21 const htmlEditor = SpecialPowers.wrap(window).docShell.editingSession.getEditorForWindow(window); 22 htmlEditor.flags &= ~SpecialPowers.Ci.nsIEditor.eEditorAllowInteraction; 23 return editor; 24 } 25 26 (function test_tab_in_paragraph() { 27 const editor = initEditor("div"); 28 editor.innerHTML = "<p>abc</p><p>def</p>"; 29 editor.getBoundingClientRect(); 30 editor.focus(); 31 getSelection().collapse(editor.querySelector("p").firstChild, 1); 32 synthesizeKey("KEY_Tab"); 33 is( 34 editor.innerHTML.replace(/ /g, " "), 35 `<p>a bc</p><p>def</p>`, 36 "4 white-spaces should be inserted into the paragraph by Tab" 37 ); 38 39 let blurred = false; 40 editor.addEventListener("blur", () => { 41 blurred = true; 42 }, {once: true}); 43 synthesizeKey("KEY_Tab", {shiftKey: true}); 44 is( 45 editor.innerHTML.replace(/ /g, " "), 46 `<p>a bc</p><p>def</p>`, 47 "The spaces in the paragraph shouldn't be removed by Shift-Tab" 48 ); 49 ok(blurred, "Shift-Tab should cause moving focus"); 50 editor.remove(); 51 })(); 52 53 (function test_tab_in_body_text() { 54 const editor = initEditor("div"); 55 editor.innerHTML = "abc"; 56 editor.getBoundingClientRect(); 57 editor.focus(); 58 getSelection().collapse(editor.firstChild, 1); 59 synthesizeKey("KEY_Tab"); 60 is( 61 editor.innerHTML.replace(/ /g, " "), 62 `a bc`, 63 "4 white-spaces should be inserted into the body text by Tab" 64 ); 65 editor.remove(); 66 })(); 67 68 (function test_tab_in_li() { 69 const editor = initEditor("div"); 70 for (const list of ["ol", "ul"]) { 71 editor.innerHTML = `abc<${list}><li>def</li><li>ghi</li><li>jkl</li></${list}>`; 72 editor.getBoundingClientRect(); 73 editor.focus(); 74 getSelection().collapse(editor.querySelector("li + li").firstChild, 1); 75 synthesizeKey("KEY_Tab"); 76 is( 77 editor.innerHTML, 78 `abc<${list}><li>def</li><${list}><li>ghi</li></${list}><li>jkl</li></${list}>`, 79 `The list item containing caret should be moved into new sub-<${list}> by Tab` 80 ); 81 synthesizeKey("KEY_Tab", {shiftKey: true}); 82 is( 83 editor.innerHTML, 84 `abc<${list}><li>def</li><li>ghi</li><li>jkl</li></${list}>`, 85 `The list item containing caret should be moved into parent <${list}> by Shift-Tab` 86 ); 87 } 88 editor.remove(); 89 })(); 90 91 (function test_tab_in_nested_editing_host_in_li() { 92 const editor = initEditor("div"); 93 editor.innerHTML = `abc<ul><li>def</li><li><span contenteditable="false">g<span contenteditable="true">h</span>i</span></li><li>jkl</li></ul>`; 94 editor.getBoundingClientRect(); 95 editor.focus(); 96 getSelection().collapse(editor.querySelector("span[contenteditable=true]").firstChild, 1); 97 synthesizeKey("KEY_Tab"); 98 is( 99 editor.innerHTML, 100 `abc<ul><li>def</li><li><span contenteditable="false">g<span contenteditable="true">h</span>i</span></li><li>jkl</li></ul>`, 101 `The list item containing caret should be modified by Tab` 102 ); 103 editor.remove(); 104 })(); 105 106 // TODO: Add table cell cases. 107 108 SimpleTest.finish(); 109 }); 110 </script> 111 </body> 112 </html>