styling-commands.html (5188B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?styleWithCSS=true"> 7 <meta name="variant" content="?styleWithCSS=false"> 8 <title>Styling with document.execCommand() should not work in plaintext-only editing host</title> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="../include/editor-test-utils.js"></script> 12 <script> 13 "use strict"; 14 15 const searchParams = new URLSearchParams(document.location.search); 16 const defaultStyleWithCSS = searchParams.get("styleWithCSS"); 17 const oppositeStyleWithCSS = defaultStyleWithCSS == "true" ? "false" : "true"; 18 19 addEventListener("load", () => { 20 document.querySelector("div[contenteditable=true]").focus(); 21 document.execCommand("styleWithCSS", false, defaultStyleWithCSS); 22 23 const editingHost = document.querySelector("div[contenteditable=plaintext-only]"); 24 const utils = new EditorTestUtils(editingHost); 25 for (const testing of [ 26 { command: "backColor", param: "red", innerHTML: "a[b]c" }, 27 { command: "bold", param: undefined, innerHTML: "a[b]c" }, 28 { command: "createLink", param: "http://example.com", innerHTML: "a[b]c" }, 29 { command: "decreaseFontSize", param: undefined, innerHTML: "a[b]c" }, 30 { command: "fontName", param: "Arial", innerHTML: "a[b]c" }, 31 { command: "fontSize", param: "7", innerHTML: "a[b]c" }, 32 { command: "formatBlock", param: "blockquote", innerHTML: "a[b]c" }, 33 { command: "formatBlock", param: "div", innerHTML: "a[b]c" }, 34 { command: "formatBlock", param: "p", innerHTML: "a[b]c" }, 35 { command: "formatBlock", param: "pre", innerHTML: "a[b]c" }, 36 { command: "heading", param: "h1", innerHTML: "a[b]c" }, 37 { command: "hiliteColor", param: "red", innerHTML: "a[b]c" }, 38 { command: "increaseFontSize", param: undefined, innerHTML: "a[b]c" }, 39 { command: "indent", param: undefined, innerHTML: "<ul><li>[abc]</li></ul>" }, 40 { command: "indent", param: undefined, innerHTML: "<blockquote>[abc]</blockquote>" }, 41 { command: "insertOrderedList", param: undefined, innerHTML: "a[b]c" }, 42 { command: "insertUnorderedList", param: undefined, innerHTML: "a[b]c" }, 43 { command: "italic", param: undefined, innerHTML: "a[b]c" }, 44 { command: "justifyCenter", param: undefined, innerHTML: "<div>[abc]</div>" }, 45 { command: "justifyFull", param: undefined, innerHTML: "<div>[abc]</div>" }, 46 { command: "justifyLeft", param: undefined, innerHTML: "<div>[abc]</div>" }, 47 { command: "justifyRight", param: undefined, innerHTML: "<div>[abc]</div>" }, 48 { command: "outdent", param: undefined, innerHTML: "<ul><li>[abc]</li></ul>" }, 49 { command: "outdent", param: undefined, innerHTML: "<blockquote>[abc]</blockquote>" }, 50 { command: "removeFormat", param: undefined, innerHTML: "a<b>[b]</b>c" }, 51 { command: "strikeThrough", param: undefined, innerHTML: "a[b]c" }, 52 { command: "subscript", param: undefined, innerHTML: "a[b]c" }, 53 { command: "superscript", param: undefined, innerHTML: "a[b]c" }, 54 { command: "underline", param: undefined, innerHTML: "a[b]c" }, 55 { command: "unlink", param: undefined, innerHTML: "a<a href=\"http://example.com\">[b]</a>c" }, 56 ]) { 57 test(t => { 58 utils.setupEditingHost(testing.innerHTML); 59 const editingHostBefore = editingHost.outerHTML; 60 let inputEvent; 61 function onInput(event) { 62 inputEvent = `input={inputType="${event.inputType}"}`; 63 } 64 test(() => { 65 assert_false(document.queryCommandEnabled(testing.command)); 66 }, `${t.name}: the command should be disabled`); 67 let ret; 68 try { 69 editingHost.addEventListener("input", onInput); 70 ret = document.execCommand(testing.command, false, testing.param); 71 } finally { 72 editingHost.removeEventListener("input", onInput); 73 } 74 test(() => { 75 assert_false(ret); 76 }, `${t.name} should return false`); 77 test(() => { 78 assert_equals(editingHostBefore, editingHost.outerHTML); 79 }, `${t.name} should not update the DOM`); 80 test(() => { 81 assert_equals(inputEvent, undefined); 82 }, `${t.name} should not cause input event`); 83 }, `execCommand("${testing.command}", false, ${ 84 testing.param === undefined ? "undefined" : `"${testing.param}"` 85 }) when ${testing.innerHTML}`); 86 } 87 }, {once: true}); 88 </script> 89 </head> 90 <body> 91 <div contenteditable="true"></div> 92 <div contenteditable="plaintext-only"></div> 93 </html>