editor/libeditor/tests/test_paste_no_formatting.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>Test pasting formatted test into various fields</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <script src="/tests/SimpleTest/EventUtils.js"></script>
   8   <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
   9 </head>
  10 <body>
  11
  12 <input id="input">
  13 <textarea id="textarea"></textarea>
  14 <div id="editable" contenteditable="true"></div>
  15 <div id="noneditable">Text</div>
  16
  17 <div id="source">Some <b>Bold</b> Text</div>
  18 <script>
  19
  20 const expectedText = "Some Bold Text";
  21 const expectedHTML = "<div id=\"source\">Some <b>Bold</b> Text</div>";
  22
  23 const htmlPrefix = navigator.platform.includes("Win")
  24   ? "<html><body>\n<!--StartFragment-->"
  25   : "";
  26 const htmlPostfix = navigator.platform.includes("Win")
  27   ? "<!--EndFragment-->\n</body>\n</html>"
  28   : "";
  29
  30 add_task(async function test_paste_formatted() {
  31   window.getSelection().selectAllChildren(document.getElementById("source"));
  32   synthesizeKey("c", { accelKey: true });
  33
  34   function doKey(element, withShiftKey)
  35   {
  36     let inputEventPromise = new Promise(resolve => {
  37       element.addEventListener("input", event => {
  38         is(event.inputType, "insertFromPaste", "correct inputType");
  39         resolve();
  40       }, { once: true });
  41     });
  42     synthesizeKey("v", { accelKey: true, shiftKey: withShiftKey });
  43     return inputEventPromise;
  44   }
  45
  46   function cancelEvent(event) {
  47     event.preventDefault();
  48   }
  49
  50   // Paste into input and textarea
  51   for (let fieldid of ["input", "textarea"]) {
  52     const field = document.getElementById(fieldid);
  53     field.focus();
  54
  55     field.addEventListener("paste", cancelEvent);
  56     doKey(field, false);
  57     is(
  58       field.value,
  59       "",
  60       `Nothing should be pasted into <${field.tagName.toLowerCase()}> when paste event is canceled (shift key is not pressed)`
  61     );
  62
  63     doKey(field, true);
  64     is(
  65       field.value,
  66       "",
  67       `Nothing should be pasted into <${field.tagName.toLowerCase()}> when paste event is canceled (shift key is pressed)`
  68     );
  69     field.removeEventListener("paste", cancelEvent);
  70
  71     doKey(field, false);
  72     is(field.value, expectedText, "paste into " + fieldid);
  73
  74     doKey(field, true);
  75     is(field.value, expectedText + expectedText, "paste unformatted into " + field);
  76   }
  77
  78   const selection = window.getSelection();
  79
  80   const editable = document.getElementById("editable");
  81   const innerHTMLBeforeTest = editable.innerHTML;
  82
  83   (function test_pasteWithFormatIntoEditableArea() {
  84     selection.selectAllChildren(editable);
  85     selection.collapseToStart();
  86     editable.addEventListener("paste", cancelEvent);
  87     doKey(editable, false);
  88     is(
  89       editable.innerHTML,
  90       "",
  91       "test_pasteWithFormatIntoEditableArea: Nothing should be pasted when paste event is canceled"
  92     );
  93     editable.removeEventListener("paste", cancelEvent);
  94
  95     doKey(editable, false);
  96     is(
  97       editable.innerHTML,
  98       expectedHTML,
  99       "test_pasteWithFormatIntoEditableArea: Pasting with format should work as expected"
 100     );
 101     editable.innerHTML = innerHTMLBeforeTest;
 102   }());
 103
 104   (function test_pasteWithoutFormatIntoEditableArea() {
 105     selection.selectAllChildren(editable);
 106     selection.collapseToEnd();
 107     doKey(editable, true);
 108     is(
 109       editable.innerHTML,
 110       expectedText,
 111       "test_pasteWithoutFormatIntoEditableArea: Pasting without format should work as expected",
 112     );
 113     editable.innerHTML = innerHTMLBeforeTest;
 114   })();
 115
 116   (function test_pasteWithFormatIntoEditableAreaWhenHTMLEditorIsInReadonlyMode() {
 117     getEditor().flags |= SpecialPowers.Ci.nsIEditor.eEditorReadonlyMask;
 118     selection.selectAllChildren(editable);
 119     selection.collapseToStart();
 120     let beforeInputEvents = [];
 121     function onBeforeInput(aEvent) {
 122       beforeInputEvents.push(aEvent);
 123     }
 124     editable.addEventListener("beforeinput", onBeforeInput);
 125     doKey(editable, false);
 126     const description = "test_pasteWithFormatIntoEditableAreaWhenHTMLEditorIsInReadonlyMode";
 127     is(
 128       editable.innerHTML,
 129       innerHTMLBeforeTest,
 130       `${description}: Pasting with format should not work`
 131     );
 132     is(
 133       beforeInputEvents.length,
 134       0,
 135       `${description}: Pasting with format should not cause "beforeinput", but fired "${
 136         beforeInputEvents[0]?.inputType
 137       }"`
 138     );
 139     editable.removeEventListener("beforeinput", onBeforeInput);
 140     editable.innerHTML = innerHTMLBeforeTest;
 141     getEditor().flags &= ~SpecialPowers.Ci.nsIEditor.eEditorReadonlyMask;
 142   })();
 143
 144   (function test_pasteWithoutFormatIntoEditableAreaWhenHTMLEditorIsInReadonlyMode() {
 145     getEditor().flags |= SpecialPowers.Ci.nsIEditor.eEditorReadonlyMask;
 146     selection.selectAllChildren(editable);
 147     selection.collapseToStart();
 148     let beforeInputEvents = [];
 149     function onBeforeInput(aEvent) {
 150       beforeInputEvents.push(aEvent);
 151     }
 152     editable.addEventListener("beforeinput", onBeforeInput);
 153     doKey(editable, false);
 154     const description = "test_pasteWithoutFormatIntoEditableAreaWhenHTMLEditorIsInReadonlyMode";
 155     is(
 156       editable.innerHTML,
 157       innerHTMLBeforeTest,
 158       `${description}: Pasting with format should not work`
 159     );
 160     is(
 161       beforeInputEvents.length,
 162       0,
 163       `${description}: Pasting with format should not cause "beforeinput", but fired "${
 164         beforeInputEvents[0]?.inputType
 165       }"`
 166     );
 167     editable.removeEventListener("beforeinput", onBeforeInput);
 168     editable.innerHTML = innerHTMLBeforeTest;
 169     getEditor().flags &= ~SpecialPowers.Ci.nsIEditor.eEditorReadonlyMask;
 170   })();
 171
 172   let noneditable = document.getElementById("noneditable");
 173   selection.selectAllChildren(noneditable);
 174   selection.collapseToStart();
 175
 176   function getPasteResult() {
 177     return new Promise(resolve => {
 178       noneditable.addEventListener("paste", event => {
 179         resolve({
 180           text: event.clipboardData.getData("text/plain"),
 181           html: event.clipboardData.getData("text/html"),
 182         });
 183       }, { once: true});
 184     });
 185   }
 186
 187   // Normal paste into non-editable area
 188   let pastePromise = getPasteResult();
 189   doKey(noneditable, false);
 190   is(noneditable.innerHTML, "Text", "paste into non-editable");
 191
 192   let result = await pastePromise;
 193   is(result.text, expectedText, "paste text into non-editable");
 194   is(result.html,
 195      htmlPrefix + expectedHTML + htmlPostfix,
 196      "paste html into non-editable");
 197
 198   // Unformatted paste into non-editable area
 199   pastePromise = getPasteResult();
 200   doKey(noneditable, true);
 201   is(noneditable.innerHTML, "Text", "paste unformatted into non-editable");
 202
 203   result = await pastePromise;
 204   is(result.text, expectedText, "paste unformatted text into non-editable");
 205   // Formatted HTML text should not exist when pasting unformatted.
 206   is(result.html, "", "paste unformatted html into non-editable");
 207 });
 208
 209 function getEditor() {
 210   const editingSession = SpecialPowers.wrap(window).docShell.editingSession;
 211   return editingSession.getEditorForWindow(window);
 212 }
 213 </script>
 214 </body>