Skip to content

Commit

Permalink
[InputEvent] Rewrite Cut/Paste and execCommand tests into WPT
Browse files Browse the repository at this point in the history 
* 'input-events-cut-paste-manual.html' passes on both Chrome and Safari.
* 'input-events-exec-command.html' fails on Safari:
https://bugs.webkit.org/show_bug.cgi?id=165197

Bug: 652439
Change-Id: I7303e2234afe72d74f451143ed206bdde105467c
Reviewed-on: https://chromium-review.googlesource.com/664277
Commit-Queue: Chong Zhang <[email protected]>
Reviewed-by: Philip Jägenstedt <[email protected]>
Cr-Commit-Position: refs/heads/master@{#502295}
  • Loading branch information
@chromium-wpt-export-bot
Chong Zhang authored and chromium-wpt-export-bot committed Sep 15, 2017
1 parent 1a3f7f6 commit 3fb46f6
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 0 deletions.
83 changes: 83 additions & 0 deletions input-events/input-events-cut-paste-manual.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!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>
86 changes: 86 additions & 0 deletions input-events/input-events-exec-command.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>execCommand() should only trigger 'input'</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<p id="txt" contenteditable></p>
<script>
test(function() {
let lastBeforeInputType = '';
let lastInputType = '';
const txt = document.getElementById('txt');
txt.addEventListener('beforeinput', function(event) {
assert_true(event instanceof InputEvent);
assert_false(event.isComposing);
lastBeforeInputType = event.inputType;
});
txt.addEventListener('input', function(event) {
assert_true(event instanceof InputEvent);
assert_false(event.isComposing);
lastInputType = event.inputType;
});

const NO_INPUT_EVENT_FIRED = 'NO_INPUT_EVENT_FIRED';
function testExecCommandInputType(command, args, inputType) {
lastBeforeInputType = NO_INPUT_EVENT_FIRED;
lastInputType = NO_INPUT_EVENT_FIRED;
document.execCommand(command, false, args);
assert_equals(lastBeforeInputType, NO_INPUT_EVENT_FIRED, `execCommand(${command}, false, ${args}) shouldn't fire beforeinput`);
assert_equals(lastInputType, inputType, `execCommand(${command}, false, ${args}) should produce inputType: ${inputType}`);
}

txt.focus();
// InsertText
testExecCommandInputType('insertText', 'a', 'insertText');
testExecCommandInputType('insertText', 'bc', 'insertText');
assert_equals(txt.innerHTML, 'abc');
testExecCommandInputType('insertOrderedList', null, 'insertOrderedList');
assert_equals(txt.innerHTML, '<ol><li>abc<br></li></ol>');
testExecCommandInputType('insertUnorderedList', null, 'insertUnorderedList');
assert_equals(txt.innerHTML, '<ul><li>abc<br></li></ul>');
testExecCommandInputType('insertLineBreak', null, 'insertLineBreak');
testExecCommandInputType('insertParagraph', null, 'insertParagraph');

// Styling
txt.innerHTML = 'abc';
var selection = window.getSelection();
selection.collapse(txt, 0);
selection.extend(txt, 1);
testExecCommandInputType('bold', null, 'formatBold');
assert_equals(txt.innerHTML, '<b>abc</b>');
testExecCommandInputType('italic', null, 'formatItalic');
assert_equals(txt.innerHTML, '<b><i>abc</i></b>');
testExecCommandInputType('underline', null, 'formatUnderline');
assert_equals(txt.innerHTML, '<b><i><u>abc</u></i></b>');
testExecCommandInputType('strikeThrough', null, 'formatStrikeThrough');
assert_equals(txt.innerHTML, '<b><i><u><strike>abc</strike></u></i></b>');
testExecCommandInputType('superscript', null, 'formatSuperscript');
assert_equals(txt.innerHTML, '<b><i><u><strike><sup>abc</sup></strike></u></i></b>');
testExecCommandInputType('subscript', null, 'formatSubscript');
assert_equals(txt.innerHTML, '<b><i><u><strike><sub>abc</sub></strike></u></i></b>');

// Formating
txt.innerHTML = 'abc';
testExecCommandInputType('justifyCenter', null, 'formatJustifyCenter');
assert_equals(txt.innerHTML, '<div style="text-align: center;">abc</div>');
testExecCommandInputType('justifyFull', null, 'formatJustifyFull');
assert_equals(txt.innerHTML, '<div style="text-align: justify;">abc</div>');
testExecCommandInputType('justifyRight', null, 'formatJustifyRight');
assert_equals(txt.innerHTML, '<div style="text-align: right;">abc</div>');
testExecCommandInputType('justifyLeft', null, 'formatJustifyLeft');
assert_equals(txt.innerHTML, '<div style="text-align: left;">abc</div>');
selection.collapse(txt, 0);
selection.extend(txt, 1);
testExecCommandInputType('removeFormat', null, 'formatRemove');
assert_equals(txt.innerHTML, '<div style="">abc</div>');
testExecCommandInputType('indent', null, 'formatIndent');
testExecCommandInputType('outdent', null, 'formatOutdent');
assert_equals(txt.innerHTML, '<div style="">abc</div>');

// Copy shouldn't fire 'input'.
testExecCommandInputType('copy', null, NO_INPUT_EVENT_FIRED);
// Cut/Paste should fire 'input'.
testExecCommandInputType('cut', null, 'deleteByCut');
testExecCommandInputType('paste', null, 'insertFromPaste');
});
</script>

0 comments on commit 3fb46f6

Please sign in to comment.