third_party/WebKit/LayoutTests/fast/css/zoom-media-queries.html

   1 <!DOCTYPE html>
   2 <style>
   3     html { font-size: 16px; }
   4 </style>
   5 <script src="../../resources/js-test.js"></script>
   6 <script>
   7     if (!window.eventSender) {
   8         document.write("This test does not work in manual mode.");
   9     } else {
  10         if (window.testRunner)
  11             testRunner.dumpAsText();
  12
  13         // These media queries should be equivalent, since the documentElement
  14         // has font-size:16px, so 300px should equal 18.75em. They should both
  15         // initially be false (as the layout test runner is 800px wide).
  16         shouldBeFalse(
  17             'matchMedia("(max-width: 300px)").matches');
  18         shouldBeFalse(
  19             'matchMedia("(max-width: 18.75em)").matches');
  20         debug("");
  21
  22         // While zooming in, the two media queries should either
  23         // both match or both not match.
  24         var maxZoomLevel = 20;
  25         var zoomLevel = 0;
  26         while (zoomLevel < maxZoomLevel) {
  27             debug("eventSender.zoomPageIn()");
  28             eventSender.zoomPageIn();
  29             zoomLevel++;
  30
  31             if (matchMedia("(max-width: 300px)").matches)
  32                 break;
  33
  34             shouldBe(
  35                 'matchMedia("(max-width: 300px)").matches',
  36                 'matchMedia("(max-width: 18.75em)").matches');
  37         }
  38         debug("");
  39
  40         // Once sufficiently zoomed in, both should match.
  41         shouldBeTrue(
  42             'matchMedia("(max-width: 300px)").matches');
  43         shouldBeTrue(
  44             'matchMedia("(max-width: 18.75em)").matches');
  45         debug("");
  46
  47         // As soon as we zoom back out, both should stop matching
  48         // and continue to not match.
  49         while (zoomLevel > 0) {
  50             debug("eventSender.zoomPageOut()");
  51             eventSender.zoomPageOut();
  52             zoomLevel--;
  53
  54             shouldBeFalse(
  55                 'matchMedia("(max-width: 300px)").matches');
  56             shouldBeFalse(
  57                 'matchMedia("(max-width: 18.75em)").matches');
  58         }
  59     }
  60 </script>