<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>meta viewport test</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="viewport_helpers.js"></script>
</head>
<body>
  <p>width=device-width, initial-scale=1</p>
  <script type="application/javascript;version=1.7">
    "use strict";

    SimpleTest.waitForExplicitFinish();

    let tests = [];

    tests.push(function test1() {
      SpecialPowers.pushPrefEnv(scaleRatio(1.0),
        function() {
          let info = getViewportInfo(800, 480);
          is(info.defaultZoom, 1,    "initial zoom is 100%");
          is(info.width,       800,  "width is the same as the displayWidth");
          is(info.height,      480,  "height is the same as the displayHeight");
          is(info.autoSize,    true, "width=device-width enables autoSize");
          is(info.allowZoom,   true, "zooming is enabled by default");

          info = getViewportInfo(900, 600);
          is(info.width,       900,  "changing the displayWidth changes the width");
          is(info.height,      600,  "changing the displayHeight changes the height");

          nextTest();
        });
    });

    tests.push(function test2() {
      SpecialPowers.pushPrefEnv(scaleRatio(1.5),
        function() {
          let info = getViewportInfo(900, 600);
          is(info.defaultZoom, 1.5,  "initial zoom is 150%");
          is(info.width,       600,  "width equals displayWidth/1.5");
          is(info.height,      400,  "height equals displayHeight/1.5");

          nextTest();
        });
    });

    function getViewportInfo(aDisplayWidth, aDisplayHeight) {
      let defaultZoom = {}, allowZoom = {}, minZoom = {}, maxZoom = {},
          width = {}, height = {}, autoSize = {};

      let cwu = SpecialPowers.getDOMWindowUtils(window);
      cwu.getViewportInfo(aDisplayWidth, aDisplayHeight, defaultZoom, allowZoom,
                          minZoom, maxZoom, width, height, autoSize);
      return {
        defaultZoom: defaultZoom.value,
        minZoom: minZoom.value,
        maxZoom: maxZoom.value,
        width: width.value,
        height: height.value,
        autoSize: autoSize.value,
        allowZoom: allowZoom.value
      };
    }

    function nextTest() {
      if (tests.length)
        (tests.shift())();
      else
        SimpleTest.finish();
    }
    addEventListener("load", nextTest);
  </script>
</body>
</html>