<!doctype html> <html> <head> <link rel="stylesheet" href="/tests/SimpleTest/test.css"> <script src="/tests/SimpleTest/SimpleTest.js"></script> <script src="/tests/SimpleTest/EventUtils.js"></script> </head> <body> <span id="text" style="font-size: 40px;">Some Text</span> <input id="input" value="Drag Me"> <textarea id="textarea">Some Text To Drag</textarea> <p id="contenteditable" contenteditable="true">This is some <b id="bold">editable</b> text.</p> <p id="nestedce" contenteditable="true"><span id="first"> </span>First letter <span id="noneditable" contenteditable="false">Middle</span> Last part</p> <script type="application/javascript"> SimpleTest.waitForExplicitFinish(); // This listener allows us to clear the default data for the selection added for the drag. var shouldClear = false; window.addEventListener("dragstart", function (event) { if (shouldClear) event.dataTransfer.clearData() }, true); function doTest() { const htmlContextData = { type: 'text/_moz_htmlcontext', data: '<html><body></body></html>' }; const htmlInfoData = { type: 'text/_moz_htmlinfo', data: '0,0' }; const htmlData = { type: 'text/html', data: '<span id="text" style="font-size: 40px;">Some Text</span>' }; const htmlContextDataEditable = { type: 'text/_moz_htmlcontext', data: '<html><body><p id="contenteditable" contenteditable="true"></p></body></html>' }; var text = document.getElementById("text"); var input = document.getElementById("input"); var contenteditable = document.getElementById("contenteditable"); var selection = window.getSelection(); // -------- Test dragging regular text selection.selectAllChildren(text); var result = synthesizeDragStart(text, [[htmlContextData, htmlInfoData, htmlData, {type: "text/plain", data: "Some Text"}]], window, 40, 10); is(result, null, "Test dragging regular text"); // -------- Test dragging text from an <input> input.setSelectionRange(1, 4); result = synthesizeDragStart(input, [[{type: "text/plain", data: "rag"}]], window, 25, 6); is(result, null, "Test dragging input"); // -------- Test dragging text from a <textarea> textarea.setSelectionRange(1, 7); result = synthesizeDragStart(textarea, [[{type: "text/plain", data: "ome Te"}]], window, 25, 6); is(result, null, "Test dragging textarea"); textarea.blur(); // -------- Test dragging text from a contenteditable selection.selectAllChildren(contenteditable.childNodes[1]); result = synthesizeDragStart(contenteditable.childNodes[1], [[htmlContextDataEditable, htmlInfoData, {type: 'text/html', data: '<b id="bold">editable</b>' }, {type: "text/plain", data: "editable"}]], window, 5, 6); is(result, null, "Test dragging contenteditable"); contenteditable.blur(); // -------- Test dragging regular text of text/html to <input> selection.selectAllChildren(text); input.value = ""; synthesizeDrop(text, input, [], "copy"); is(input.value, "Some Text", "Drag text/html onto input"); // -------- Test dragging regular text of text/html to disabled <input> selection.selectAllChildren(text); input.value = ""; input.disabled = true; synthesizeDrop(text, input, [], "copy"); is(input.value, "", "Drag text/html onto disabled input"); input.disabled = false; // -------- Test dragging regular text of text/html to readonly <input> selection.selectAllChildren(text); input.readOnly = true; synthesizeDrop(text, input, [], "copy"); is(input.value, "", "Drag text/html onto readonly input"); input.readOnly = false; // -------- Test dragging regular text of text/html to <input>. This sets // shouldClear to true so that the default drag data is not present // and we can use the data passed to synthesizeDrop. This allows // testing of a drop with just text/html. shouldClear = true; selection.selectAllChildren(text); input.value = ""; synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"}]], "copy"); is(input.value, "", "Drag text/html onto input"); // -------- Test dragging regular text of text/plain and text/html to <input> selection.selectAllChildren(text); input.value = ""; synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"}, {type: "text/plain", data: "Some Plain Text"}]], "copy"); is(input.value, "Some Plain Text", "Drag text/html and text/plain onto input"); // -------- Test dragging regular text of text/plain to <textarea> // XXXndeakin Can't test textareas due to some event handling issue // selection.selectAllChildren(text); // synthesizeDrop(text, textarea, [[{type: "text/plain", data: "Somewhat Longer Text"}]], "copy"); // is(textarea.value, "Somewhat Longer Text", "Drag text/plain onto textarea"); // -------- Test dragging special text type of text/plain to contenteditable selection.selectAllChildren(text); synthesizeDrop(text, input, [[{type: "text/x-moz-text-internal", data: "Some Special Text"}]], "copy"); is(input.value, "Some Plain Text", "Drag text/x-moz-text-internal onto input"); // -------- Test dragging regular text of text/plain to contenteditable selection.selectAllChildren(text); synthesizeDrop(text, contenteditable, [[{type: "text/plain", data: "Sample Text"}]], "copy"); is(contenteditable.childNodes.length, 3, "Drag text/plain onto contenteditable child nodes"); is(contenteditable.textContent, "This is some editable text.Sample Text", "Drag text/plain onto contenteditable text"); // -------- Test dragging regular text of text/html to contenteditable selection.selectAllChildren(text); synthesizeDrop(text, contenteditable, [[{type: "text/html", data: "Sample <i>Italic</i> Text"}]], "copy"); is(contenteditable.childNodes.length, 6, "Drag text/html onto contenteditable child nodes"); is(contenteditable.childNodes[4].tagName, "I", "Drag text/html onto contenteditable italic"); is(contenteditable.childNodes[4].textContent, "Italic", "Drag text/html onto contenteditable italic text"); // -------- Test dragging contenteditable to <input> selection.selectAllChildren(document.getElementById("bold")); synthesizeDrop(bold, input, [[{type: "text/html", data: "<b>editable</b>"}, {type: "text/plain", data: "editable"}]], "copy"); is(input.value, "Some Plain Texteditable", "Move text/html and text/plain from contenteditable onto input"); // -------- Test dragging contenteditable to contenteditable shouldClear = false; selection.selectAllChildren(contenteditable.childNodes[4]); synthesizeDrop(contenteditable.childNodes[4], contenteditable, [], "copy"); is(contenteditable.childNodes.length, 7, "Move text/html and text/plain from contenteditable onto itself child nodes"); is(contenteditable.childNodes[6].tagName, "I", "Move text/html and text/plain from contenteditable onto itself italic"); is(contenteditable.childNodes[6].textContent, "Italic", "Move text/html and text/plain from contenteditable onto itself text"); // We'd test 'move' here as well as 'copy', but that requires knowledge of // the source of the drag which drag simulation doesn't provide. // -------- Test dragging non-editable nested inside contenteditable to contenteditable input.focus(); // this resets some state in the selection otherwise an inexplicable error occurs calling selectAllChildren. input.blur(); var nonEditable = document.getElementById("noneditable"); selection.selectAllChildren(nonEditable); synthesizeDrop(nonEditable, document.getElementById("first"), [], "copy"); is(document.getElementById("nestedce").textContent, " MiddleFirst letter Middle Last part", "Drag non-editable text/html onto contenteditable text"); SimpleTest.finish(); } SimpleTest.waitForFocus(doTest); </script> </body> </html>