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