Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/focus-selection.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test how selection changes when different elements are focused</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="container" tabindex="0">
<button>button</button>
<input type="submit">
<input type="text" data-expect="parent">
<input type="number" data-expect="parent">
<div tabindex="0" id="contenteditable">foo</div>
</div>
<script>
function doTest() {
getSelection().collapse(container);
let prevSelectedRange = getSelection().getRangeAt(0);
for (let element of container.children) {
let description = element.tagName.toLowerCase();
if (description === "input") {
description += " type = " + element.type;
}
element.focus();
assert_equals(getSelection().rangeCount, 1, "Should have 1 selected range after focusing " + description);
let selectedRange = getSelection().getRangeAt(0);
assert_true(selectedRange.collapsed, "Selection should be collapsed after focusing " + description);
let container = selectedRange.startContainer;
let offset = selectedRange.startOffset;
if (element.isContentEditable) {
assert_equals(container, element.childNodes[0],
"Selection range should be in text node after contenteditable element is focused.");
assert_equals(offset, 0, "Selection should have offset 0 after contenteditable element is focused.");
} else if (element.dataset.expect === "parent") {
assert_equals(container, element.parentNode,
"Selection range should be in parent after focusing " + description);
let expectedOffset = Array.from(element.parentNode.childNodes).indexOf(element);
assert_equals(offset, expectedOffset,
"Selection range should have offset just before element after focusing " + description);
} else {
assert_equals(container, prevSelectedRange.startContainer,
"Selection container should not change after focusing " + description);
assert_equals(offset, prevSelectedRange.startOffset,
"Selection offset should not change after focusing " + description);
}
prevSelectedRange = selectedRange;
}
}
test(() => {
contenteditable.contentEditable = false;
doTest();
}, 'div has contenteditable=false');
test(() => {
contenteditable.contentEditable = true;
doTest();
}, 'div has contenteditable=true');
</script>