third_party/WebKit/LayoutTests/fast/media/mq-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script src="../../resources/js-test.js"></script>
   5
   6 <div id="detector"></div>
   7
   8 <style>
   9     #detector { width: 100px; }
  10     @media (resolution: 1.00dppx) { #detector { width: 10px; } }
  11     @media (resolution: 1.50dppx) { #detector { width: 15px; } }
  12     @media (resolution: 2.00dppx) { #detector { width: 20px; } }
  13     @media (resolution: 2.25dppx) { #detector { width: 23px; } }
  14     @media print and (min-resolution: 3dppx) { #detector { width: 30px; } }
  15 </style>
  16
  17 <script>
  18     description("CSS3 media query test: resolution query with dppx. Using style element, @media css rule.")
  19
  20     if (window.testRunner && window.internals) {
  21         window.testRunner.dumpAsText();
  22
  23         function resolutionFromStyle() {
  24             var width = getComputedStyle(document.getElementById("detector")).width;
  25             switch (width) {
  26                 case "10px":
  27                     return 1;
  28                 case "15px":
  29                     return 1.5;
  30                 case "20px":
  31                     return 2;
  32                 case "23px":
  33                     return 2.25;
  34                 case "30px":
  35                     return 3;
  36                 case "31px":
  37                     return 3.125;
  38                 default:
  39                     return undefined;
  40             }
  41         }
  42
  43         function appendMediaRule(rule) {
  44             var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
  45             lastStyleSheet.insertRule(rule, lastStyleSheet.cssRules.length);
  46         }
  47
  48         shouldBe("matchMedia('(resolution: 0dpi)').matches", "false");
  49         shouldBe("matchMedia('(min-resolution: 0dpi)').matches", "false");
  50         shouldBe("matchMedia('(max-resolution: 0dpi)').matches", "false");
  51
  52         window.internals.setDeviceScaleFactor(1.5)
  53         shouldBe("matchMedia('(resolution: 1.5dppx)').matches", "true");
  54         shouldBe("resolutionFromStyle()", "1.5");
  55
  56         window.internals.setDeviceScaleFactor(2);
  57         shouldBe("matchMedia('(resolution: 2dppx)').matches", "true");
  58         shouldBe("resolutionFromStyle()", "2");
  59
  60         window.internals.setDeviceScaleFactor(1);
  61         shouldBe("matchMedia('(resolution: 1dppx)').matches", "true");
  62         shouldBe("resolutionFromStyle()", "1");
  63
  64         window.internals.setDeviceScaleFactor(2.25);
  65         shouldBe("matchMedia('(resolution: 2.25dppx)').matches", "true");
  66         shouldBe("resolutionFromStyle()", "2.25");
  67         shouldBe("matchMedia('(resolution)').matches", "true");
  68         shouldBe("matchMedia('(resolution: 216dpi)').matches", "true");
  69         shouldBe("matchMedia('(min-resolution: 216dpi)').matches", "true");
  70         shouldBe("matchMedia('(max-resolution: 216dpi)').matches", "true");
  71
  72         shouldBe("matchMedia('(resolution: 85dpcm)').matches", "true");
  73         shouldBe("matchMedia('(min-resolution: 85dpcm)').matches", "true");
  74         shouldBe("matchMedia('(max-resolution: 85dpcm)').matches", "true");
  75
  76         // Test printing.
  77
  78         window.internals.settings.setMediaTypeOverride("print");
  79         shouldBe("matchMedia('(min-resolution: 300dpi)').matches", "true");
  80         shouldBe("matchMedia('(min-resolution: 118dpcm)').matches", "true");
  81
  82         // Should match the one requiring 'print' media type.
  83         shouldBe("resolutionFromStyle()", "3");
  84
  85         // As well as those matching 'all'.
  86         appendMediaRule("@media (resolution: 3.125dppx) { #detector { width: 31px; } }");
  87         shouldBe("resolutionFromStyle()", "3.125");
  88     }
  89 </script>
  90
  91 </body>
  92 </html>