third_party/web_platform_tests/editing/event.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: ["../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>