<html>
<head>
<style>
body {
    background-color: rgb(100, 0, 0);
    font-family: Arial;
}

div {
    text-decoration: underline;
}

#id1 {
    background-color: green;
    font-family: Times;
}

#id1 {
    background-color: black;
    font-family: Courier;
}

#id1 {
    background: gray;
}

#id2 {
    background-color: blue;
    font-family: Courier;
    text-decoration: invalidvalue;
}

</style>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function test()
{
    InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1);

    function step1()
    {
        InspectorTest.addResult("==== Computed style for ID1 ====");
        InspectorTest.dumpSelectedElementStyles(false, true);
        InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2);
    }

    function step2()
    {
        InspectorTest.addResult("==== Computed style for ID2 ====");
        InspectorTest.dumpSelectedElementStyles(false, true);
        InspectorTest.selectNodeAndWaitForStylesWithComputed("id3", step3);
    }

    function step3()
    {
        InspectorTest.addResult("==== Style for ID3 ====");
        // The button[hidden] style specifies "display: none", which should not be /-- overloaded --/.
        InspectorTest.dumpSelectedElementStyles(true, true);
        InspectorTest.completeTest();
    }

}
</script>
</head>

<body onload="runTest()">
<p>
Tests that computed styles expand and allow tracing to style rules.
</p>

<div id="id1">
<div id="id2">
</div>
<button id="id3" hidden />
</div>

</body>
</html>