Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /selection/contenteditable/modify.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Selection.modify() inside contenteditable</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div contenteditable id="host">Editable</div>
<div>Non-editable</div>
<div id="inlinehosts">
Prefix: <span contenteditable title="inline">Editable</span>: Suffix<br>
Prefix: <span contenteditable style="display:inline-block;" title="inline-block">Editable</span>: Suffix<br>
<span contenteditable title="suffix only">Editable</span>: Suffix<br>
Prefix: <span contenteditable title="prefix only">Editable</span><br>
<span contenteditable title="standalone">Editable</span><br>
Prefix: <span contenteditable title="inline linebreak">Edit<br>able</span>: Suffix<br>
Prefix: <span contenteditable style="display:inline-block;" title="inline-block linebreak">Edit<br>able</span>:
Suffix<br>
</div>
<script>
/** @param {Node} parent */
function* textNodeEntries(parent) {
for (const [i, node] of parent.childNodes.entries()) {
if (node.nodeType === Node.TEXT_NODE) {
yield [i, node];
}
}
}
const selection = getSelection();
test(() => {
selection.collapse(host);
selection.modify('extend', 'forward', 'word');
selection.modify('extend', 'forward', 'word');
assert_equals(selection.focusNode.parentElement, host);
}, "Selection.modify() must not select outside of the host");
/** @type {NodeListOf<HTMLElement>} */
const hosts = inlinehosts.querySelectorAll("span[contenteditable]");
for (const host of hosts) {
test(() => {
for (const [i, text] of textNodeEntries(host)) {
selection.collapse(text, 1);
selection.modify("move", "forward", "lineboundary");
if (selection.focusNode === host) {
assert_equals(selection.focusOffset, i + 1, "focusOffset should be after the text node");
} else {
assert_equals(selection.focusNode, text, "focusNode should be the text node");
assert_equals(selection.focusOffset, text.textContent.length, "focusOffset should be the length of the text node");
}
}
}, `Selection.modify('move', 'forward', 'lineboundary') must be within the inline editing host: ${host.title}`);
test(() => {
for (const [i, text] of textNodeEntries(host)) {
selection.collapse(text, 1);
selection.modify("move", "backward", "lineboundary");
assert_equals(selection.focusNode, text, "focusNode should be the text node");
assert_equals(selection.focusOffset, 0, "focusOffset should be 0");
}
}, `Selection.modify('move', 'backward', 'lineboundary') must be within the inline editing host: ${host.title}`);
}
</script>