<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 watchExpressionsPane = WebInspector.panels.scripts.sidebarPanes.watchExpressions;
    watchExpressionsPane.expand();

    var watchExpressionsSection = watchExpressionsPane.section;
    watchExpressionsSection.watchExpressions = [];
    watchExpressionsSection.watchExpressions.push("#$%");
    watchExpressionsSection.update();

    InspectorTest.runAfterPendingDispatches(step1);

    function step1()
    {
        InspectorTest.addResult(watchExpressionsSection.element.textContent.indexOf("<not available>") !== -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>