editor/libeditor/tests/test_undo_with_editingui.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Test for undo with editing UI</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="editable1" contenteditable="true">
  16 <table id="table1" border="1">
  17 <tr id="tr1"><td>ABCDEFG</td><td>HIJKLMN</td></tr>
  18 <tr id="tr2"><td>ABCDEFG</td><td>HIJKLMN</td></tr>
  19 </table>
  20 <div id="edit1">test</div>
  21 <img id="img1" src="green.png">
  22 <div id="abs1" style="position: absolute; top: 100px; left: 300px; width: 100px; height: 100px; background-color: green;"></div>
  23 </div>
  24 <pre id="test">
  25
  26 <script class="testbody" type="application/javascript">
  27 add_task(async function testAbsPosUI() {
  28   await new Promise((resolve) => {
  29     SimpleTest.waitForFocus(() => {
  30       SimpleTest.executeSoon(resolve);
  31     }, window);
  32   });
  33
  34   document.execCommand("enableAbsolutePositionEditing", false, "true");
  35   ok(document.queryCommandState("enableAbsolutePositionEditing"),
  36     "Enable absolute positioned editor");
  37
  38   let edit1 = document.getElementById("edit1");
  39   edit1.innerText = "test";
  40   synthesizeMouseAtCenter(edit1, {});
  41   synthesizeKey("a");
  42   isnot(edit1.firstChild.textContent, "test", "Text is modified");
  43   let abs1 = document.getElementById("abs1");
  44   ok(!abs1.hasAttribute("_moz_abspos"), "_moz_abspos attribute should be false yet");
  45
  46   let promiseForAbsEditor = new Promise((resolve) => {
  47     document.addEventListener("selectionchange", () => {
  48       resolve();
  49     }, {once: true});
  50   });
  51   synthesizeMouseAtCenter(abs1, {});
  52   await promiseForAbsEditor;
  53   ok(abs1.hasAttribute("_moz_abspos"), "_moz_abspos attribute should be true");
  54
  55   synthesizeKey("z", { accelKey: true });
  56   is(edit1.firstChild.textContent, "test", "Text is restored by undo");
  57
  58   // TODO: no good way to move absolute position grab.
  59
  60   document.execCommand("enableAbsolutePositionEditing", false, "false");
  61 });
  62
  63 add_task(function testResizerUI() {
  64   document.execCommand("enableObjectResizing", false, "true");
  65   ok(document.queryCommandState("enableObjectResizing"),
  66     "Enable object resizing  editor");
  67
  68   let edit1 = document.getElementById("edit1");
  69   edit1.innerText = "test";
  70   synthesizeMouseAtCenter(edit1, {});
  71   synthesizeKey("h");
  72   isnot(edit1.firstChild.textContent, "test", "Text is modified");
  73
  74   let img1 = document.getElementById("img1");
  75   synthesizeMouseAtCenter(img1, {});
  76   ok(img1.hasAttribute("_moz_resizing"),
  77      "_moz_resizing attribute should be true");
  78
  79   synthesizeKey("z", { accelKey: true });
  80   is(edit1.firstChild.textContent, "test", "Text is restored by undo");
  81
  82   // Resizer
  83
  84   synthesizeMouseAtCenter(edit1, {});
  85   synthesizeKey("j");
  86   isnot(edit1.firstChild.textContent, "test", "Text is modified");
  87
  88   synthesizeMouseAtCenter(img1, {});
  89   ok(img1.hasAttribute("_moz_resizing"),
  90      "_moz_resizing attribute should be true");
  91
  92   // Emulate drag & drop
  93   let origWidth = img1.width;
  94   let posX = img1.clientWidth;
  95   let posY = img1.clientHeight - (img1.height / 2);
  96   synthesizeMouse(img1, posX, posY, {type: "mousedown"});
  97   synthesizeMouse(img1, posX + 100, posY, {type: "mousemove"});
  98   synthesizeMouse(img1, posX + 100, posY, {type: "mouseup"});
  99
 100   isnot(img1.width, origWidth, "Image is resized");
 101   synthesizeKey("z", { accelKey: true });
 102   is(img1.width, origWidth, "Image width is restored by undo");
 103
 104   synthesizeKey("z", { accelKey: true });
 105   is(edit1.firstChild.textContent, "test", "Text is restored by undo");
 106
 107   document.execCommand("enableObjectResizing", false, "false");
 108 });
 109
 110 add_task(async function testInlineTableUI() {
 111   document.execCommand("enableInlineTableEditing", false, "true");
 112   ok(document.queryCommandState("enableInlineTableEditing"),
 113     "Enable Inline Table editor");
 114
 115   let tr1 = document.getElementById("tr1");
 116   synthesizeMouseAtCenter(tr1, {});
 117   synthesizeKey("o");
 118   isnot(tr1.firstChild.firstChild.textContent, "ABCDEFG",
 119         "Text is modified");
 120
 121   let tr2 = document.getElementById("tr2");
 122   synthesizeMouseAtCenter(tr2, {});
 123   synthesizeKey("y");
 124   isnot(tr2.firstChild.firstChild.textContent, "ABCDEFG",
 125         "Text is modified");
 126
 127   synthesizeKey("z", { accelKey: true });
 128   is(tr2.firstChild.firstChild.textContent, "ABCDEFG",
 129      "Text is restored by undo");
 130
 131   synthesizeKey("z", { accelKey: true });
 132   is(tr1.firstChild.firstChild.textContent, "ABCDEFG",
 133      "Text is restored by undo");
 134
 135   synthesizeMouseAtCenter(tr1, {});
 136   synthesizeKey("p");
 137   isnot(tr1.firstChild.firstChild.textContent, "ABCDEFG",
 138         "Text is modified");
 139
 140   // Inline table editing UI
 141
 142   synthesizeMouseAtCenter(tr2, {});
 143   synthesizeMouse(tr2, 0, tr2.clientHeight / 2, {});
 144   ok(!document.getElementById("tr2"),
 145      "id=tr2 should be removed by a click in the row");
 146
 147   synthesizeKey("z", { accelKey: true });
 148   ok(document.getElementById("tr2"), "id=tr2 should be restored by undo");
 149
 150   synthesizeKey("z", { accelKey: true });
 151   is(tr1.firstChild.firstChild.textContent, "ABCDEFG",
 152      "Text is restored by undo");
 153
 154   document.execCommand("enableInlineTableEditing", false, "false");
 155 });
 156
 157 </script>
 158 </pre>
 159 </body>
 160 </html>