<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script>

var foo = 123

var test = function()
{
    // We need to initialize scripts panel so that watch expressions section is created.
    WebInspector.showPanel("scripts");

    var watchExpressionsSection = WebInspector.panels.scripts.sidebarPanes.watchExpressions.section;
    watchExpressionsSection.watchExpressions = [];
    watchExpressionsSection.watchExpressions.push("#$%");
    watchExpressionsSection.update();

    InspectorTest.runAfterPendingDispatches(step1);

    function step1()
    {
        InspectorTest.addResult(watchExpressionsSection.element.innerHTML.indexOf("watch-expressions-error-level") !== -1 ? "SUCCESS" : "FAILED");

        // Clear watch expressions after execution.
        watchExpressionsSection.watchExpressions = [];
        watchExpressionsSection.update();

        InspectorTest.completeTest();
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that watches pane renders errors in red.
</p>

</body>
</html>