Quelle event.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/testing/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 },
        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) {
    // 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 inputEvents = [];
    div.addEventListener("input", function(e) { inputEvents.push(copyEvent(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");

    test(function() {
        assert_equals(inputEvents.length, target ? 1 : 0,
            "number of input events fired");
        if (!target) {
            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_own_property(window, "InputEvent",
            "window.InputEvent must exist");
        assert_equals(Object.getPrototypeOf(e.original), InputEvent.prototype,
            "event prototype");
        assert_equals(e.isTrusted, true, "event.isTrusted");
    }, obj.name + ": input event");
});

// Thanks, Gecko.
document.body.bgColor = "";
</script>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.26 Sekunden (vorverarbeitet am 2026-04-30) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.