input-events/input-events-cut-paste-manual.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>
<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>
async_test(t => {
    const expectedEventLog = [
        'cut-[null]', 'beforeinput-deleteByCut', 'input-deleteByCut',
        'paste-[null]', 'beforeinput-insertFromPaste', 'input-insertFromPaste'];
    const actualEventLog = [];

    for (let eventType of ['beforeinput', 'input', 'cut', 'paste']) {
        document.getElementById('test1_plain').addEventListener(eventType, t.step_func(event => {
            if (event.type === 'beforeinput' && event.inputType === 'insertFromPaste') {
                assert_equals(event.data, 'plain');
                assert_equals(event.dataTransfer, null);
            }

            actualEventLog.push(`${event.type}-${event.inputType || '[null]'}`);
            if (actualEventLog.length === expectedEventLog.length) {
                assert_array_equals(actualEventLog, expectedEventLog,
                    `Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
                t.done();
            }
        }));
    }
}, 'Event order and data on textarea.');

async_test(t => {
    const expectedEventLog = [
        'cut-[null]', 'beforeinput-deleteByCut', 'input-deleteByCut',
        'paste-[null]', 'beforeinput-insertFromPaste', 'input-insertFromPaste'];
    const actualEventLog = [];

    for (let eventType of ['beforeinput', 'input', 'cut', 'paste']) {
        document.getElementById('test2_editable').addEventListener(eventType, t.step_func(event => {
            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]'}`);
            if (actualEventLog.length === expectedEventLog.length) {
                assert_array_equals(actualEventLog, expectedEventLog,
                    `Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
                t.done();
            }
        }));
    }
}, 'Event order and dataTransfer on contenteditable.');

async_test(t => {
    const prevent = document.getElementById('test3_editable_prevent');
    const normal = document.getElementById('test3_editable_normal');
    prevent.addEventListener('beforeinput', t.step_func(event => {
        if (event.inputType === 'deleteByCut' ||
            event.inputType === 'insertFromPaste') {
            event.preventDefault();
        }
    }));

    normal.addEventListener('input', t.step_func(event => {
        if (event.inputType === 'insertFromPaste') {
            assert_equals(prevent.textContent, 'prevent');
            assert_equals(normal.textContent, 'prevent');
            t.done();
        }
    }));
}, 'preventDefault() should prevent DOM modification but allow clipboard updates.');
</script>