editing/execCommand/5685604-1.html

<body>
<p>This tests to make sure that execCommand("styleWithCSS", ...) is supported and turns on the use of legacy tags in leu of CSS-styled spans for formatting changes.</p>
<div contenteditable="true" id="div">The second and last words in this sentence should be bold.</div>
<ul id="console"></ul>
<script>
function log(msg) {
    console = document.getElementById("console");
    text = document.createTextNode(msg);
    li = document.createElement("li");
    console.appendChild(li);
    li.appendChild(text);
}
r = document.createRange();
div = document.getElementById("div");
text = div.firstChild;
window.getSelection().setBaseAndExtent(text, 4, text, 10);
document.execCommand("bold", false, "");
window.getSelection().setBaseAndExtent(text, text.length - 5, text, text.length - 1);

if (document.queryCommandSupported("styleWithCSS"))
    log("Success. execCommand(\"styleWithCSS\", ...) is supported.");
else
    log("Failure. execCommand(\"styleWithCSS\", ...) is not supported.");
    
document.execCommand("styleWithCSS", false, true);
document.execCommand("bold", false, "");

expectedHTML = "The <b>second</b> and last words in this sentence should be <span style=\"font-weight: bold;\">bold</span>.";

if (div.innerHTML == expectedHTML)
    log("Success. A legacy formatting tag was used for styling by default, and execCommand(\"styleWithCSS\", ..., true) activated the use of CSS styling.");
else
    log("Failure. Expected: " + expectedHTML);

if (window.testRunner) {
    window.testRunner.dumpAsText();
    document.body.innerText = document.getElementById("console").innerText;
}
</script>
</body>