124 lines
5.6 KiB
HTML
124 lines
5.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description("This tests that the input events are dispatched when contentEditable nodes are edited");
|
|
|
|
var actualInputEventCount = 0;
|
|
var expectedInputEventCount = 0;
|
|
|
|
function fired(evt, expectedId, expectedText)
|
|
{
|
|
actualInputEventCount++;
|
|
shouldBe("event.target.id", "'" + expectedId + "'");
|
|
shouldBe("event.target.innerHTML", "'" + expectedText + "'");
|
|
}
|
|
|
|
var testDataRoot = document.createElement("div");
|
|
document.body.appendChild(testDataRoot);
|
|
|
|
function makeTestTarget(fragment)
|
|
{
|
|
testDataRoot.innerHTML = fragment;
|
|
return testDataRoot.firstChild;
|
|
}
|
|
|
|
function clearTestTarget()
|
|
{
|
|
makeTestTarget("");
|
|
}
|
|
|
|
function setupForFiringTest(fragment, expectedText)
|
|
{
|
|
var target = makeTestTarget(fragment);
|
|
target.addEventListener("input", function(evt) { fired(evt, target.id, expectedText); });
|
|
sel.selectAllChildren(target);
|
|
expectedInputEventCount++;
|
|
return target;
|
|
}
|
|
|
|
var sel = document.getSelection();
|
|
|
|
// A trivial case: inserting text should dispatch the event
|
|
var target0 = setupForFiringTest('<p id="target0" contentEditable>Text should be replace this</p>', "Text");
|
|
sel.selectAllChildren(target0);
|
|
document.execCommand("insertText", false, "Text");
|
|
|
|
// A direct DOM manipulation shouldn't dispatch the event
|
|
var target1 = makeTestTarget('<p id="target1" contentEditable>Text should be insert via script:</p>');
|
|
target1.addEventListener("input", function(evt) { testFailed("should not be reached"); });
|
|
target1.firstChild.data += "Text";
|
|
|
|
// An event should be dispatched even if resulting DOM tree doesn't change after the edit. (with replacing it)
|
|
var target2Text = "This text should not be changed.";
|
|
var target2 = setupForFiringTest('<p id="target2" contentEditable>This text should not be changed.</p>', target2Text);
|
|
document.execCommand("insertText", false, target2Text);
|
|
|
|
// An "delete" command should dispatch an input event.
|
|
var target3 = setupForFiringTest('<p id="target3" contentEditable>This text shouldn be deleted.</p>', "<br>");
|
|
document.execCommand("delete", false);
|
|
|
|
// A command other than text-editing should dispatch an input event.
|
|
// Also note that createLink is a composite command,
|
|
// so this test also ensures that even composite command dispatches the event only once.
|
|
var target4 = setupForFiringTest('<p id="target4" contentEditable>This text should be a link.</p>', "<a href=\"http://www.example.com/\">This text should be a link.</a>");
|
|
document.execCommand("createLink", false, "http://www.example.com/");
|
|
|
|
// An event shouldn't be dispatched to a 'display:none' node.
|
|
var target5 = makeTestTarget('<p id="target5" contentEditable>This will not be rendered.</p>');
|
|
target5.addEventListener("input", function(evt) { testFailed("should not be reached"); });
|
|
sel.selectAllChildren(target5);
|
|
target5.style.display = "none";
|
|
document.execCommand("insertText", false, "Text");
|
|
|
|
// The event should be dispatched from the editable root.
|
|
makeTestTarget('<p id="target6parent" contentEditable><span id="target6start">Start,</span><span id="target6middle">Middle,</span><span id="target6end">End.</span></p>');
|
|
var target6parent = document.getElementById("target6parent");
|
|
var target6start = document.getElementById("target6start");
|
|
var target6middle = document.getElementById("target6middle");
|
|
var target6end = document.getElementById("target6end");
|
|
|
|
var expectedText6 = "<a href=\"http://www.example.com/\"><span id=\"target6start\">Start,</span><span id=\"target6middle\">Middle,</span><span id=\"target6end\">End.</span></a>";
|
|
target6parent.addEventListener("input", function(evt) { fired(evt, "target6parent", expectedText6); });
|
|
expectedInputEventCount++;
|
|
target6start.addEventListener("input", function(evt) { testFailed("should not be reached"); });
|
|
target6end.addEventListener("input", function(evt) { testFailed("should not be reached"); });
|
|
target6middle.addEventListener("input", function(evt) { fired(evt, "target6end", ""); });
|
|
sel.selectAllChildren(target6parent);
|
|
document.execCommand("createLink", false, "http://www.example.com/");
|
|
|
|
// Ensure key events can cause the event
|
|
var target7 = setupForFiringTest('<p id="target7" contentEditable>Replaced</p>', "X");
|
|
sel.selectAllChildren(target7);
|
|
eventSender.keyDown('X');
|
|
|
|
var target8 = setupForFiringTest('<p id="target8" contentEditable>Deleted</p>', '<br>');
|
|
sel.selectAllChildren(target8);
|
|
eventSender.keyDown('delete');
|
|
|
|
var target9parent = makeTestTarget('<div id="target9parent" contenteditable><div id="target9child" contenteditable>foo</div></div>');
|
|
var target9child = document.getElementById('target9child');
|
|
target9child.addEventListener("input", function(evt) { testFailed("should not be reached"); });
|
|
target9parent.addEventListener("input", function(evt) { fired(evt, target9parent.id, '<div id="target9child" contenteditable="">Replacing</div>'); });
|
|
sel.selectAllChildren(target9child);
|
|
document.execCommand("insertText", false, "Replacing");
|
|
expectedInputEventCount++;
|
|
|
|
var target10parent = makeTestTarget('<div id="t10parent" contenteditable><div id="t10child" contenteditable=false><div id="t10gch" contenteditable>foo</div></div></div>');
|
|
var target10child = document.getElementById("t10child");
|
|
var target10gch = document.getElementById("t10gch");
|
|
target10gch.addEventListener("input", function(evt) { fired(evt, target10gch.id, 'Replacing'); });
|
|
sel.selectAllChildren(target10gch);
|
|
document.execCommand("insertText", false, "Replacing");
|
|
expectedInputEventCount++;
|
|
|
|
shouldBe("expectedInputEventCount", "actualInputEventCount");
|
|
clearTestTarget();
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|