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:
- /input-events/input-events-cut-paste.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Cut and Paste should trigger corresponding InputEvent</title>
<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>
<script type="text/javascript" src="pointerevent_support.js"></script>
<p>To manually run this test, please follow the steps below:<br/>
1. Select 'plain' => Cut (e.g. Ctrl/Cmd-X) => Paste (e.g. Ctrl/Cmd-V).<br/>
2. Select 'rich' => Cut => Paste.<br/>
3. Select 'prevent' => Paste.<br/>
4. Select 'prevent' => Cut => Select 'normal' => Paste.<br/>
<br/>
If a "PASS" result appears the test passes, otherwise it fails</p>
<textarea id="test1_plain">plain</textarea>
<p id="test2_editable" contenteditable><b>rich</b></p>
<p id="test3_editable_prevent" contenteditable>prevent</p>
<p id="test3_editable_normal" contenteditable>normal</p>
<script>
function resolveWhen(condition) {
return new Promise((resolve, reject) => {
function tick() {
if (condition())
resolve();
else
requestAnimationFrame(tick.bind(this));
}
tick();
});
}
let modifier_key = "\uE009";
if(navigator.platform.includes('Mac'))
modifier_key = "\uE03D";
const commands = {
COPY: 'copy',
CUT: 'cut',
PASTE: 'paste',
}
function selectTextCommand(target, command) {
let command_key = "";
if(command == "copy")
command_key = "c";
else if (command == "cut")
command_key = "x";
else if (command == "paste")
command_key = "v";
return new test_driver.Actions()
.pointerMove(0, 0, {origin: target})
.pointerDown()
.pointerUp()
.addTick()
.keyDown(modifier_key)
.keyDown("a")
.keyUp("a")
.keyDown(command_key)
.keyUp(command_key)
.keyUp(modifier_key)
.send();
}
function selectTextCutAndPaste(target1, target2) {
return selectTextCommand(target1, commands.CUT).then(() => {
return selectTextCommand(target2, commands.PASTE);
})
}
promise_test(async test => {
const expectedEventLog = [
'cut-[null]', 'beforeinput-deleteByCut', 'input-deleteByCut',
'paste-[null]', 'beforeinput-insertFromPaste', 'input-insertFromPaste'];
const actualEventLog = [];
const text1 = document.getElementById("test1_plain");
for (let eventType of ['beforeinput', 'input', 'cut', 'paste']) {
text1.addEventListener(eventType, test.step_func(function() {
if (event.type === 'beforeinput' && event.inputType === 'insertFromPaste') {
assert_equals(event.data, 'plain');
assert_equals(event.dataTransfer, null);
}
actualEventLog.push(`${event.type}-${event.inputType || '[null]'}`);
}));
}
await selectTextCutAndPaste(text1, text1);
await resolveWhen(() => { return actualEventLog.length == expectedEventLog.length });
assert_array_equals(actualEventLog, expectedEventLog,
`Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
}, 'Event order and data on textarea.');
promise_test(async test => {
const expectedEventLog = [
'cut-[null]', 'beforeinput-deleteByCut', 'input-deleteByCut',
'paste-[null]', 'beforeinput-insertFromPaste', 'input-insertFromPaste'];
const actualEventLog = [];
const text2 = document.getElementById("test2_editable");
for (let eventType of ['beforeinput', 'input', 'cut', 'paste']) {
text2.addEventListener(eventType, test.step_func(function() {
if (event.type === 'beforeinput' && event.inputType === 'insertFromPaste') {
assert_equals(event.data, null);
assert_equals(event.dataTransfer.getData('text/plain'), 'rich');
assert_regexp_match(event.dataTransfer.getData('text/html'), /<b.*>rich<\/b>$/);
}
actualEventLog.push(`${event.type}-${event.inputType || '[null]'}`);
}));
}
await selectTextCutAndPaste(text2, text2);
await resolveWhen(() => { return actualEventLog.length == expectedEventLog.length });
assert_array_equals(actualEventLog, expectedEventLog,
`Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
}, 'Event order and dataTransfer on contenteditable.');
promise_test(async test => {
const prevent = document.getElementById('test3_editable_prevent');
const normal = document.getElementById('test3_editable_normal');
prevent.addEventListener('beforeinput', test.step_func(function() {
if (event.inputType === 'deleteByCut' ||
event.inputType === 'insertFromPaste') {
event.preventDefault();
}
}));
normal.addEventListener('input', test.step_func(function() {
if (event.inputType === 'insertFromPaste') {
assert_equals(prevent.textContent, 'prevent');
assert_equals(normal.textContent, 'prevent');
}
}));
await selectTextCommand(prevent, commands.PASTE);
await selectTextCutAndPaste(prevent, normal);
await resolveWhen(() => { return normal.textContent == 'prevent' });
assert_equals(prevent.textContent, 'prevent');
assert_equals(normal.textContent, 'prevent');
}, 'preventDefault() should prevent DOM modification but allow clipboard updates.');
</script>