<!DOCTYPE html>
<html>
<head>
<title>Drag Selection over a text directive</title>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
</head>
<body>
<p>This is a sample text.</p>
<script>
async function rAF() {
return new Promise((resolve) => {
window.requestAnimationFrame(resolve);
});
}
document.addEventListener('DOMContentLoaded', () => {
const textElement = document.querySelector('p');
const rect = textElement.getBoundingClientRect();
const startX = rect.left + 5;
const startY = rect.top + 5;
const endX = rect.right - 5;
const endY = rect.top + 5;
promise_test(async t => {
const hashChange = new Promise(r => window.addEventListener('hashchange', r, { once: true }));
location.hash = ':~:text=This is a sample text';
await hashChange;
await new test_driver.Actions()
.pointerMove(startX, startY, { origin: 'viewport' })
.pointerDown({ button: 0 })
.pointerMove(endX, endY, { origin: 'viewport' })
.pointerUp({ button: 0 })
.send();
await rAF();
const selection = window.getSelection().toString();
assert_true(selection.endsWith("sample text."), "A Selection should be created.");
}, "Test drag and drop selection over a text directive");
});
</script>
</body>
</html>