removing-inline-style-specified-by-parent-block.tentative.html (3365B)
1 <!doctype html> 2 <html> 3 <meta charset=utf-8> 4 <meta name="variant" content="?b"> 5 <meta name="variant" content="?i"> 6 <meta name="variant" content="?u"> 7 <title>Test removing inline style which is specified by parent block</title> 8 <script src=/resources/testharness.js></script> 9 <script src=/resources/testharnessreport.js></script> 10 <body> 11 <div contenteditable></div> 12 </body> 13 <script> 14 "use strict"; 15 16 const tag = location.search.substring(1); 17 const style = (() => { 18 switch (tag) { 19 case "b": 20 return "font-weight: bold"; 21 case "i": 22 return "font-style: italic"; 23 case "u": 24 return "text-decoration: underline"; 25 } 26 })(); 27 const cancelingStyle = (() => { 28 switch (tag) { 29 case "b": 30 return "font-weight: normal"; 31 case "i": 32 return "font-style: normal"; 33 case "u": 34 return ""; // Cannot delete parent underline 35 } 36 })(); 37 const command = (() => { 38 switch (tag) { 39 case "b": 40 return "bold"; 41 case "i": 42 return "italic"; 43 case "u": 44 return "underline"; 45 } 46 })(); 47 const editor = document.querySelector("div[contenteditable]"); 48 49 promise_test(async () => { 50 await new Promise(resolve => { 51 addEventListener("load", () => { 52 assert_true(true, "The document is loaded"); 53 resolve(); 54 }, { once: true }); 55 }); 56 }, "Waiting for load..."); 57 58 promise_test(async () => { 59 document.execCommand("styleWithCSS", false, "false"); 60 editor.innerHTML = `<p style="${style}">foo</p>`; 61 editor.focus(); 62 getSelection().selectAllChildren(editor.querySelector("p")); 63 document.execCommand(command); 64 assert_in_array( 65 editor.innerHTML, 66 [ 67 "<p>foo</p>", 68 "<p>foo<br></p>", 69 "<p style=\"\">foo</p>", 70 "<p style=\"\">foo<br></p>", 71 ]); 72 }, "Disabling style to text, it's applied to the parent block"); 73 74 promise_test(async () => { 75 document.execCommand("styleWithCSS", false, "false"); 76 editor.innerHTML = `<p>foo</p>`; 77 editor.setAttribute("style", style); 78 editor.focus(); 79 getSelection().selectAllChildren(editor.querySelector("p")); 80 document.execCommand(command); 81 if (cancelingStyle !== "") { 82 assert_in_array( 83 editor.innerHTML, 84 [ 85 `<p><span style="${cancelingStyle};">foo</span></p>`, 86 `<p><span style="${cancelingStyle};">foo</span><br></p>`, 87 ]); 88 } else { 89 assert_in_array( 90 editor.innerHTML, 91 [ 92 "<p>foo</p>", 93 "<p>foo<br></p>", 94 ]); 95 } 96 assert_equals(editor.getAttribute("style"), style); 97 editor.removeAttribute("style"); 98 }, "Disabling style to text, it's applied to the editing host"); 99 100 promise_test(async () => { 101 document.execCommand("styleWithCSS", false, "false"); 102 editor.innerHTML = `<p>foo</p>`; 103 document.body.setAttribute("style", style); 104 editor.focus(); 105 getSelection().selectAllChildren(editor.querySelector("p")); 106 document.execCommand(command); 107 if (cancelingStyle !== "") { 108 assert_in_array( 109 editor.innerHTML, 110 [ 111 `<p><span style="${cancelingStyle};">foo</span></p>`, 112 `<p><span style="${cancelingStyle};">foo</span><br></p>`, 113 ]); 114 } else { 115 assert_in_array( 116 editor.innerHTML, 117 [ 118 "<p>foo</p>", 119 "<p>foo<br></p>", 120 ]); 121 } 122 assert_equals(document.body.getAttribute("style"), style); 123 document.body.removeAttribute("style"); 124 }, "Disabling style to text, it's applied to the body"); 125 </script>