Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /selection/contenteditable/initial-selection-during-focus-event-propagation.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selection should've already been initialized into the editing host when `focus` event is dispatched</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../../editing/include/editor-test-utils.js"></script>
<script>
"use strict";
/**
* > The focus MUST be taken from the element before the dispatch of this event type.
* So, the builtin editors should've already initialized Selection into the
* editing host (if and only if they do that) before `focus` event is fired.
* In other words, any `focus` event listeners should see the same selection
* ranges when an editing host gets focus.
*/
addEventListener("load", () => {
promise_test(async () => {
// Activate for allowing to fire `focus` event on Chrome.
await test_driver.click(document.querySelector("div"));
const editingHost = document.createElement("div");
// Add `focus` event listener on window before creating the editing host.
// If the builtin editor uses a `focus` event listener of the window, this
// test will fail.
let rangeAtFocusOnWindow;
window.addEventListener("focus", event => {
rangeAtFocusOnWindow = EditorTestUtils.getRangeDescription(
getSelection().rangeCount ? getSelection().getRangeAt(0) : null
);
}, {capture: true});
// Then, this is the most important case. Web apps usually add event
// listener to the editing host for the simplest implementation.
let rangeAtFocusOnEditingHost;
editingHost.addEventListener("focus", event => {
rangeAtFocusOnEditingHost = EditorTestUtils.getRangeDescription(
getSelection().rangeCount ? getSelection().getRangeAt(0) : null
);
}, {capture: true});
editingHost.innerHTML = "ABC<br>";
document.body.appendChild(editingHost);
editingHost.contentEditable = true;
// Ensure the editing host does not have focus nor selection ranges.
document.activeElement?.blur();
getSelection().removeAllRanges();
// Then, let's focus it. This should run the `focus` event listeners
// synchronously.
editingHost.focus();
const rangeAfterPropagation = EditorTestUtils.getRangeDescription(
getSelection().rangeCount ? getSelection().getRangeAt(0) : null
);
test(() => {
assert_equals(
rangeAtFocusOnWindow,
rangeAfterPropagation,
"Selection when `focus` event listener of window runs should be the same as Selection after the propagation"
);
}, "at the window");
test(() => {
assert_equals(
rangeAtFocusOnEditingHost,
rangeAfterPropagation,
"Selection when `focus` event listener of editing host runs should be the same as Selection after the propagation"
);
}, "at the editing host");
});
}, {once: true});
</script>
</head>
<body><div>Placeholder for click</div></body>
</html>