Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/editing/dnd/interactiveelements/draggable_readonly_input_text.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>Readonly draggable text input</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>
<style type="text/css">
#inner { border: 1px solid orange; border-top-width: 20px; }
</style>
</head>
<body>
<p>Press your mouse button down on the orange block and drag downwards. Use your mouse to attempt to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p>
<div id="element">
<input value="Dummy text" draggable="true" id="inner" readonly>
</div>
<script>
const element = document.getElementById("element");
const inner = document.getElementById("inner");
promise_test(t => {
return new Promise((resolve, reject) => {
let didReceiveDragStart = false;
const dragStartListener = ev => {
ev.preventDefault();
didReceiveDragStart = true;
};
element.addEventListener("dragstart", dragStartListener, { once: true });
t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener));
element.addEventListener("mouseup", () => {
resolve(didReceiveDragStart);
}, { once: true });
const centerH = inner.getBoundingClientRect().height / 2;
new test_driver.Actions()
// Move pointer to the center of the top-border.
.pointerMove(0, 10 - centerH, { origin: inner })
.pointerDown()
// Move pointer to the center of the input.
.pointerMove(0, 0, { origin: inner })
.pointerUp()
.send();
}).then(didReceiveDragStart => {
assert_false(didReceiveDragStart, "dragstart should not fire");
});
}, "Readonly draggable input text should not be draggable from border");
promise_test(t => {
return new Promise((resolve, reject) => {
let didReceiveDragStart = false;
const dragStartListener = ev => {
ev.preventDefault();
didReceiveDragStart = true;
};
element.addEventListener("dragstart", dragStartListener, { once: true });
t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener));
element.addEventListener("mouseup", () => {
resolve(didReceiveDragStart);
}, { once: true });
const centerW = inner.getBoundingClientRect().width / 2;
new test_driver.Actions()
// Move pointer to the start of the text.
.pointerMove(5 - centerW, 10, { origin: inner })
.pointerDown()
// Move pointer to the center of the input body.
.pointerMove(0, 10, { origin: inner })
.pointerUp()
.send();
}).then(didReceiveDragStart => {
assert_false(didReceiveDragStart, "dragstart should not fire");
});
}, "Readonly draggable input text should not be draggable while attempting to select text");
</script>
</body>
</html>