third_party/WebKit/LayoutTests/inspector/elements/styles-2/media-emulation.html

   1 <html>
   2 <head>
   3
   4 <style type="text/css">
   5 #main { color: red; }
   6
   7 @media print {
   8 #main { color: black; }
   9 }
  10
  11 @media tty {
  12 #main { color: green; }
  13 }
  14 </style>
  15
  16 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  17 <script src="../../../http/tests/inspector/elements-test.js"></script>
  18 <script>
  19
  20 function test()
  21 {
  22     InspectorTest.selectNodeAndWaitForStyles("main", step0);
  23
  24     function step0()
  25     {
  26         InspectorTest.addResult("Original style:");
  27         InspectorTest.dumpSelectedElementStyles(true);
  28         applyEmulatedMedia("print");
  29         InspectorTest.waitForStyles("main", step1);
  30     }
  31
  32     function step1() {
  33         InspectorTest.addResult("print media emulated:");
  34         InspectorTest.dumpSelectedElementStyles(true);
  35         applyEmulatedMedia("tty");
  36         InspectorTest.waitForStyles("main", step2);
  37     }
  38
  39     function step2()
  40     {
  41         InspectorTest.addResult("tty media emulated:");
  42         InspectorTest.dumpSelectedElementStyles(true);
  43         applyEmulatedMedia("");
  44         InspectorTest.waitForStyles("main", step3);
  45     }
  46
  47     function step3()
  48     {
  49         InspectorTest.addResult("No media emulated:");
  50         InspectorTest.dumpSelectedElementStyles(true);
  51         InspectorTest.completeTest();
  52     }
  53
  54     function applyEmulatedMedia(media)
  55     {
  56         InspectorTest.EmulationAgent.setEmulatedMedia(media);
  57         InspectorTest.cssModel.mediaQueryResultChanged();
  58     }
  59 }
  60 </script>
  61 </head>
  62
  63 <body onload="runTest()">
  64 <p>
  65 Tests that emulated CSS media is reflected in the Styles pane.
  66 </p>
  67
  68 <div id="main"></div>
  69 </body>
  70 </html>