<html>
<head>

<style>
h1 {
    background-color: red;
}
</style>

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

function test()
{
    InspectorTest.runTestSuite([
        function testShowUserAgentStyles(next)
        {
            WebInspector.settings.showUserAgentStyles.set(true);
            selectNodeAndDumpStyles("inspected", next);
        },

        function testShowUserAgentStyles(next)
        {
            WebInspector.settings.showUserAgentStyles.set(false);
            selectNodeAndDumpStyles("other", next);
        }
    ]);

    function selectNodeAndDumpStyles(nodeId, next)
    {
        InspectorTest.addResult("WebInspector.settings.showUserAgentStyles = " + WebInspector.settings.showUserAgentStyles.get());
        InspectorTest.selectNodeAndWaitForStyles(nodeId, step1);

        function step1()
        {
            InspectorTest.dumpSelectedElementStyles(true, false, true);
            WebInspector.settings.showUserAgentStyles.set(true);
            next();
        }
    }
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that user agent styles are shown based on the setting: https://bugs.webkit.org/show_bug.cgi?id=37766.
</p>
<h1 id="inspected">
I'm red.
</h1>
<h1 id="other">
I'm also red.
</h1>
</body>
</html>