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

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

testStyleWithCSS(true, true);
testStyleWithCSS('false', false);
testStyleWithCSS('FALSE', false);
testStyleWithCSS('random string', true);
testStyleWithCSS(null, true);

document.execCommand('styleWithCSS', false, true);
if (document.queryCommandState('styleWithCSS') === true)
    testPassed("queryCommandState('styleWithCSS') returns true");
else
    testFailed("queryCommandState('styleWithCSS') should return boolean true");

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

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

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

</script>
</body>
</html>