Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=fontname - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=fontsize - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=forecolor - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=hilitecolor - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=italic - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=strikethrough - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=subscript - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=superscript - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold&stylesInserting=underline - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=bold,italic&stylesInserting=strikethrough,underline - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=fontname&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=forecolor&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=hilitecolor&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=italic&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=strikethrough&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=subscript&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=superscript&stylesInserting=bold - WPT Dashboard Interop Dashboard
- /editing/other/inserthtml-do-not-preserve-inline-styles.html?stylesAtInsertionPoint=underline&stylesInserting=bold - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="timeout" content="long">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=italic">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=strikethrough">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=subscript">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=superscript">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=underline">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=fontname">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=fontsize">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=forecolor">
<meta name="variant" content="?stylesAtInsertionPoint=bold&stylesInserting=hilitecolor">
<meta name="variant" content="?stylesAtInsertionPoint=italic&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=strikethrough&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=subscript&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=superscript&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=underline&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=fontname&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=forecolor&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=hilitecolor&stylesInserting=bold">
<meta name="variant" content="?stylesAtInsertionPoint=bold,italic&stylesInserting=strikethrough,underline">
<title>insertHTML should not preserve inline styles at insertion point</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../include/editor-test-utils.js"></script>
</head>
<body><div contenteditable></div>
<script>
"use strict";
const params = new URLSearchParams(location.search.substring(1));
const stylesAtInsertionPoint = params.get("stylesAtInsertionPoint").split(",");
const stylesInserting = params.get("stylesInserting").split(",");
function getOpenTagForStyle(style) {
switch (style.toLowerCase()) {
case "bold":
return "<b>";
case "italic":
return "<i>";
case "strikethrough":
return "<s>";
case "subscript":
return "<sub>";
case "superscript":
return "<sup>";
case "underline":
return "<u>";
case "fontname":
return "<font face=\"monospace\">";
case "fontsize":
return "<font size=\"5\">";
case "forecolor":
return "<font color=\"#0000FF\">";
case "hilitecolor":
return "<span style=\"background-color:rgb(0, 255, 255)\">";
}
}
function getClosedTagForStyle(style) {
switch (style.toLowerCase()) {
case "bold":
return "</b>";
case "italic":
return "</i>";
case "strikethrough":
return "</s>";
case "subscript":
return "</sub>";
case "superscript":
return "</sup>";
case "underline":
return "</u>";
case "fontname":
case "fontsize":
case "forecolor":
return "</font>";
case "hilitecolor":
return "</span>";
}
}
function openTags(styles) {
let openTags = "";
for (const style of styles) {
openTags = getOpenTagForStyle(style) + openTags;
}
return openTags;
}
function closedTags(styles) {
let closedTags = "";
for (const style of styles) {
closedTags += getClosedTagForStyle(style);
}
return closedTags;
}
const editingHost = document.querySelector("div[contenteditable]");
const utils = new EditorTestUtils(editingHost);
function addTest(aTest) {
test(() => {
utils.setupEditingHost(aTest.innerHTML);
document.execCommand("insertHTML", false, aTest.newContent);
utils.normalizeStyleAttributeValues();
assert_equals(editingHost.innerHTML, aTest.expectedResult, aTest.description);
for (const style of stylesInserting) {
switch (style.toLocaleLowerCase()) {
case "fontsize":
assert_equals(
document.queryCommandValue(style),
"5",
`document.queryCommandValue("${style}")`
);
break;
case "fontname":
assert_equals(
document.queryCommandValue(style),
"monospace",
`document.queryCommandValue("${style}")`
);
break;
case "forecolor":
assert_equals(
document.queryCommandValue(style),
"rgb(0, 0, 255)",
`document.queryCommandValue("${style}")`
);
break;
case "hilitecolor":
assert_equals(
document.queryCommandValue(style),
"rgb(0, 255, 255))",
`document.queryCommandValue("${style}")`
);
break;
default:
assert_true(
document.queryCommandState(style),
`document.queryCommandState("${style}")`
);
break;
}
}
}, `insertHTML with "${aTest.newContent}" into ${aTest.innerHTML}`);
}
addTest({
innerHTML: `${openTags(stylesAtInsertionPoint)}[]def${closedTags(stylesAtInsertionPoint)}`,
newContent: `${openTags(stylesInserting)}abc${closedTags(stylesInserting)}`,
expectedResult: `${openTags(stylesInserting)}abc${closedTags(stylesInserting)}` +
`${openTags(stylesAtInsertionPoint)}def${closedTags(stylesAtInsertionPoint)}`,
description: "New content should be inserted before the inline containers",
});
addTest({
innerHTML: `${openTags(stylesAtInsertionPoint)}abc[]${closedTags(stylesAtInsertionPoint)}`,
newContent: `${openTags(stylesInserting)}def${closedTags(stylesInserting)}`,
expectedResult: `${openTags(stylesAtInsertionPoint)}abc${closedTags(stylesAtInsertionPoint)}` +
`${openTags(stylesInserting)}def${closedTags(stylesInserting)}`,
description: "New content should be appended after the inline containers",
});
addTest({
innerHTML: `${openTags(stylesAtInsertionPoint)}a[]c${closedTags(stylesAtInsertionPoint)}`,
newContent: `${openTags(stylesInserting)}b${closedTags(stylesInserting)}`,
expectedResult: `${openTags(stylesAtInsertionPoint)}a${closedTags(stylesAtInsertionPoint)}` +
`${openTags(stylesInserting)}b${closedTags(stylesInserting)}` +
`${openTags(stylesAtInsertionPoint)}c${closedTags(stylesAtInsertionPoint)}`,
description: "The inline containers should be split and new content inserted between them",
});
</script>
</body>
</html>