зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1776332 - part 2: Create a tentative WPT to check attribute handling of joining elements by the builtin editor r=m_kato
Similar to the previous patch, this adds tentative tests. Different from the previous tests, joining shouldn't touch attributes of the original nodes. This tests do not check which node is deleted from the document, but in the future, it should be tested after fixing bug 1735608 completely. Differential Revision: https://phabricator.services.mozilla.com/D150221
This commit is contained in:
Masayuki Nakano
Родитель
d4bfde068c
Коммит
9259d21c51
|
|
@ -1,86 +0,0 @@
|
|||
[joining_nodes.html]
|
||||
type: testharness
|
||||
[Joining <dt> and <dd> nodes, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <dt> and <dd> nodes, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <dd> and <dt> nodes, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <dd> and <dt> nodes, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h1> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h1> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h2> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h2> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h3> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h3> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h4> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h4> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h5> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h5> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h6> and <p> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <h6> and <p> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h1> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h1> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h2> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h2> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h3> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h3> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h4> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h4> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h5> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h5> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h6> elements, delete command]
|
||||
expected: FAIL
|
||||
|
||||
[Joining <p> and <h6> elements, forwarddelete command]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>Joining nodes with delete/forwardDelete command</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
const kTests = [
|
||||
{ description: "Joining text nodes separated by <br>",
|
||||
innerHTML: "<p>foo bar<br id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
// XXX Attributes of right <li> element are cloned but this may not be expected behavior.
|
||||
{ description: "Joining <li> nodes in <ul>",
|
||||
innerHTML: "<ul><li>foo bar</li><li id=\"separator\">baz</li></ul>",
|
||||
expectedInnerHTML: "<ul><li id=\"separator\">foo barbaz</li></ul>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
// XXX Attributes of right <li> element are cloned but this may not be expected behavior.
|
||||
{ description: "Joining <li> nodes in <ol>",
|
||||
innerHTML: "<ol><li>foo bar</li><li id=\"separator\">baz</li></ol>",
|
||||
expectedInnerHTML: "<ol><li id=\"separator\">foo barbaz</li></ol>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <dt> and <dd> nodes",
|
||||
innerHTML: "<dl><dt>foo bar</dt><dd id=\"separator\">baz</dd></dl>",
|
||||
expectedInnerHTML: "<dl><dt>foo barbaz</dt></dl>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <dd> and <dt> nodes",
|
||||
innerHTML: "<dl><dd>foo bar</dd><dt id=\"separator\">baz</dt></dl>",
|
||||
expectedInnerHTML: "<dl><dd>foo barbaz</dd></dl>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
// XXX Attributes of right <p> element are cloned but this may not be expected behavior.
|
||||
{ description: "Joining <p> elements",
|
||||
innerHTML: "<p>foo bar</p><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<p id=\"separator\">foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
// XXX Attributes of right <div> element are cloned but this may not be expected behavior.
|
||||
{ description: "Joining <div> elements",
|
||||
innerHTML: "<div>foo bar</div><div id=\"separator\">baz</div>",
|
||||
expectedInnerHTML: "<div id=\"separator\">foo barbaz</div>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h1> and <p> elements",
|
||||
innerHTML: "<h1>foo bar</h1><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h1>foo barbaz</h1>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h2> and <p> elements",
|
||||
innerHTML: "<h2>foo bar</h2><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h2>foo barbaz</h2>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h3> and <p> elements",
|
||||
innerHTML: "<h3>foo bar</h3><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h3>foo barbaz</h3>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h4> and <p> elements",
|
||||
innerHTML: "<h4>foo bar</h4><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h4>foo barbaz</h4>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h5> and <p> elements",
|
||||
innerHTML: "<h5>foo bar</h5><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h5>foo barbaz</h5>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <h6> and <p> elements",
|
||||
innerHTML: "<h6>foo bar</h6><p id=\"separator\">baz</p>",
|
||||
expectedInnerHTML: "<h6>foo barbaz</h6>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h1> elements",
|
||||
innerHTML: "<p>foo bar</p><h1 id=\"separator\">baz</h1>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h2> elements",
|
||||
innerHTML: "<p>foo bar</p><h2 id=\"separator\">baz</h2>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h3> elements",
|
||||
innerHTML: "<p>foo bar</p><h3 id=\"separator\">baz</h3>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h4> elements",
|
||||
innerHTML: "<p>foo bar</p><h4 id=\"separator\">baz</h4>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h5> elements",
|
||||
innerHTML: "<p>foo bar</p><h5 id=\"separator\">baz</h5>",
|
||||
expectedInnerHTML: "<p>foo barbaz</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
{ description: "Joining <p> and <h6> elements",
|
||||
innerHTML: "<p>foo bar</p><h6 id=\"separator\">baz</h6>",
|
||||
expectedInnerHTML: "<p>foo barbar</p>",
|
||||
expectedSelectionRange: function (editor) {
|
||||
return { collapsed: true,
|
||||
startContainer: editor.firstChild.firstChild,
|
||||
startOffset: 7 };
|
||||
}, },
|
||||
];
|
||||
|
||||
document.body.innerHTML = "<div id=\"editor\" contenteditable></div>";
|
||||
let editor = document.getElementById("editor");
|
||||
editor.focus();
|
||||
let selection = document.getSelection();
|
||||
|
||||
for (const kTest of kTests) {
|
||||
editor.innerHTML = kTest.innerHTML;
|
||||
let separator = document.getElementById("separator");
|
||||
function getFirstLeafNode(node) {
|
||||
for (; node.firstChild; node = node.firstChild) {
|
||||
}
|
||||
return node;
|
||||
}
|
||||
if (separator.nodeName.toLowerCase() == "br") {
|
||||
if (separator.nextSibling) {
|
||||
selection.collapse(getFirstLeafNode(separator.nextSibling), 0);
|
||||
} else {
|
||||
selection.collapse(separator.parentNode,
|
||||
separator.parentNode.childNodes.length);
|
||||
}
|
||||
} else {
|
||||
selection.collapse(getFirstLeafNode(separator), 0);
|
||||
}
|
||||
test(function () {
|
||||
document.execCommand("delete", false);
|
||||
assert_equals(editor.innerHTML, kTest.expectedInnerHTML);
|
||||
const kExpectedSelectionRange = kTest.expectedSelectionRange(editor);
|
||||
let range = selection.getRangeAt(0);
|
||||
assert_equals(range.collapsed, kExpectedSelectionRange.collapsed);
|
||||
assert_equals(range.startContainer, kExpectedSelectionRange.startContainer);
|
||||
assert_equals(range.startOffset, kExpectedSelectionRange.startOffset);
|
||||
if (kExpectedSelectionRange.collapsed) {
|
||||
assert_equals(range.endContainer, kExpectedSelectionRange.startContainer);
|
||||
assert_equals(range.endOffset, kExpectedSelectionRange.startOffset);
|
||||
} else {
|
||||
assert_equals(range.endContainer, kExpectedSelectionRange.endContainer);
|
||||
assert_equals(range.endOffset, kExpectedSelectionRange.endOffset);
|
||||
}
|
||||
}, kTest.description + ", delete command");
|
||||
|
||||
editor.innerHTML = kTest.innerHTML;
|
||||
separator = document.getElementById("separator");
|
||||
function getLastLeafNode(node) {
|
||||
for (; node.lastChild; node = node.lastChild) {
|
||||
}
|
||||
return node;
|
||||
}
|
||||
function getLength(node) {
|
||||
if (node.length !== undefined) {
|
||||
return node.length;
|
||||
}
|
||||
return node.childNodes.length;
|
||||
}
|
||||
if (separator.previousSibling) {
|
||||
let lastLeafNode = getLastLeafNode(separator.previousSibling);
|
||||
selection.collapse(lastLeafNode, getLength(lastLeafNode));
|
||||
} else {
|
||||
selection.collapse(separator.parentNode, 0);
|
||||
}
|
||||
test(function () {
|
||||
try {
|
||||
document.execCommand("forwarddelete", false);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
assert_equals(editor.innerHTML, kTest.expectedInnerHTML);
|
||||
const kExpectedSelectionRange = kTest.expectedSelectionRange(editor);
|
||||
let range = selection.getRangeAt(0);
|
||||
assert_equals(range.collapsed, kExpectedSelectionRange.collapsed);
|
||||
assert_equals(range.startContainer, kExpectedSelectionRange.startContainer);
|
||||
assert_equals(range.startOffset, kExpectedSelectionRange.startOffset);
|
||||
if (kExpectedSelectionRange.collapsed) {
|
||||
assert_equals(range.endContainer, kExpectedSelectionRange.startContainer);
|
||||
assert_equals(range.endOffset, kExpectedSelectionRange.startOffset);
|
||||
} else {
|
||||
assert_equals(range.endContainer, kExpectedSelectionRange.endContainer);
|
||||
assert_equals(range.endOffset, kExpectedSelectionRange.endOffset);
|
||||
}
|
||||
}, kTest.description + ", forwarddelete command");
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче