<html>
<head>

<style type="text/css">
#main { color: red; }

@media print {
#main { color: black; }
}

@media tty {
#main { color: green; }
}
</style>

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

function test()
{
    InspectorTest.selectNodeAndWaitForStyles("main", step0);

    function step0()
    {
        InspectorTest.addResult("Original style:");
        InspectorTest.dumpSelectedElementStyles();
        applyEmulatedMedia("print");
        InspectorTest.waitForStyles("main", step1);
    }

    function step1() {
        InspectorTest.addResult("print media emulated:");
        InspectorTest.dumpSelectedElementStyles();
        applyEmulatedMedia("tty");
        InspectorTest.waitForStyles("main", step2);
    }

    function step2()
    {
        InspectorTest.addResult("tty media emulated:");
        InspectorTest.dumpSelectedElementStyles();
        applyEmulatedMedia("");
        InspectorTest.waitForStyles("main", step3);
    }

    function step3()
    {
        InspectorTest.addResult("No media emulated:");
        InspectorTest.dumpSelectedElementStyles();
        InspectorTest.completeTest();
    }

    function applyEmulatedMedia(media)
    {
        PageAgent.setEmulatedMedia(media);
        WebInspector.cssModel.mediaQueryResultChanged();
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that emulated CSS media is reflected in the Styles pane.
</p>

<div id="main"></div>
</body>
</html>