<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript'>
    // Demonstrates how media query can be used to get the value of the
    // window resolution, width, and height.

    function log_info(message) {
      console.log(message);
      document.getElementById('info').innerHTML += message + '.\n';
    }
    function log_error(message) {
      console.log('Error: ' + message);
      document.getElementById('error').innerHTML += message + '.\n';
    }

    function search(low, high, query, units) {
      var precision = 1/32;
      while (low < high - precision) {
        var mid = Math.floor((low + high) / 2 / precision) * precision;
        query_str = '(max-' + query + ':' + mid + units + ')'
        if (window.matchMedia(query_str).matches) {
          // The window value is less than or equal to result.
          high = mid;
        } else {
          // The window value is greater than result.
          low = mid;
        }
      }
      return high;
    }

    function PrintWindowSize() {
      var width = search(0, 16000, 'width', 'px');
      var height = search(0, 16000, 'height', 'px');
      log_info('media size: ' + width + 'x' + height);
      if (Math.abs(width - window.innerWidth) >= 1) {
        log_error('width does not match window.innerWidth');
      }
      if (Math.abs(height - window.innerHeight) >= 1) {
        log_error('height does not match window.innerHeight');
      }
    }

    function PrintDpi() {
      var dpi = search(0, 16000, 'resolution', 'dpi');
      log_info('resolution dpi: ' + dpi +
               ', window.devicePixelRatio: ' + window.devicePixelRatio);
      if (Math.abs(dpi - 96 * window.devicePixelRatio) > 1) {
        log_error('resolution does not match devicePixelRatio');
      }
    }


    function intervalCallback() {
      PrintDpi();
      PrintWindowSize();
    }

    window.setInterval(intervalCallback, 500);
  </script>
</head>

<body>
  <span id='error' style='white-space: pre; background-color:#FF0000'></span>
  <span id='info' style='white-space: pre; background-color:#00FF00'></span>
</body>
</html>