test_cmd_fontFace_with_tt.html (2767B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Testing font face "tt"</title> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 </head> 9 <body> 10 <div id="display"> 11 </div> 12 13 <div id="content" contenteditable>abc</div> 14 15 <pre id="test"> 16 </pre> 17 18 <script class="testbody"> 19 "use strict"; 20 SimpleTest.waitForExplicitFinish(); 21 SimpleTest.waitForFocus(() => { 22 let editor = document.querySelector("div[contenteditable]"); 23 editor.focus(); 24 let selection = document.getSelection(); 25 26 // "tt" is a magic value of "cmd_fontFace", it should work as "cmd_tt". 27 editor.innerHTML = "abc"; 28 selection.setBaseAndExtent(editor.firstChild, 1, editor.firstChild, 2); 29 SpecialPowers.doCommand(window, "cmd_fontFace", "tt"); 30 is(editor.innerHTML, "a<tt>b</tt>c", 31 "\"cmd_fontFace\" with \"tt\" should wrap selected text <tt> element"); 32 33 editor.innerHTML = "<br>"; 34 selection.collapse(editor, 0); 35 SpecialPowers.doCommand(window, "cmd_fontFace", "tt"); 36 synthesizeKey("t"); 37 synthesizeKey("t"); 38 is(editor.innerHTML, "<tt>tt</tt>", 39 "Typed text after \"cmd_fontFace\" with \"tt\" should be wrapped by <tt> element"); 40 41 // But it shouldn't work with `Document.execCommand()`. 42 editor.innerHTML = "abc"; 43 selection.setBaseAndExtent(editor.firstChild, 1, editor.firstChild, 2); 44 document.execCommand("fontname", false, "tt"); 45 is(editor.innerHTML, "a<font face=\"tt\">b</font>c", 46 "execCommand(\"fontname\") with \"tt\" should wrap selected text with <font> element"); 47 48 editor.innerHTML = "<br>"; 49 selection.collapse(editor, 0); 50 document.execCommand("fontname", false, "tt"); 51 synthesizeKey("t"); 52 synthesizeKey("t"); 53 is(editor.innerHTML, "<font face=\"tt\">tt</font>", 54 "Typed text after execCommand(\"fontname\") with \"tt\" should be wrapped by <font> element"); 55 56 // "cmd_fontFace" with "tt" should remove `<font>` element. 57 editor.innerHTML = "a<font face=\"sans-serif\">b</font>c"; 58 selection.selectAllChildren(editor.querySelector("font")); 59 SpecialPowers.doCommand(window, "cmd_fontFace", "tt"); 60 is(editor.innerHTML, "a<tt>b</tt>c", 61 "\"cmd_fontFace\" with \"tt\" should wrap selected text <tt> element after removing <font> element"); 62 63 editor.innerHTML = "<font face=\"sans-serif\">abc</font>"; 64 selection.setBaseAndExtent(editor.firstChild.firstChild, 1, editor.firstChild.firstChild, 2); 65 SpecialPowers.doCommand(window, "cmd_fontFace", "tt"); 66 is(editor.innerHTML, "<font face=\"sans-serif\">a</font><tt>b</tt><font face=\"sans-serif\">c</font>", 67 "\"cmd_fontFace\" with \"tt\" should wrap selected text <tt> element after removing <font> element"); 68 69 SimpleTest.finish(); 70 }); 71 </script> 72 </body> 73 </html>