editor/libeditor/tests/test_cmd_fontFace_with_tt.html

   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><br>",
  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><br>",
  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>