inserthtml-do-not-preserve-inline-styles.html (6638B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=italic"> 7 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=strikethrough"> 8 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=subscript"> 9 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=superscript"> 10 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=underline"> 11 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=fontname"> 12 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=fontsize"> 13 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=forecolor"> 14 <meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=hilitecolor"> 15 <meta name="variant" content="?stylesAtInsertionPoint=italic&stylesInserting=bold"> 16 <meta name="variant" content="?stylesAtInsertionPoint=strikethrough&stylesInserting=bold"> 17 <meta name="variant" content="?stylesAtInsertionPoint=subscript&stylesInserting=bold"> 18 <meta name="variant" content="?stylesAtInsertionPoint=superscript&stylesInserting=bold"> 19 <meta name="variant" content="?stylesAtInsertionPoint=underline&stylesInserting=bold"> 20 <meta name="variant" content="?stylesAtInsertionPoint=fontname&stylesInserting=bold"> 21 <meta name="variant" content="?stylesAtInsertionPoint=forecolor&stylesInserting=bold"> 22 <meta name="variant" content="?stylesAtInsertionPoint=hilitecolor&stylesInserting=bold"> 23 <meta name="variant" content="?stylesAtInsertionPoint=bold,italic&stylesInserting=strikethrough,underline"> 24 <title>insertHTML should not preserve inline styles at insertion point</title> 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="../include/editor-test-utils.js"></script> 28 </head> 29 <body><div contenteditable></div> 30 <script> 31 "use strict"; 32 33 const params = new URLSearchParams(location.search.substring(1)); 34 const stylesAtInsertionPoint = params.get("stylesAtInsertionPoint").split(","); 35 const stylesInserting = params.get("stylesInserting").split(","); 36 37 function getOpenTagForStyle(style) { 38 switch (style.toLowerCase()) { 39 case "bold": 40 return "<b>"; 41 case "italic": 42 return "<i>"; 43 case "strikethrough": 44 return "<s>"; 45 case "subscript": 46 return "<sub>"; 47 case "superscript": 48 return "<sup>"; 49 case "underline": 50 return "<u>"; 51 case "fontname": 52 return "<font face=\"monospace\">"; 53 case "fontsize": 54 return "<font size=\"5\">"; 55 case "forecolor": 56 return "<font color=\"#0000FF\">"; 57 case "hilitecolor": 58 return "<span style=\"background-color:rgb(0, 255, 255)\">"; 59 } 60 } 61 62 function getClosedTagForStyle(style) { 63 switch (style.toLowerCase()) { 64 case "bold": 65 return "</b>"; 66 case "italic": 67 return "</i>"; 68 case "strikethrough": 69 return "</s>"; 70 case "subscript": 71 return "</sub>"; 72 case "superscript": 73 return "</sup>"; 74 case "underline": 75 return "</u>"; 76 case "fontname": 77 case "fontsize": 78 case "forecolor": 79 return "</font>"; 80 case "hilitecolor": 81 return "</span>"; 82 } 83 } 84 85 function openTags(styles) { 86 let openTags = ""; 87 for (const style of styles) { 88 openTags = getOpenTagForStyle(style) + openTags; 89 } 90 return openTags; 91 } 92 93 function closedTags(styles) { 94 let closedTags = ""; 95 for (const style of styles) { 96 closedTags += getClosedTagForStyle(style); 97 } 98 return closedTags; 99 } 100 101 const editingHost = document.querySelector("div[contenteditable]"); 102 const utils = new EditorTestUtils(editingHost); 103 104 function addTest(aTest) { 105 test(() => { 106 utils.setupEditingHost(aTest.innerHTML); 107 document.execCommand("insertHTML", false, aTest.newContent); 108 utils.normalizeStyleAttributeValues(); 109 assert_equals(editingHost.innerHTML, aTest.expectedResult, aTest.description); 110 for (const style of stylesInserting) { 111 switch (style.toLocaleLowerCase()) { 112 case "fontsize": 113 assert_equals( 114 document.queryCommandValue(style), 115 "5", 116 `document.queryCommandValue("${style}")` 117 ); 118 break; 119 case "fontname": 120 assert_equals( 121 document.queryCommandValue(style), 122 "monospace", 123 `document.queryCommandValue("${style}")` 124 ); 125 break; 126 case "forecolor": 127 assert_equals( 128 document.queryCommandValue(style), 129 "rgb(0, 0, 255)", 130 `document.queryCommandValue("${style}")` 131 ); 132 break; 133 case "hilitecolor": 134 assert_equals( 135 document.queryCommandValue(style), 136 "rgb(0, 255, 255))", 137 `document.queryCommandValue("${style}")` 138 ); 139 break; 140 default: 141 assert_true( 142 document.queryCommandState(style), 143 `document.queryCommandState("${style}")` 144 ); 145 break; 146 } 147 } 148 }, `insertHTML with "${aTest.newContent}" into ${aTest.innerHTML}`); 149 } 150 151 addTest({ 152 innerHTML: `${openTags(stylesAtInsertionPoint)}[]def${closedTags(stylesAtInsertionPoint)}`, 153 newContent: `${openTags(stylesInserting)}abc${closedTags(stylesInserting)}`, 154 expectedResult: `${openTags(stylesInserting)}abc${closedTags(stylesInserting)}` + 155 `${openTags(stylesAtInsertionPoint)}def${closedTags(stylesAtInsertionPoint)}`, 156 description: "New content should be inserted before the inline containers", 157 }); 158 addTest({ 159 innerHTML: `${openTags(stylesAtInsertionPoint)}abc[]${closedTags(stylesAtInsertionPoint)}`, 160 newContent: `${openTags(stylesInserting)}def${closedTags(stylesInserting)}`, 161 expectedResult: `${openTags(stylesAtInsertionPoint)}abc${closedTags(stylesAtInsertionPoint)}` + 162 `${openTags(stylesInserting)}def${closedTags(stylesInserting)}`, 163 description: "New content should be appended after the inline containers", 164 }); 165 addTest({ 166 innerHTML: `${openTags(stylesAtInsertionPoint)}a[]c${closedTags(stylesAtInsertionPoint)}`, 167 newContent: `${openTags(stylesInserting)}b${closedTags(stylesInserting)}`, 168 expectedResult: `${openTags(stylesAtInsertionPoint)}a${closedTags(stylesAtInsertionPoint)}` + 169 `${openTags(stylesInserting)}b${closedTags(stylesInserting)}` + 170 `${openTags(stylesAtInsertionPoint)}c${closedTags(stylesAtInsertionPoint)}`, 171 description: "The inline containers should be split and new content inserted between them", 172 }); 173 174 </script> 175 </body> 176 </html>