mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
291 lines
8.7 KiB
HTML
291 lines
8.7 KiB
HTML
<!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: ["http://example.com/some-image"],
|
|
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>
|