141 lines
5.3 KiB
HTML
141 lines
5.3 KiB
HTML
<!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>
|