<html>
<head>
<script src="../http/tests/inspector/inspector-test.js"></script>
<script src="utilities-test.js"></script>
<script>
function test()
{
    function dumpTextNodesAsString(node)
    {
        var result = "";
        function dumpTextNode(node)
        {
            var str = node.textContent;
            if (node.parentElement.className)
                result += "[" + str + "]";
            else
                result += str;
        };

        function dumpElement(element)
        {
            for (var i = 0; i < element.childNodes.length; i++)
                dumpNode(element.childNodes[i]);
        }

        function dumpNode(node)
        {
            if (node.nodeType === Node.TEXT_NODE)
                dumpTextNode(node);
            else if (node.nodeType === Node.ELEMENT_NODE)
                dumpElement(node);
        };

        dumpNode(node);

        return result;
    }

    function performTestForElement(element, ranges)
    {
        var changes = [];
        InspectorTest.addResult("--------- Running test: ----------");
        WebInspector.highlightRangesWithStyleClass(element, ranges, "highlighted", changes);
        InspectorTest.addResult("After highlight: " + dumpTextNodesAsString(element));
        WebInspector.revertDomChanges(changes);
        InspectorTest.addResult("After revert: " + dumpTextNodesAsString(element));
        WebInspector.applyDomChanges(changes);
        InspectorTest.addResult("After apply: " + dumpTextNodesAsString(element));
    }

    function textElement(strings)
    {
        var element = document.createElement("div");
        for (var i = 0; i < strings.length; i++) {
            var span = document.createElement("span");
            span.textContent = strings[i];
            element.appendChild(span);
        }
        return element;
    }

    function range(offset, length)
    {
        var result = {};
        result.offset = offset;
        result.length = length;
        return result;
    }

    performTestForElement(textElement(["function"]), [range(0, 8)]); // Highlight whole text node.
    performTestForElement(textElement(["function"]), [range(0, 7)]); // Highlight only text node beginning.
    performTestForElement(textElement(["function"]), [range(1, 7)]); // Highlight only text node ending.
    performTestForElement(textElement(["function"]), [range(1, 6)]); // Highlight in the middle of text node.

    performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 21)]); // Highlight all text in 3 text nodes.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 20)]); // Highlight all text in 3 text nodes except for the last character.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(1, 20)]); // Highlight all text in 3 text nodes except for the first character.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(1, 19)]); // Highlight all text in 3 text nodes except for the first and the last characters.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(7, 3)]); // Highlight like that "functio[n f]unctionName"

    performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 1), range(8, 1), range(9, 1)]); // Highlight first characters in text nodes.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(7, 1), range(8, 1), range(20, 1)]); // Highlight last characters in text node.
    performTestForElement(textElement(["function", " ", "functionName"]), [range(0, 1), range(7, 3), range(20, 1)]); // Highlight like that: "[f]unctio[n f]unctionNam[e]"
    InspectorTest.completeTest();
}
</script>
</head>
<body onload="runTest()">
    <p>Tests how utilities functions highlight text and then revert/re-apply highlighting changes.</p>
    <a href="https://bugs.webkit.org/show_bug.cgi?id=70244">Bug 70244</a>
</body>
</html>