mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35:33 +01:00
Update web-platform-tests to revision 8a2ceb5f18911302b7a5c1cd2791f4ab50ad4326
This commit is contained in:
Josh Matthews
parent
462c272380
commit
1f531f66ea
5377 changed files with 174916 additions and 84369 deletions
|
|
@ -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>
|
||||
|
|
@ -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,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>InputEvent.getTargetRanges() behavior</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. Place caret at the end of 'hel<i>lo wo</i><b>rld</b>'.<br/>
|
||||
2. Press Ctrl-Backspace (Alt-Backspace on macOS) to delete word backwards.<br/>
|
||||
3. Place caret at the end of 'test2' => Press 'a' key.<br/>
|
||||
4. Select 'test2a' => Press 'b' key.<br/>
|
||||
5. Select 'b' => Bold text through context menu or Command-b on macOS.<br/>
|
||||
6. Place caret at the end of 'test3' => Press 'a' key => Press Backspace key.<br/>
|
||||
<br/>
|
||||
If a "PASS" result appears the test passes, otherwise it fails</p>
|
||||
<p id="test1_editable" contenteditable>hel<i>lo wo</i><b>rld</b></p>
|
||||
<p id="test2_editable" contenteditable>test2</p>
|
||||
<textarea id="test3_plain">test3</textarea>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const test1_editable = document.getElementById('test1_editable');
|
||||
let lastBeforeInput;
|
||||
test1_editable.addEventListener('beforeinput', t.step_func(event => {
|
||||
assert_equals(event.inputType, 'deleteWordBackward');
|
||||
const ranges = event.getTargetRanges();
|
||||
assert_equals(ranges.length, 1);
|
||||
const range = ranges[0];
|
||||
assert_true(range instanceof StaticRange);
|
||||
assert_equals(range.startOffset, 3);
|
||||
assert_equals(range.startContainer.textContent, 'lo wo');
|
||||
assert_equals(range.endOffset, 3);
|
||||
assert_equals(range.endContainer.textContent, 'rld');
|
||||
assert_equals(test1_editable.innerHTML, 'hel<i>lo wo</i><b>rld</b>');
|
||||
lastBeforeInput = event;
|
||||
}));
|
||||
|
||||
test1_editable.addEventListener('input', t.step_func(event => {
|
||||
assert_equals(event.inputType, 'deleteWordBackward');
|
||||
assert_equals(test1_editable.innerHTML, 'hel<i>lo </i>');
|
||||
assert_equals(lastBeforeInput.inputType, 'deleteWordBackward');
|
||||
assert_equals(lastBeforeInput.getTargetRanges().length, 0,
|
||||
'getTargetRanges() should be empty after the event has finished dispatching.');
|
||||
t.done();
|
||||
}));
|
||||
}, 'getTargetRanges() returns correct range and cleared after dispatch.');
|
||||
|
||||
async_test(t => {
|
||||
const expectedEventLog = ['test2-5-test2-5', 'test2a-0-test2a-6', 'b-0-b-1'];
|
||||
const actualEventLog = [];
|
||||
|
||||
const test2_editable = document.getElementById('test2_editable');
|
||||
test2_editable.addEventListener('beforeinput', t.step_func(event => {
|
||||
const ranges = event.getTargetRanges();
|
||||
assert_equals(ranges.length, 1);
|
||||
const range = ranges[0];
|
||||
actualEventLog.push(
|
||||
`${range.startContainer.textContent}-${range.startOffset}-${range.endContainer.textContent}-${range.endOffset}`);
|
||||
|
||||
if (actualEventLog.length == expectedEventLog.length) {
|
||||
assert_array_equals(actualEventLog, expectedEventLog,
|
||||
`Expected: ${expectedEventLog}; Actual: ${actualEventLog}.`);
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
}, 'Actions other than deletion should have current selection as target ranges.');
|
||||
|
||||
async_test(t => {
|
||||
const test3_plain = document.getElementById('test3_plain');
|
||||
test3_plain.addEventListener('beforeinput', t.step_func(event => {
|
||||
assert_equals(event.getTargetRanges().length, 0,
|
||||
'getTargetRanges() should return empty array on textarea.');
|
||||
|
||||
if (event.inputType === 'deleteContentBackward')
|
||||
t.done();
|
||||
}));
|
||||
}, 'Textarea should have empty target range.');
|
||||
</script>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>InputEvent have data when typing on textarea and contenteditable</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. Focus the first box and press key 'a' and then 'b'.<br/>
|
||||
2. Focus the second box and press key 'c' and then 'd'.<br/>
|
||||
<br/>
|
||||
If a "PASS" result appears the test passes, otherwise it fails</p>
|
||||
<textarea id='plain'></textarea>
|
||||
<div id='rich' style='border-style: solid;' contenteditable></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const expectedResult = [
|
||||
'plain-beforeinput-a',
|
||||
'plain-input-a',
|
||||
'plain-beforeinput-b',
|
||||
'plain-input-b',
|
||||
'rich-beforeinput-c',
|
||||
'rich-input-c',
|
||||
'rich-beforeinput-d',
|
||||
'rich-input-d',
|
||||
];
|
||||
let eventCounter = 0;
|
||||
|
||||
for (const targetId of ['plain', 'rich']) {
|
||||
for (const eventType of ['beforeinput', 'input']) {
|
||||
document.getElementById(targetId).addEventListener(eventType, t.step_func(e => {
|
||||
assert_equals(`${targetId}-${eventType}-${e.data}`, expectedResult[eventCounter]);
|
||||
++eventCounter;
|
||||
if (eventCounter === expectedResult.length)
|
||||
t.done();
|
||||
}));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>InputEvent have correct data/order when typing on textarea and contenteditable</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. Focus the first box and press key 'a' and then Shift-'b'.<br/>
|
||||
2. Focus the second box and press key 'c' and then Shift-'d'.<br/>
|
||||
<br/>
|
||||
If a "PASS" result appears the test passes, otherwise it fails</p>
|
||||
<textarea id='plain'></textarea>
|
||||
<div id='rich' style='border-style: solid;' contenteditable><br></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const expectedResult = [
|
||||
// Pressing 'a'.
|
||||
'plain-keydown-a',
|
||||
'plain-keypress-a',
|
||||
'plain-beforeinput-a',
|
||||
'plain-input-a',
|
||||
'plain-keyup-a',
|
||||
// Pressing Shift-'b'.
|
||||
'plain-keydown-B',
|
||||
'plain-keypress-B',
|
||||
'plain-beforeinput-B',
|
||||
'plain-input-B',
|
||||
'plain-keyup-B',
|
||||
// Pressing 'c'.
|
||||
'rich-keydown-c',
|
||||
'rich-keypress-c',
|
||||
'rich-beforeinput-c',
|
||||
'rich-input-c',
|
||||
'rich-keyup-c',
|
||||
// Pressing Shift-'d'.
|
||||
'rich-keydown-D',
|
||||
'rich-keypress-D',
|
||||
'rich-beforeinput-D',
|
||||
'rich-input-D',
|
||||
'rich-keyup-D',
|
||||
];
|
||||
let eventCounter = 0;
|
||||
|
||||
for (const targetId of ['plain', 'rich']) {
|
||||
for (const eventType of ['beforeinput', 'input', 'keydown', 'keypress', 'keyup']) {
|
||||
document.getElementById(targetId).addEventListener(eventType, t.step_func(event => {
|
||||
if (event.key === 'Shift')
|
||||
return;
|
||||
assert_equals(`${targetId}-${event.type}-${event.data || event.key}`, expectedResult[eventCounter]);
|
||||
if (event instanceof InputEvent) {
|
||||
assert_equals(event.dataTransfer, null,
|
||||
'Plain text editing should have null |dataTransfer| field')
|
||||
}
|
||||
++eventCounter;
|
||||
if (eventCounter === expectedResult.length)
|
||||
t.done();
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue