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/textarea_inside_draggable_element.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>Textarea inside draggable element</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. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text.</p>
<div draggable="true" id="element">
<textarea rows="5" cols="50" wrap="off" id="inner">Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
Dummy text
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
</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 textarea.
.pointerMove(0, 0, { origin: inner })
.pointerUp()
.send();
}).then(didReceiveDragStart => {
assert_false(didReceiveDragStart, "dragstart should not fire");
});
}, "Textarea inside draggable element 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 rect = inner.getBoundingClientRect();
const centerW = rect.width / 2;
const centerH = rect.height / 2;
new test_driver.Actions()
// Move pointer to the start of the first line text.
.pointerMove(5 - centerW, 25 - centerH, { origin: inner })
.pointerDown()
// Move pointer to the center of the textarea.
.pointerMove(0, 0, { origin: inner })
.pointerUp()
.send();
}).then(didReceiveDragStart => {
assert_false(didReceiveDragStart, "dragstart should not fire");
});
}, "Textarea inside draggable element should not be draggable while attempting to select text");
</script>
</body>
</html>