mirror of
https://github.com/servo/servo.git
synced 2025-07-17 12:23:40 +01:00
147 lines
7.2 KiB
HTML
147 lines
7.2 KiB
HTML
<!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>
|
|
<div id="txt" contenteditable></div>
|
|
<script>
|
|
(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) {
|
|
const description = `Calling execCommand("${command}", false, ${args})`;
|
|
test(function() {
|
|
lastBeforeInputType = NO_INPUT_EVENT_FIRED;
|
|
lastInputType = NO_INPUT_EVENT_FIRED;
|
|
try {
|
|
document.execCommand(command, false, args);
|
|
} catch (e) {
|
|
assert(false, `execCommand shouldn't cause any exception: ${e}`);
|
|
}
|
|
assert_equals(lastBeforeInputType, NO_INPUT_EVENT_FIRED,
|
|
`${description} shouldn't fire beforeinput`);
|
|
assert_equals(lastInputType, inputType,
|
|
`${description} should produce inputType: ${inputType}`);
|
|
}, description);
|
|
}
|
|
|
|
txt.focus();
|
|
// InsertText
|
|
testExecCommandInputType('insertText', 'a', 'insertText');
|
|
testExecCommandInputType('insertText', 'bc', 'insertText');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, 'abc');
|
|
}, "execCommand(\"insertText\") should insert \"abc\" into the editor");
|
|
testExecCommandInputType('insertOrderedList', null, 'insertOrderedList');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<ol><li>abc</li></ol>');
|
|
}, "execCommand(\"insertOrderedList\") should make <ol> and wrap the text with it");
|
|
testExecCommandInputType('insertUnorderedList', null, 'insertUnorderedList');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<ul><li>abc</li></ul>');
|
|
}, "execCommand(\"insertUnorderedList\") should make <ul> and wrap the text with it");
|
|
testExecCommandInputType('insertLineBreak', null, 'insertLineBreak');
|
|
testExecCommandInputType('insertParagraph', null, 'insertParagraph');
|
|
txt.innerHTML = '';
|
|
testExecCommandInputType('insertHorizontalRule', null, 'insertHorizontalRule');
|
|
|
|
// Styling
|
|
txt.innerHTML = 'abc';
|
|
var selection = window.getSelection();
|
|
selection.collapse(txt, 0);
|
|
selection.extend(txt, 1);
|
|
testExecCommandInputType('bold', null, 'formatBold');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b>abc</b>');
|
|
}, "execCommand(\"bold\") should wrap selected text with <b> element");
|
|
testExecCommandInputType('italic', null, 'formatItalic');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b><i>abc</i></b>');
|
|
}, "execCommand(\"italic\") should wrap selected text with <i> element");
|
|
testExecCommandInputType('underline', null, 'formatUnderline');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b><i><u>abc</u></i></b>');
|
|
}, "execCommand(\"underline\") should wrap selected text with <u> element");
|
|
testExecCommandInputType('strikeThrough', null, 'formatStrikeThrough');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b><i><u><strike>abc</strike></u></i></b>');
|
|
}, "execCommand(\"strikeThrough\") should wrap selected text with <strike> element");
|
|
testExecCommandInputType('superscript', null, 'formatSuperscript');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b><i><u><strike><sup>abc</sup></strike></u></i></b>');
|
|
}, "execCommand(\"superscript\") should wrap selected text with <sup> element");
|
|
testExecCommandInputType('subscript', null, 'formatSubscript');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<b><i><u><strike><sub>abc</sub></strike></u></i></b>');
|
|
}, "execCommand(\"subscript\") should wrap selected text with <sub> element");
|
|
txt.innerHTML = 'abc';
|
|
selection.collapse(txt, 0);
|
|
selection.extend(txt, 1);
|
|
testExecCommandInputType('backColor', '#000000', 'formatBackColor');
|
|
testExecCommandInputType('foreColor', '#FFFFFF', 'formatFontColor');
|
|
testExecCommandInputType('hiliteColor', '#FFFF00', 'formatBackColor');
|
|
testExecCommandInputType('fontName', 'monospace', 'formatFontName');
|
|
|
|
// Formating
|
|
txt.innerHTML = 'abc';
|
|
testExecCommandInputType('justifyCenter', null, 'formatJustifyCenter');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="text-align: center;">abc</div>');
|
|
}, "execCommand(\"justifyCenter\") should wrap the text with <div> element whose text-align is center");
|
|
testExecCommandInputType('justifyFull', null, 'formatJustifyFull');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="text-align: justify;">abc</div>');
|
|
}, "execCommand(\"justifyFull\") should wrap the text with <div> element whose text-align is justify");
|
|
testExecCommandInputType('justifyRight', null, 'formatJustifyRight');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="text-align: right;">abc</div>');
|
|
}, "execCommand(\"justifyRight\") should wrap the text with <div> element whose text-align is right");
|
|
testExecCommandInputType('justifyLeft', null, 'formatJustifyLeft');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="text-align: left;">abc</div>');
|
|
}, "execCommand(\"justifyLeft\") should wrap the text with <div> element whose text-align is left");
|
|
selection.collapse(txt, 0);
|
|
selection.extend(txt, 1);
|
|
testExecCommandInputType('removeFormat', null, 'formatRemove');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="">abc</div>');
|
|
}, "execCommand(\"removeFormat\") should remove the style of current block");
|
|
testExecCommandInputType('indent', null, 'formatIndent');
|
|
testExecCommandInputType('outdent', null, 'formatOutdent');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, '<div style="">abc</div>');
|
|
}, "Set of execCommand(\"indent\") and execCommand(\"outdent\") should keep same DOM tree");
|
|
|
|
// 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');
|
|
|
|
// Link and Unlink
|
|
txt.innerHTML = 'abc';
|
|
selection.collapse(txt.firstChild, 1);
|
|
selection.extend(txt.firstChild, 2);
|
|
testExecCommandInputType('createLink', 'https://example.com/', 'insertLink');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, 'a<a href="https://example.com/">b</a>c');
|
|
}, "execCommand(\"createLink\") should create a link");
|
|
testExecCommandInputType('unlink', null, '');
|
|
test(function() {
|
|
assert_equals(txt.innerHTML, 'abc');
|
|
}, "execCommand(\"createLink\") should remove the link");
|
|
})();
|
|
</script>
|