blob: 4966ff98e3cb07e0472d8d0e30c4b7976a3ca1bb [file] [log] [blame]
<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>