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

function test()
{
    function TestView(viewName, requiredCSS, requiredCSS2)
    {
        WebInspector.View.call(this);

        this.registerRequiredCSS(requiredCSS);
        if (requiredCSS2)
            this.registerRequiredCSS(requiredCSS2);
        this._viewName = viewName;
    }

    TestView.prototype = {
        show: function(parentElement)
        {
            InspectorTest.addResult(this._viewName + ".show()");
            WebInspector.View.prototype.show.call(this, parentElement);
        },

        detach: function()
        {
            InspectorTest.addResult(this._viewName + ".detach()");
            WebInspector.View.prototype.detach.call(this);
        },

        _doLoadCSS: function(cssFile)
        {
            InspectorTest.addResult("  LOAD " + cssFile);
        },

        _doUnloadCSS: function(cssFile)
        {
            InspectorTest.addResult("  UNLOAD " + cssFile);
        }
    };

    TestView.prototype.__proto__ = WebInspector.View.prototype;

    InspectorTest.runTestSuite([
        function testEvents(next)
        {
            var parentView = new TestView("Parent", "parent.css");
            parentView.show(WebInspector.inspectorView.element);

            var childView1 = new TestView("Child 1", "child.css", "child1.css");
            var childView2 = new TestView("Child 2", "child.css", "child2.css");

            childView1.show(parentView.element);
            childView2.show(parentView.element);

            childView2.detach(parentView.element);

            parentView.detach();

            parentView.show(WebInspector.inspectorView.element);

            next();
        }
    ]);
}

</script>
</head>

<body onload="runTest()">
<p>
This tests that CSS files are properly loaded / unloaded upon view show / detach.
</p>

</body>
</html>