layout/style/test/test_webkit_device_pixel_ratio.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1176968
   5 -->
   6 <head>
   7   <title>Test for Bug 1176968</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10   <style>.zoom-test { visibility: hidden; }</style>
  11   <style><!-- placeholder for dynamic additions --></style>
  12 </head>
  13 <body onload="run()">
  14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176968">Mozilla Bug 1176968</a>
  15 <div id="content" style="display: none">
  16
  17 </div>
  18 <script type="text/javascript">
  19 </script>
  20 <pre id="test">
  21 <div id="zoom1" class="zoom-test"></div>
  22 <div id="zoom2" class="zoom-test"></div>
  23 <div id="zoom3" class="zoom-test"></div>
  24 <script class="testbody" type="application/javascript">
  25
  26 /** Test for Bug 1176968 **/
  27
  28 SimpleTest.waitForExplicitFinish();
  29
  30 function run() {
  31   function zoom(factor) {
  32     var previous = SpecialPowers.getFullZoom(window);
  33     SpecialPowers.setFullZoom(window, factor);
  34     return previous;
  35   }
  36
  37   function isVisible(divName) {
  38     return window.getComputedStyle(document.getElementById(divName)).visibility == "visible";
  39   }
  40
  41   var screenPixelsPerCSSPixel = window.devicePixelRatio;
  42   var baseRatio = 1.0 * screenPixelsPerCSSPixel;
  43   var doubleRatio = 2.0 * screenPixelsPerCSSPixel;
  44   var halfRatio = 0.5 * screenPixelsPerCSSPixel;
  45   var styleElem = document.getElementsByTagName("style")[1];
  46   styleElem.textContent =
  47       ["@media all and (-webkit-device-pixel-ratio: " + baseRatio + ") {",
  48          "#zoom1 { visibility: visible; }",
  49        "}",
  50        "@media all and (-webkit-device-pixel-ratio: " + doubleRatio + ") {",
  51          "#zoom2 { visibility: visible; }",
  52        "}",
  53        "@media all and (-webkit-device-pixel-ratio: " + halfRatio + ") {",
  54          "#zoom3 { visibility: visible; }",
  55        "}"
  56       ].join("\n");
  57
  58   ok(isVisible("zoom1"), "Base ratio rule should apply at base zoom level");
  59   ok(!isVisible("zoom2") && !isVisible("zoom3"), "no other rules should apply");
  60   var origZoom = zoom(2);
  61   ok(isVisible("zoom2"), "Double ratio rule should apply at double zoom level");
  62   ok(!isVisible("zoom1") && !isVisible("zoom3"), "no other rules should apply");
  63   zoom(0.5);
  64   ok(isVisible("zoom3"), "Half ratio rule should apply at half zoom level");
  65   ok(!isVisible("zoom1") && !isVisible("zoom2"), "no other rules should apply");
  66   zoom(origZoom);
  67
  68   SimpleTest.finish();
  69 }
  70 </script>
  71 </pre>
  72 </body>
  73 </html>