editor/libeditor/tests/test_inline_style_cache.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Tests for inline style cache</title>
   5   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6   <script src="/tests/SimpleTest/EventUtils.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   8 </head>
   9 <body>
  10 <p id="display"></p>
  11 <div id="content" style="display: none;">
  12
  13 </div>
  14
  15 <div id="editor" contenteditable></div>
  16 <pre id="test">
  17
  18 <script class="testbody" type="application/javascript">
  19 SimpleTest.waitForExplicitFinish();
  20 SimpleTest.waitForFocus(function() {
  21   var editor = document.getElementById("editor");
  22   editor.focus();
  23
  24   document.execCommand("defaultParagraphSeparator", false, "div");
  25
  26   var selection = window.getSelection();
  27
  28   // #01-01 Typing something after setting some styles should insert some nodes to insert text.
  29   editor.innerHTML = "beforeafter";
  30   selection.collapse(editor.firstChild, "before".length);
  31   document.execCommand("bold");
  32   document.execCommand("italic");
  33   document.execCommand("strikethrough");
  34   sendString("test");
  35
  36   is(editor.innerHTML, "before<strike><i><b>test</b></i></strike>after",
  37      "#01-01 At typing something after setting some styles, should cause inserting some nodes to apply the style");
  38
  39   // #01-02 Typing something after removing some characters after setting some styles should work as without removing some character.
  40   // XXX This behavior is different from Chromium.
  41   editor.innerHTML = "beforeafter";
  42   selection.collapse(editor.firstChild, "before".length);
  43   document.execCommand("bold");
  44   document.execCommand("italic");
  45   document.execCommand("strikethrough");
  46   synthesizeKey("KEY_Delete");
  47   sendString("test");
  48
  49   is(editor.innerHTML, "before<strike><i><b>test</b></i></strike>fter",
  50      "#01-02-1 At typing something after Delete after setting style, should cause inserting some nodes to apply the style");
  51
  52   editor.innerHTML = "beforeafter";
  53   selection.collapse(editor.firstChild, "before".length);
  54   document.execCommand("bold");
  55   document.execCommand("italic");
  56   document.execCommand("strikethrough");
  57   synthesizeKey("KEY_Backspace");
  58   sendString("test");
  59
  60   is(editor.innerHTML, "befor<strike><i><b>test</b></i></strike>after",
  61      "#01-02-2 At typing something after Backspace after setting style, should cause inserting some nodes to apply the style");
  62
  63   // #01-03 Typing Enter after setting some styles should not ignore the styles.
  64   editor.innerHTML = "beforeafter";
  65   selection.collapse(editor.firstChild, "before".length);
  66   document.execCommand("bold");
  67   document.execCommand("italic");
  68   document.execCommand("strikethrough");
  69   synthesizeKey("KEY_Enter");
  70   sendString("test");
  71
  72   is(editor.innerHTML, "<div>before</div><div><strike><i><b>test</b></i></strike>after</div>",
  73      "#01-03-1 Typing Enter after setting style should not ignore the styles");
  74
  75   editor.innerHTML = "<p>beforeafter</p>";
  76   selection.collapse(editor.firstChild.firstChild, "before".length);
  77   document.execCommand("bold");
  78   document.execCommand("italic");
  79   document.execCommand("strikethrough");
  80   synthesizeKey("KEY_Enter");
  81   sendString("test");
  82
  83   is(editor.innerHTML, "<p>before</p><p><strike><i><b>test</b></i></strike>after</p>",
  84      "#01-03-2 Typing Enter after setting style should not ignore the styles");
  85
  86   // #02-01 Replacing text with typing some text after setting some styles should work as just inserting text.
  87   // XXX Chromium works as expected.
  88   editor.innerHTML = "beforeselectionafter";
  89   selection.collapse(editor.firstChild, "before".length);
  90   selection.extend(editor.firstChild, "beforeselection".length);
  91   document.execCommand("bold");
  92   document.execCommand("italic");
  93   document.execCommand("strikethrough");
  94   sendString("test");
  95
  96   is(editor.innerHTML, "before<strike><i><b>test</b></i></strike>after",
  97      "#02-01 At replacing \"selection\" after setting some styles, should keep the styles at inserting text");
  98
  99   // #02-02 Inserting text after removing selected text after setting some styles should not keep the styles.
 100   // XXX Chromium keeps the style.
 101   editor.innerHTML = "beforeselectionafter";
 102   selection.collapse(editor.firstChild, "before".length);
 103   selection.extend(editor.firstChild, "beforeselection".length);
 104   document.execCommand("bold");
 105   document.execCommand("italic");
 106   document.execCommand("strikethrough");
 107   synthesizeKey("KEY_Backspace");
 108   sendString("test");
 109
 110   is(editor.innerHTML, "beforetestafter",
 111      "#02-02 After removing \"selection\" after setting some styles, should not keep the styles");
 112
 113   // #02-03 Inserting text after replacing selected text after setting some styles should keep the styles.
 114   editor.innerHTML = "beforeselectionafter";
 115   selection.collapse(editor.firstChild, "before".length);
 116   selection.extend(editor.firstChild, "beforeselection".length);
 117   document.execCommand("bold");
 118   document.execCommand("italic");
 119   document.execCommand("strikethrough");
 120   synthesizeKey("KEY_Enter");
 121   sendString("test");
 122
 123   is(editor.innerHTML, "<div>before</div><div><strike><i><b>test</b></i></strike>after</div>",
 124      "#02-03-1 Typing Enter after setting style to selected text should keep the styles");
 125
 126   editor.innerHTML = "<p>beforeselectionafter</p>";
 127   selection.collapse(editor.firstChild.firstChild, "before".length);
 128   selection.extend(editor.firstChild.firstChild, "beforeselection".length);
 129   document.execCommand("bold");
 130   document.execCommand("italic");
 131   document.execCommand("strikethrough");
 132   synthesizeKey("KEY_Enter");
 133   sendString("test");
 134
 135   is(editor.innerHTML, "<p>before</p><p><strike><i><b>test</b></i></strike>after</p>",
 136      "#02-03-2 Typing Enter after setting style to selected text should keep the styles");
 137
 138   // #03-01 Replacing in <b style="font-weight: normal;"> shouldn't cause new <b>.
 139   editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
 140   selection.collapse(editor.firstChild.firstChild, "before".length);
 141   selection.extend(editor.firstChild.firstChild, "beforeselection".length);
 142   sendString("test");
 143
 144   is(editor.innerHTML, "<b style=\"font-weight: normal;\">beforetestafter</b>",
 145      "#03-01 Replacing text in styled inline elements should respect the styles");
 146
 147   // #03-02 Typing something after removing selected text in <b style="font-weight: normal;"> shouldn't cause new <b>.
 148   editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
 149   selection.collapse(editor.firstChild.firstChild, "before".length);
 150   selection.extend(editor.firstChild.firstChild, "beforeselection".length);
 151   synthesizeKey("KEY_Backspace");
 152   sendString("test");
 153
 154   is(editor.innerHTML, "<b style=\"font-weight: normal;\">beforetestafter</b>",
 155      "#03-02 Inserting text after removing text in styled inline elements should respect the styles");
 156
 157   // #03-03 Typing something after typing Enter at selected text in <b style="font-weight: normal;"> shouldn't cause new <b>.
 158   editor.innerHTML = "<b style=\"font-weight: normal;\">beforeselectionafter</b>";
 159   selection.collapse(editor.firstChild.firstChild, "before".length);
 160   selection.extend(editor.firstChild.firstChild, "beforeselection".length);
 161   synthesizeKey("KEY_Enter");
 162   sendString("test");
 163
 164   is(editor.innerHTML, "<div><b style=\"font-weight: normal;\">before</b></div><div><b style=\"font-weight: normal;\">testafter</b></div>",
 165      "#03-03-1 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
 166
 167   editor.innerHTML = "<p><b style=\"font-weight: normal;\">beforeselectionafter</b></p>";
 168   selection.collapse(editor.firstChild.firstChild.firstChild, "before".length);
 169   selection.extend(editor.firstChild.firstChild.firstChild, "beforeselection".length);
 170   synthesizeKey("KEY_Enter");
 171   sendString("test");
 172
 173   is(editor.innerHTML, "<p><b style=\"font-weight: normal;\">before</b></p><p><b style=\"font-weight: normal;\">testafter</b></p>",
 174      "#03-03-2 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
 175
 176   // #04-01 Replacing in some styled inline elements shouldn't cause new same elements.
 177   editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b></i></strike>";
 178   selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
 179   selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
 180   sendString("test");
 181
 182   is(editor.innerHTML, "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforetestafter</b></i></strike>",
 183      "#04-01 Replacing text in styled inline elements should respect the styles");
 184
 185   // #04-02 Typing something after removing selected text in some styled inline elements shouldn't cause new same elements.
 186   editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b>";
 187   selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
 188   selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
 189   synthesizeKey("KEY_Backspace");
 190   sendString("test");
 191
 192   is(editor.innerHTML, "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforetestafter</b></i></strike>",
 193      "#04-02 Inserting text after removing text in styled inline elements should respect the styles");
 194
 195   // #04-03 Typing something after typing Enter at selected text in some styled inline elements shouldn't cause new same elements.
 196   editor.innerHTML = "<strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b>";
 197   selection.collapse(editor.firstChild.firstChild.firstChild.firstChild, "before".length);
 198   selection.extend(editor.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
 199   synthesizeKey("KEY_Enter");
 200   sendString("test");
 201
 202   is(editor.innerHTML, "<div><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">before</b></i></strike></div><div><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">testafter</b></i></strike></div>",
 203      "#04-03-1 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
 204
 205   editor.innerHTML = "<p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">beforeselectionafter</b></p>";
 206   selection.collapse(editor.firstChild.firstChild.firstChild.firstChild.firstChild, "before".length);
 207   selection.extend(editor.firstChild.firstChild.firstChild.firstChild.firstChild, "beforeselection".length);
 208   synthesizeKey("KEY_Enter");
 209   sendString("test");
 210
 211   is(editor.innerHTML, "<p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">before</b></i></strike></p><p><strike style=\"text-decoration: none;\"><i style=\"font-style: normal;\"><b style=\"font-weight: normal;\">testafter</b></i></strike></p>",
 212      "#04-03-2 Inserting text after typing Enter at selected text in styled inline elements should respect the styles");
 213
 214   SimpleTest.finish();
 215 });
 216 </script>
 217 </pre>
 218 </body>
 219 </html>