<html>
<head>
<style>
.red div:first-child {
    background-color: red;
}

div[foo="bar"] + div {
    background-color: blue;
}

</style>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>
function modifyStyleAttribute()
{
    document.getElementById("container").setAttribute("style", "color: #daC0DE; border: 1px solid black;");
}

function modifyCSSText()
{
    document.getElementById("container").style.cssText = "color: #C0FFEE";
}

function modifyParsedAttributes()
{
    var style = document.getElementById("container").style;
    style.border = "2px dashed green";
    style.borderWidth = "3px";
}

function modifyContainerClass()
{
    document.getElementById("container").className = "red";
}

function modifyChildAttr()
{
    document.getElementById("child").setAttribute("foo", "bar");
}

function test()
{
    InspectorTest.runTestSuite([
        function testInit(next)
        {
            InspectorTest.selectNodeAndWaitForStyles("container", next);
        },

        function testSetStyleAttribute(next)
        {
            waitAndDumpAttributeAndStyles(next);
            InspectorTest.evaluateInPage("modifyStyleAttribute()");
        },

        function testSetStyleCSSText(next)
        {
            waitAndDumpAttributeAndStyles(next);
            InspectorTest.evaluateInPage("modifyCSSText()");
        },

        function testSetViaParsedAttributes(next)
        {
            waitAndDumpAttributeAndStyles(next);
            InspectorTest.evaluateInPage("modifyParsedAttributes()");
        },

        function testSetViaAncestorClass(next)
        {
            InspectorTest.selectNodeAndWaitForStyles("child", callback);

            function callback()
            {
                waitAndDumpAttributeAndStyles(next, "child");
                InspectorTest.evaluateInPage("modifyContainerClass()");
            }
        },

        function testSetViaSiblingAttr(next)
        {
            InspectorTest.selectNodeAndWaitForStyles("childSibling", callback);

            function callback()
            {
                waitAndDumpAttributeAndStyles(next, "childSibling");
                InspectorTest.evaluateInPage("modifyChildAttr()");
            }
        }
    ]);

    function waitAndDumpAttributeAndStyles(next, id)
    {
        id = id || "container";
        function callback()
        {
            dumpAttributeAndStyles(id);
            next();
        }
        InspectorTest.waitForStyles(id, callback);
    }

    function dumpAttributeAndStyles(id)
    {
        var treeElement = findNodeTreeElement(id);
        if (!treeElement) {
            InspectorTest.addResult("'" + id + "' tree element not found");
            return;
        }
        InspectorTest.addResult(treeElement.listItemElement.textContent.replace(/\u200b/g, ""));
        InspectorTest.dumpSelectedElementStyles(true);
    }

    function findNodeTreeElement(id)
    {
        WebInspector.panels.elements.treeOutline._updateModifiedNodes();
        var expandedNode = InspectorTest.expandedNodeWithId(id);
        if (!expandedNode) {
            InspectorTest.addResult("'" + id + "' node not found");
            InspectorTest.completeTest();
        }
        return WebInspector.panels.elements.treeOutline.findTreeElement(expandedNode);
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that changes to an inline style and ancestor/sibling className from JavaScript are reflected in the Styles pane and Elements tree.
</p>

<div id="container" style="font-weight:bold"><div id="child"></div><div id="childSibling"></div></div>

</body>
</html>