<!DOCTYPE html>
<html>
    <head>
        <title>ExecCommand argument combinations</title>
        <style>
            .pass { font-weight: bold; color: green; }
            .fail { font-weight: bold; color: red; }
            #console { border: 1px solid black; padding: 10px; margin-bottom: 20px; }
        </style>
        <script type="text/javascript">
            function debug(msg)
            {
                var span = document.createElement("span");
                span.innerHTML = msg + '<br>';
                document.getElementById("console").appendChild(span);
            }

            function escapeHTML(text)
            {
                return text.replace(/&/g, "&amp;").replace(/</g, "&lt;");
            }

            function testPassed(msg)
            {
                debug('<span class="pass">PASS</span> ' + msg + '</span>');
            }

            function testFailed(msg)
            {
                debug('<span class="fail">FAIL</span> ' + msg + '</span>');
            }

            function testEquals(a, b)
            {
                if (a == b) {
                    testPassed(escapeHTML(a) + " <b>is</b> " + escapeHTML(b));
                } else {
                    testFailed("<b>expected output was</b> " + escapeHTML(a) + " <b>should have been</b> " + escapeHTML(b));
                }
            }

            function test(codeToEval, expectedOutput)
            {
                var e = document.createElement('div');
                e.setAttribute('contentEditable', 'true');
                document.body.appendChild(e);
                e.focus();
                eval(codeToEval);
                testEquals(e.innerHTML, expectedOutput);
            }

            function runTests()
            {
                if (window.testRunner)
                     testRunner.dumpAsText();

                // Test with 1 argument.
                test('document.execCommand("InsertHorizontalRule")', '<hr>');

                // Test with 2 arguments.
                test('document.execCommand("InsertHorizontalRule", false)', '<hr>');

                // Test with 3 arguments.
                test('document.execCommand("InsertHorizontalRule", false, "foo")', '<hr id="foo">');

                // Test with 4 arguments. (should ignore the fourth argument silently)
                test('document.execCommand("InsertHorizontalRule", false, "foo", "bar")', '<hr id="foo">');

                // Test empty String 3rd parameter. (should not add an empty id value)
                test('document.execCommand("InsertHorizontalRule", false, "")', '<hr>');

                // Test null 3rd parameter. (should stringify to "null")
                test('document.execCommand("InsertHorizontalRule", false, null)', '<hr id="null">');

                // Test undefined 3rd parameter. (should treat as if only two arguments were passed, same as null)
                test('document.execCommand("InsertHorizontalRule", false, undefined)', '<hr>');

                // Test 0 for 3rd parameter. (nothing special, id value should equal the string 0)
                test('document.execCommand("InsertHorizontalRule", false, 0)', '<hr id="0">');

                // Test undefined 3rd parameter implicitly using helper function. (should treat as if only two arguments were passed, same as null)
                test('function ExecCommand(command, commandParam) { document.execCommand(command, false, commandParam); } ExecCommand("InsertHorizontalRule");', '<hr>');
            }
        </script>
    </head>
    <body onload="runTests();">
        <p>These are tests for testing the how execCommand() works with different combinations of arguments. The "InsertHorizontalRule" command was 
            chosen arbitrarily because it was what I was working on at the time, but the results should be paralleled in the other commands as well.</p>

        <h4>CONSOLE</h4>
        <pre id='console'></pre>
    </body>
</html>