Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/editing/dnd/platform/mousedown-drag-select-input-display-change.html - WPT Dashboard Interop Dashboard
<!doctype html>
<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>
<title>Test text selection dragging still works when mousedown causes a</title>
<style>
body {
margin: 0
}
input {
/* Redundant, but pedantic */
display: inline-block;
appearance: none;
border: none;
padding: 0;
width: 250px;
font-size: 16px;
}
</style>
<input value="XXXXXXXXXXXXXXXXXXXXX" onmousedown="this.style.display = 'inline'" onmouseup="this.style.display = ''">
<script>
promise_test(async function (t) {
const input = document.querySelector("input");
const rect = input.getBoundingClientRect();
const endX = Math.floor(rect.width);
const centerY = Math.round(rect.height / 2);
await new test_driver.Actions()
.pointerMove(32, centerY)
.pointerDown()
.pointerMove(endX - 10, centerY)
.pointerMove(endX - 2, centerY)
.pointerUp()
.send();
assert_equals(document.activeElement, input, "<input> should be focused");
assert_not_equals(input.selectionStart, 0, "selection shouldn't be started from the start");
assert_not_equals(input.selectionStart, input.selectionEnd,
"some text should be selected after dragging");
}, "text selection drag should still work when mousedown a display change");
promise_test(async function (t) {
const input = document.querySelector("input");
const rect = input.getBoundingClientRect();
const endX = Math.floor(rect.width);
const centerY = Math.round(rect.height / 2);
await new test_driver.Actions()
.pointerMove(2, centerY)
.pointerDown()
.pointerUp()
.send();
assert_equals(document.activeElement, input, "<input> should be focused");
assert_equals(input.selectionStart, input.selectionEnd,
"the selection should be collapsed by the click");
}, "text click after selecting some characters should collapse selection to start");
promise_test(async function (t) {
const input = document.querySelector("input");
const rect = input.getBoundingClientRect();
const endX = Math.floor(rect.width);
const centerY = Math.round(rect.height / 2);
await new test_driver.Actions()
.pointerMove(32, centerY)
.pointerDown()
.pointerMove(endX - 10, centerY)
.pointerMove(endX - 2, centerY)
.pointerUp()
.pointerMove(18, centerY)
.pointerDown()
.pointerUp()
.send();
assert_equals(document.activeElement, input, "<input> should be focused");
assert_not_equals(input.selectionStart, 0, "selection shouldn't be started from the start");
assert_equals(input.selectionStart, input.selectionEnd,
"the selection should be collapsed by the click");
}, "text click after selecting some characters should collapse selection to middle of the value");
</script>