| <!doctype html> |
| <title>Editing event tests</title> |
| <style>body { font-family: serif }</style> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <div id=test></div> |
| <div id=log></div> |
| <script> |
| "use strict"; |
| |
| var div = document.querySelector("#test"); |
| add_completion_callback(function() { div.parentNode.removeChild(div) }); |
| |
| function copyEvent(e) { |
| var ret = {}; |
| ret.original = e; |
| ["type", "target", "currentTarget", "eventPhase", "bubbles", "cancelable", |
| "defaultPrevented", "isTrusted", "command", "value"].forEach(function(k) { |
| ret[k] = e[k]; |
| }); |
| return ret; |
| } |
| |
| var tests = [ |
| { |
| name: "Simple editable div", |
| html: "<div contenteditable>foo<b>bar</b>baz</div>", |
| initRange: function(range) { |
| range.setStart(div.querySelector("b").firstChild, 0); |
| range.setEnd(div.querySelector("b"), 1); |
| }, |
| target: function() { return div.firstChild }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "Editable b", |
| html: "foo<b contenteditable>bar</b>baz", |
| initRange: function(range) { |
| range.setStart(div.querySelector("b").firstChild, 0); |
| range.setEnd(div.querySelector("b"), 1); |
| }, |
| target: function() { return div.querySelector("b") }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "No editable content", |
| html: "foo<b>bar</b>baz", |
| initRange: function(range) { |
| range.setStart(div.querySelector("b").firstChild, 0); |
| range.setEnd(div.querySelector("b"), 1); |
| }, |
| target: function() { return null }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "Partially-selected editable content", |
| html: "foo<b contenteditable>bar</b>baz", |
| initRange: function(range) { |
| range.setStart(div.querySelector("b").firstChild, 0); |
| range.setEnd(div, 3); |
| }, |
| target: function() { return null }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "Selection spans two editing hosts", |
| html: "<div contenteditable>foo</div><div contenteditable>bar</div>", |
| initRange: function(range) { |
| range.setStart(div.querySelector("div").firstChild, 2); |
| range.setEnd(div.querySelector("div + div").firstChild, 1); |
| }, |
| target: function() { return null }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "Selection includes two editing hosts", |
| html: "foo<div contenteditable>bar</div>baz<div contenteditable>quz</div>qoz", |
| initRange: function(range) { |
| range.setStart(div.firstChild, 2); |
| range.setEnd(div.lastChild, 1); |
| }, |
| target: function() { return null }, |
| command: "bold", |
| value: "", |
| }, |
| { |
| name: "Changing selection from handler", |
| html: "<div contenteditable>foo</div><div contenteditable>bar</div>", |
| initRange: function(range) { |
| range.setStart(div.querySelector("div").firstChild, 0); |
| range.setEnd(div.querySelector("div").firstChild, 3); |
| }, |
| target: function() { return div.firstChild }, |
| finalTarget: function() { return div.lastChild }, |
| beforeInputAction: function() { |
| getSelection().removeAllRanges(); |
| var range = document.createRange(); |
| range.setStart(div.querySelector("div + div").firstChild, 0); |
| range.setEnd(div.querySelector("div + div").firstChild, 3); |
| getSelection().addRange(range); |
| }, |
| command: "bold", |
| value: "", |
| }, |
| ]; |
| |
| var commandTests = { |
| backColor: ["green"], |
| createLink: ["http://www.w3.org/community/editing/"], |
| fontName: ["serif", "Helvetica"], |
| fontSize: ["6", "15px"], |
| foreColor: ["green"], |
| hiliteColor: ["green"], |
| italic: [], |
| removeFormat: [], |
| strikeThrough: [], |
| subscript: [], |
| superscript: [], |
| underline: [], |
| unlink: [], |
| delete: [], |
| formatBlock: ["p"], |
| forwardDelete: [], |
| indent: [], |
| insertHorizontalRule: ["id"], |
| insertHTML: ["<b>hi</b>"], |
| insertImage: ["../images/green.png"], |
| insertLineBreak: [], |
| insertOrderedList: [], |
| insertParagraph: [], |
| insertText: ["abc"], |
| insertUnorderedList: [], |
| justifyCenter: [], |
| justifyFull: [], |
| justifyLeft: [], |
| justifyRight: [], |
| outdent: [], |
| redo: [], |
| selectAll: [], |
| styleWithCSS: [], |
| undo: [], |
| useCSS: [], |
| }; |
| |
| Object.keys(commandTests).forEach(function(command) { |
| commandTests[command] = ["", "quasit"].concat(commandTests[command]); |
| commandTests[command].forEach(function(value) { |
| tests.push({ |
| name: "Command " + command + ", value " + format_value(value), |
| html: "<div contenteditable>foo<b>bar</b>baz</div>", |
| initRange: function(range) { |
| range.setStart(div.querySelector("b").firstChild, 0); |
| range.setEnd(div.querySelector("b"), 1); |
| }, |
| target: function() { |
| return ["redo", "selectAll", "styleWithCSS", "undo", "useCSS"] |
| .indexOf(command) == -1 ? div.firstChild : null; |
| }, |
| command: command, |
| value: value, |
| }); |
| }); |
| }); |
| |
| tests.forEach(function(obj) { |
| [true, false].forEach(function(cancel) { |
| // Kill all event handlers first |
| var newDiv = div.cloneNode(false); |
| div.parentNode.insertBefore(newDiv, div); |
| div.parentNode.removeChild(div); |
| div = newDiv; |
| |
| div.innerHTML = obj.html; |
| |
| var originalContents = div.cloneNode(true); |
| |
| getSelection().removeAllRanges(); |
| var range = document.createRange(); |
| obj.initRange(range); |
| getSelection().addRange(range); |
| |
| var target = obj.target(); |
| var finalTarget = "finalTarget" in obj ? obj.finalTarget() : target; |
| var command = obj.command; |
| var value = obj.value; |
| |
| var beforeInputEvents = []; |
| var inputEvents = []; |
| div.addEventListener("beforeinput", function(e) { |
| var copied = copyEvent(e); |
| copied.inputEventsLength = inputEvents.length; |
| beforeInputEvents.push(copied); |
| if (cancel) { |
| e.preventDefault(); |
| } |
| if ("beforeInputAction" in obj) { |
| obj.beforeInputAction(); |
| } |
| }); |
| div.addEventListener("input", function(e) { inputEvents.push(copyEvent(e)) }); |
| |
| // Uncomment this code instead of the execCommand() to make all the |
| // tests pass, as a sanity check |
| //var e = new Event("beforeinput", {bubbles: true, cancelable: true}); |
| //e.command = command; |
| //e.value = value; |
| //var ret = target ? target.dispatchEvent(e) : false; |
| //if (ret) { |
| // var e = new Event("input", {bubbles: true}); |
| // e.command = command; |
| // e.value = value; |
| // finalTarget.dispatchEvent(e); |
| //} |
| |
| var exception = null; |
| try { |
| document.execCommand(command, false, value); |
| } catch(e) { |
| exception = e; |
| } |
| |
| test(function() { |
| assert_equals(exception, null, "Unexpected exception"); |
| }, obj.name + ": execCommand() must not throw, " |
| + (cancel ? "canceled" : "uncanceled")); |
| |
| test(function() { |
| assert_equals(beforeInputEvents.length, target ? 1 : 0, |
| "number of beforeinput events fired"); |
| if (beforeInputEvents.length == 0) { |
| assert_equals(inputEvents.length, 0, "number of input events fired"); |
| return; |
| } |
| var e = beforeInputEvents[0]; |
| assert_equals(e.inputEventsLength, 0, "number of input events fired"); |
| assert_equals(e.type, "beforeinput", "event.type"); |
| assert_equals(e.target, target, "event.target"); |
| assert_equals(e.currentTarget, div, "event.currentTarget"); |
| assert_equals(e.eventPhase, Event.BUBBLING_PHASE, "event.eventPhase"); |
| assert_equals(e.bubbles, true, "event.bubbles"); |
| assert_equals(e.cancelable, true, "event.cancelable"); |
| assert_equals(e.defaultPrevented, false, "event.defaultPrevented"); |
| assert_equals(e.command, command, "e.command"); |
| assert_equals(e.value, value, "e.value"); |
| assert_own_property(window, "EditingBeforeInputEvent", |
| "window.EditingBeforeInputEvent must exist"); |
| assert_equals(Object.getPrototypeOf(e.original), |
| EditingBeforeInputEvent.prototype, |
| "event prototype"); |
| assert_true(originalContents.isEqualNode(div), |
| "div contents not yet changed"); |
| assert_equals(e.isTrusted, true, "event.isTrusted"); |
| }, obj.name + ": beforeinput event, " + (cancel ? "canceled" : "uncanceled")); |
| |
| test(function() { |
| assert_equals(inputEvents.length, target && !cancel ? 1 : 0, |
| "number of input events fired"); |
| if (!target || cancel) { |
| assert_true(originalContents.isEqualNode(div), |
| "div contents must not be changed"); |
| return; |
| } |
| var e = inputEvents[0]; |
| assert_equals(e.type, "input", "event.type"); |
| assert_equals(e.target, finalTarget, "event.target"); |
| assert_equals(e.currentTarget, div, "event.currentTarget"); |
| assert_equals(e.eventPhase, Event.BUBBLING_PHASE, "event.eventPhase"); |
| assert_equals(e.bubbles, true, "event.bubbles"); |
| assert_equals(e.cancelable, false, "event.cancelable"); |
| assert_equals(e.defaultPrevented, false, "event.defaultPrevented"); |
| assert_equals(e.command, command, "e.command"); |
| assert_equals(e.value, value, "e.value"); |
| assert_own_property(window, "EditingInputEvent", |
| "window.EditingInputEvent must exist"); |
| assert_equals(Object.getPrototypeOf(e.original), |
| EditingInputEvent.prototype, |
| "event prototype"); |
| assert_equals(e.isTrusted, true, "event.isTrusted"); |
| }, obj.name + ": input event, " + (cancel ? "canceled" : "uncanceled")); |
| }); |
| }); |
| |
| // Thanks, Gecko. |
| document.body.bgColor = ""; |
| </script> |
