third_party/WebKit/LayoutTests/fast/media/mq-width-on-zoom.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <script src="../../resources/js-test.js"></script>
   5     </head>
   6     <body>
   7         <p>
   8             Tests that width MQ feature is correct on zoom.
   9         </p>
  10         <script>
  11             // eventSender.zoomPageOut/In zooms with a fixed factor of 1.2 instead
  12             // of the zoom levels of the actual browser.
  13
  14             function printMatch(match) {
  15                 return (match > 0) ? "matches " + match + "px." : "doesn't match tested values.";
  16             }
  17
  18             function test() {
  19                 shouldBeTrue("window.matchMedia('(width: " + window.innerWidth + "px)').matches");
  20                 if (window.matchMedia("(width: " + window.innerWidth + "px)").matches)
  21                     return;
  22
  23                 var matches = 0
  24                 for (var j = 0; j < window.innerWidth + 100; j++) {
  25                     if (window.matchMedia("(width: " + j + "px)").matches) {
  26                         matches = j;
  27                         break;
  28                     }
  29                 }
  30
  31                 debug("window.innerWidth is " + window.innerWidth + "px, but width MQ feature " + printMatch(j));
  32             }
  33
  34             if (window.eventSender) {
  35                 for (var i = 0; i < 5; i++) {
  36                     eventSender.zoomPageOut();
  37                     test();
  38                 }
  39
  40                 for (var i = 0; i < 10; i++) {
  41                     eventSender.zoomPageIn();
  42                     test();
  43                 }
  44             }
  45         </script>
  46     </body>
  47 </html>