<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Test useCSS command');

var testContainer = document.createElement("div");
testContainer.contentEditable = true;
document.body.appendChild(testContainer);

function testUseCSS(styleArg, expectedState)
{
    document.execCommand('useCSS', false, styleArg); 
    if (document.queryCommandState('styleWithCSS') === expectedState)
        testPassed('useCSS changed the state successfully');
    else
        testFailed('useCSS failed with the argument ' + styleArg);
}

function testSingleToggle(toggleCommand, initialContents, expectedContents)
{
    testContainer.innerHTML = initialContents;
    window.getSelection().selectAllChildren(testContainer);
    document.execCommand("useCSS", false, false);
    document.execCommand(toggleCommand, false, null);
    if (testContainer.innerHTML === expectedContents)
        testPassed("one " + toggleCommand + " command converted " + initialContents + " to " + expectedContents);
    else
        testFailed("one " + toggleCommand + " command converted " + initialContents + " to " + testContainer.innerHTML + ", expected " + expectedContents);
}

testUseCSS(false, true);
testUseCSS('false', true);
testUseCSS('FALSE', true);
testUseCSS(true, false);
testUseCSS('random string', false);

if (document.queryCommandState('useCSS') === false)
    testPassed("queryCommandState('useCSS') returns false");
else
    testFailed("queryCommandState('useCSS') should return boolean false");

if (document.queryCommandValue('useCSS') === "")
    testPassed("queryCommandValue('useCSS') returns ''");
else
    testFailed("queryCommandValue('useCSS') should return string ''");

testSingleToggle("underline", "test", "<span style=\"text-decoration: underline;\">test</span>");

document.body.removeChild(testContainer);

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>