<html>
<head>
<style>
#inspected {
    background-image: url("red green blue.jpg");
    color: red;
}
</style>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function test()
{
    InspectorTest.selectNodeAndWaitForStyles("inspected", step1);

    function step1()
    {
        dumpDOM(InspectorTest.getMatchedStylePropertyTreeItem("background-image"));
        dumpDOM(InspectorTest.getMatchedStylePropertyTreeItem("color"));
        InspectorTest.completeTest();
    }

    function dumpDOM(treeItem)
    {
        var element = treeItem.listItemElement.getElementsByClassName("value")[0];
        var result = [];
        dumpNode(element, result);
        InspectorTest.addResult(result.join(""));
    }

    function dumpNode(parentNode, result)
    {
        var childNodes = parentNode.childNodes;
        for (var i = 0; i < childNodes.length; ++i) {
            var node = childNodes[i];
            switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                if (node.hasStyleClass("swatch"))
                    result.push("[] ");
                else
                    dumpNode(node, result);
                break;
            case Node.TEXT_NODE:
                result.push(node.nodeValue);
                break;
            }
        }
    }
}

</script>
</head>
<body onload="runTest()">
<p>
Tests that url(...) with space-delimited color names as filename segments do not contain color swatches. Bug <a href="http://bugs.webkit.org/show_bug.cgi?id=106770">106770</a>.
</p>
<div id="inspected"></div>
</body>
</html>